How to Dockerize react app with nginx

By:     [ Email  / Twitter ]

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

# Default server configuration
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

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

Tagged With :