前端项目构建打包部署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
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进行容器编排即可

写在最后

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