Docker :: multistage build :: frontend

This is the Dockerfile for building a frontend using a multistage builds

# build phase
FROM node:19-alpine3.16 as builder
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
RUN yarn build

# final image
FROM nginx:1.23.3-alpine
COPY --from=builder app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

It reduces the final image size from ~1Gb to ~50Mb

nginx.conf:

server {

   listen 80;

   location / {
     root   /usr/share/nginx/html;
     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
   }

   error_page   500 502 503 504  /50x.html;

   location = /50x.html {
     root   /usr/share/nginx/html;
   }

 }