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 /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
