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