前端 VUE 项目容器化方案 - 总有一款适合你

方案一：通过复制编译后静态资源的方式构建和启动前端容器

1. 资源目录树形结构

   drwxr-xr-x 6 root root     128 Mar 11 17:53 dist
   -rw-r--r-- 1 root root     293 Mar 11 17:58 Dockerfile
   

2. Dockerfile 文件内容

   # 基础镜像
   FROM alpine:3.19.1
   # 镜像维护
   LABEL maintainer=rambo1203@sina.com
   # 设置工作目录
   WORKDIR /opt/html
   # 将 dist 文件夹拷贝到镜像中
   COPY dist ./dist
   # 在容器启动时执行复制操作，将 dist 文件夹中的所有内容复制到 $WORKDIR/web 文件夹中
   CMD ["sh", "-c", "cp -r dist/. web && tail -f /dev/null"]
   

3. 构建前端镜像

   docker build -t 127.0.0.1:8000/rambo-tech/web:V1.0.0.1 .
   

4. 启动前端容器

   docker run -d --name web -v /opt/modules/nginx/html/web:/opt/html/web 127.0.0.1:8000/rambo-tech/web:V1.0.0.1
   

   P.S
   此场景适用于通过外部 Nginx 作为反向代理，且每次更新的前端资源都以镜像中的资源为准（每次重启容器，宿主机的资源都会被容器中的资源所覆盖），只需要将容器中的资源挂载到宿主机 Nginx 的静态资源路径即可。请根据自己的需求调整 CMD 或者挂载地址。

方案二：通过构建镜像同时编辑前端静态资源并启动前端容器

1. 资源目录树形结构

   -rw-r--r-- 1  501 games     73 Oct 23 13:45 babel.config.js
   -rw-r--r-- 1 root root     293 Mar 11 17:58 Dockerfile
   -rw-r--r-- 1  501 games    822 Oct 23 13:45 largePic.html
   -rw-r--r-- 1  501 games   1169 Oct 23 13:45 package.json
   -rw-r--r-- 1  501 games 505074 Oct 23 13:45 package-lock.json
   drwxr-xr-x 2  501 games     83 Mar  7 10:51 public
   -rw-r--r-- 1  501 games    363 Oct 23 13:45 README.md
   drwxr-xr-x 7  501 games    127 Mar  7 10:51 src
   -rw-r--r-- 1  501 games   1833 Oct 23 13:45 vue.config.js
   -rw-r--r-- 1  501 games 388829 Oct 23 13:45 yarn.lock
   

2. Dockerfile 文件内容

   # 基础镜像
   FROM node:12.22.12-alpine3.15
   # 镜像维护
   LABEL maintainer=rambo1203@sina.com
   # 设置工作目录
   WORKDIR /opt/html
   # 复制项目文件到工作目录
   COPY . .
   # 安装项目依赖
   RUN npm install --registry=http://registry.npm.taobao.org
   # 构建 VUE 项目
   RUN npm run build
   # 在容器启动时执行复制操作，将 dist 文件夹中的所有内容复制到 $WORKDIR/web 文件夹中
   CMD ["sh", "-c", "cp -r dist/. web && find ./ -mindepth 1 -maxdepth 1 \\( -type f -o -type d \\) -not -name 'dist' -not -name 'web' -exec rm -rf {} + && tail -f /dev/null"]
   

3. 构建前端镜像

   docker build -t 127.0.0.1:8000/rambo-tech/web:V1.0.0.1 .
   

4. 启动前端容器

   docker run -d --name web -v /opt/modules/nginx/html/web:/opt/html/web 127.0.0.1:8000/rambo-tech/web:V1.0.0.1
   

   P.S
   此场景和方案一只是构建镜像的环节不一样，也适用于通过外部 Nginx 作为反向代理，且每次更新的前端资源都以镜像中的资源为准（每次重启容器，宿主机的资源都会被容器中的资源所覆盖），只需要将容器中的资源挂载到宿主机 Nginx 的静态资源路径即可。请根据自己的需求调整 CMD 或者挂载地址。

