使用docker容器来构建前端项目过程
作者：linlongdeng
文章介绍了如何使用Docker容器来解决前端项目打包问题,包括构建镜像、设置环境变量、加速构建过程以及如何将node_modules直接打包到镜像中,通过这种方式,可以确保每次打包的环境一致,避免因环境差异导致的打包失败
先说一下背景，所以作者所在组织的前端项目使用了自定义的前端组件，放在了cnpm搭建的仓库中，由于人员变动，源代码已经丢失，仓库也被销毁，只留了打包好的库，所以每次打包都非常麻烦，再加上使用了node-sass包，对node版本要求特别高，原来打包在jenkins主机上使用npm命令来打包，非常容易出错。
后面我改用使用docker容器，使构建的环境每次都一样，避免了打包失败的情况。现在说一下步骤。
首先构建一个打包镜像
Dockerfile文件如下：
FROM node:11 WORKDIR /user/app RUN npm config set registry https://registry.npmmirror.com RUN npm config set sass_binary_site=https://registry.npmmirror.com/binary.html?path=node-sass/ RUN npm config set cache '/user/app/node_cache' COPY entrypoint.sh . RUN chmod +x entrypoint.sh ENTRYPOINT ["/user/app/entrypoint.sh"]
这里说明一下，这边使用了基础镜像node:11，版本是根据需要来的，你也可以自己修改，npm config set都是设置node的变量，加速构建过程，RUN npm config set cache是设置了node的缓存位置，构建的时候，把这个缓存位置映射到主机上，加快下次构建。
entrypoint.sh是构建的脚本，以贴出来：
#!/bin/bash cd 代码位置 npm install npm run build echo "完成构建" sleep 3
构建一下镜像
docker build -t node-build:11 .
然后运行容器
docker run -v 代码位置:/user/app/代码项目 -v /home/deng/web/node:/user/app/node_cache -it --rm node-build:11
如果这样没问题，就可以在看到构建的程序了
正常打包代码就这样结束 ，但是也可以直接把node_modules包直接打到镜像里头去，这样构建的脚本就不要使用npm install。
让打包镜像的dockerfile就可以修改成这样
FROM node:11 WORKDIR /user/app RUN npm config set registry https://registry.npmmirror.com RUN npm config set sass_binary_site=https://registry.npmmirror.com/binary.html?path=node-sass/ RUN npm config set cache '/user/app/node_cache' ADD node_modules.tar.gz /user/app COPY entrypoint.sh . RUN chmod +x entrypoint.sh ENTRYPOINT ["/user/app/entrypoint.sh"]
注意ADD node_modules.tar.gz /user/app，这个命令就是把node_modules压缩包放到容器目录中去，ADD命令会自动解压。
entrypoint.sh改成这样
#!/bin/bash mv node_modules ./代码位置/node_modules cd 代码位置 npm run build echo "完成构建" sleep 3
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。