Docker :: multistage build :: frontend
Jan 6, 2023
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;
}
}