前端项目构建打包部署Docker部署化

发表于 更新于 本文字数： 872 阅读时长 ≈ 1 分钟
本文介绍关于前端项目构建打包部署Docker部署化，包括使用场景、实现细节等，以提高关于前端项目构建打包部署Docker部署化的效率。

最近在做开源项目，因此可以脱离公司成熟的CI/CD，自己搞搞。为了降低用户部署门槛，因此决定使用Docker来构建部署镜像，解决部署效率问题。

dockerfile

这里贴下构建镜像文件，文件名称比如是build.Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
FROM node:14.17.0 as builder

ENV NODE_ENV production

RUN echo " ------------------Web打包 --------------------"

WORKDIR /management-web

COPY . /management-web

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

RUN echo " ------------------Web容器部署启动 --------------------"

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


说明

  1. 该镜像实现了多阶段构建，静态资源打包 -> Nginx托管静态资源。
  2. 如果需要打包成镜像，执行构建命令docker build -t management-web:1.0 --file build.Dockerfile .
  3. 如上配置中copy nginx配置是为了将自定义配置拷贝到nginx容器中
  4. 对于需要部署前后端的，可以整体用docker-compose进行容器编排即可
  5. 因为是 多阶段构建，node部分只是阶段过程，最终的体积大小是nginx镜像+第一步copy过去的静态资源，比如这里最终生成镜像大小为143MB

写在最后

以前部署需要一堆繁琐的命令配置，如今只需要一次编写配置，构建成镜像，安装docker，启动镜像初始实例即可。