方案三：通过构建镜像启动前端服务的源码方式启动前端容器

1. 资源目录树形结构

   -rw-r--r-- 1  501 games     73 Oct 23 13:45 babel.config.js
   -rw-r--r-- 1 root root     293 Mar 11 17:58 Dockerfile
   -rw-r--r-- 1  501 games    822 Oct 23 13:45 largePic.html
   -rw-r--r-- 1  501 games   1169 Oct 23 13:45 package.json
   -rw-r--r-- 1  501 games 505074 Oct 23 13:45 package-lock.json
   drwxr-xr-x 2  501 games     83 Mar  7 10:51 public
   -rw-r--r-- 1  501 games    363 Oct 23 13:45 README.md
   drwxr-xr-x 7  501 games    127 Mar  7 10:51 src
   -rw-r--r-- 1  501 games   1833 Oct 23 13:45 vue.config.js
   -rw-r--r-- 1  501 games 388829 Oct 23 13:45 yarn.lock
   

2. Dockerfile 文件内容

   # 基础镜像
   FROM node:12.22.12-alpine3.15
   # 镜像维护
   LABEL maintainer=rambo1203@sina.com
   # 设置工作目录
   WORKDIR /opt/html
   # 复制项目文件到工作目录
   COPY . . 
   # 复制项目文件到备份目录
   COPY . ../code
   # 安装项目依赖并设置容器启动命令
   CMD ["sh", "-c", "cp -r ../code/. . && npm install --registry=http://registry.npm.taobao.org && npm run serve"]
   

3. 构建前端镜像

   docker build -t 127.0.0.1:8000/rambo-tech/web:V1.0.0.1 .
   

4. 启动前端容器

   docker run -d -p 8080:9763 --name web 127.0.0.1:8000/rambo-tech/web:V1.0.0.1
   

   P.S
   此方式是直接用项目源码的方式启动 VUE 服务，且每次更新的前端资源都以镜像中的资源为准（每次重启容器，宿主机的资源都会被容器中的资源所覆盖），非必要无需挂载资源到宿主机。请根据自己的需求调整 CMD 或者挂载地址。

方案四：通过反向代理基础镜像构建前端镜像并启动前端容器

1. 资源目录树形结构

   -rw-r--r-- 1 root root    1093 Mar 11 17:47 default.conf
   drwxr-xr-x 6 root root     128 Mar 11 17:53 dist
   -rw-r--r-- 1 root root     293 Mar 11 17:58 Dockerfile
   

2. Dockerfile 文件内容

   # 基础镜像
   FROM nginx:1.24.0
   # 镜像维护
   LABEL maintainer=rambo1203@sina.com
   # 将 dist 文件夹拷贝到 Nginx 的静态资源目录
   COPY dist /usr/share/nginx/html/web
   # 将前端 Nginx 配置覆盖基础镜像的配置文件（最好在启动容器的时候挂载到宿主机由运维维护）
   # COPY default.conf /etc/nginx/conf.d/default.conf
   

3. 构建前端镜像

   docker build -t 127.0.0.1:8000/rambo-tech/web:V1.0.0.1 .
   

4. 启动前端容器

   docker run -d -p 8080:80 --name web 127.0.0.1:8000/rambo-tech/web:V1.0.0.1
   

5. 访问地址示例

   http://127.0.0.1:8080/web/index.html
   

   P.S
   该方案是目前市面比较流行的前端容器化方案，该方案的 Nginx 配置文件建议由运维统一管理，以免研发的配置版本和生产于运维的存在冲突的情况。减少非必要的沟通成本。

   其它运维命令汇总

   # --------------------------------- 删除容器 ---------------------------------
   docker rm -f $(docker ps -a | grep web | awk '{print $1}')
   
   # --------------------------------- 删除镜像 ---------------------------------
   docker rmi $(docker images | grep web | awk '{print $3}')