构建镜像

# 拉取镜像
docker pull node:14.19.0-alpine

# 进入容器后配置国内源
docker run -it --name node node /bin/sh
npm config set registry https://registry.npm.taobao.org

# 回到宿主机，打包成镜像
docker commit node node:14

容器内编译打包Vue项目

整个编译打包我都在Jenkins内完成，最主要是下面挂载源码和依赖，在容器内运行打包命令。

• –rm：容器编译完就不留着了
• -v：挂载源码和项目的npm依赖到容器内
• npm install：重新拉取一下依赖
• build:rycemweb_prod：这个是自定义的一个npm打包命令

docker run \
--rm \
-v /opt/jenkins/data/workspace/rycemweb_prod:/front \
-v /macc/rycem/front/node_modules:/front/node_modules \
--name node_vue_package \
node:14 \
sh -c "cd /front && npm install && npm run build:rycemweb_prod"

最后/opt/jenkins/data/workspace/rycemweb_prod会存在dist文件夹，是打包后的前端文件，配个Nginx反向代理过来，网页就能访问了