Computersnyou

How to Dockerize create react app

Posted on  6/24/2018
Edgar Chaparro

 

In this post I’ll show you how to package simple react app , created with create-react-app in this case , as docker image, using alpine linux and intermediate docker image to keep the docker image size small.

Install docker for you platform : https://docs.docker.com/install/

and create default.conf for nginx configuration and  Dockerfile for docker image in your project’s root directory.

#default.conf
server {
  listen 80 default_server;
  root /app;
  # Routes without file extension e.g. /user/1
  location / {
    try_files $uri /index.html;
  }
  # 404 if a file is requested (so the main app isn't served)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }
  # OPTIONAL: For an API server you want to proxy
  location /api {
    proxy_pass http://localhost:8081;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection ‘upgrade’;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

 

Dockerfile

#Dockerfile
FROM mhart/alpine-node:8 AS build-env
RUN apk update
WORKDIR /app
COPY . .
RUN yarn install --production
RUN yarn build

FROM alpine
RUN apk update && apk add ca-certificates nginx && rm -rf /var/cache/apk/*
RUN mkdir /run/nginx && touch /run/nginx/nginx.pid
WORKDIR /app
COPY --from=build-env /app/build /app
COPY ./default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Key part is that we are using intermediate image to build see AS build-env  and another image notice another FROM alpine  in dockerfile , for final image to keep image size small as possible.

After adding above two files , run these command to build docker image

docker build .

sample output

Screenshot from 2018 06 24 11 26 05


  • Home
  • Home
  • Home
About
lorem lasda asda adasd adsad lorem lasda asda adasd adsad lorem lasda asda adasd adsad lorem lasda asda adasd adsad lorem lasda asda adasd adsad lorem lasda asda adasd adsad