Dockerizing Frontend Build and Deployment

I’ve been working on an open-source project recently, so I can step away from the company’s mature CI/CD and experiment on my own. To lower the deployment barrier for users, I decided to use Docker to build deployment images, addressing deployment efficiency issues.

dockerfile

Here is the Dockerfile for building the image, for example named build.Dockerfile

FROM node:14.17.0 as builder

ENV NODE_ENV production

RUN echo " ------------------Web Build --------------------"

WORKDIR /management-web

COPY . /management-web

RUN npm install --registry=https://registry.npm.taobao.org
RUN npm run build

RUN echo " ------------------Web Container Deployment & Startup --------------------"

FROM nginx:1.19.2
COPY --from=builder /management-web/build /usr/share/nginx/html
COPY deploy/nginx/conf.d /etc/nginx/conf.d
EXPOSE 80

Explanation

1. This image implements multi-stage build: static resource packaging → Nginx hosting static resources.
2. To build the image, execute: docker build -t management-web:1.0 --file build.Dockerfile .
3. The nginx config copy in the above configuration is to copy custom settings into the nginx container.
4. For full-stack deployments, use docker-compose for container orchestration.
5. Since it’s a multi-stage build, the node part is just a intermediate stage. The final image size is nginx image + copied static resources (here it’s 143MB).

Final Thoughts

Previously, deployment required a lot of tedious command configurations. Now, you just need to write the configuration once, build the image, install Docker, and start the initial container instance.