Docker结合Jenkins部署vue项目
接上篇
Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动
Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx
安装nginx
这里安装过程不再赘述，如果不清楚可以参考下面这篇文章
https://blog.csdn.net/qq_42815754/article/details/82980326
配置Jenkins
具体填Jenkins配置可以参考我的上一篇文章，这里需要安装一个额外的插件
dockerfile
在前端项目的根目录下添加dockerfile文件，内容如下：
# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER yourname
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
这一步的原理：
创建镜像后，把构建之后的dist文件夹下的静态文件都复制到
/usr/share/nginx/html/这个目录里，这个目录就是当前镜像下nginx配置的静态资源目录，就等于把nginx原本默认的index.html（就是那个welcome to nginx）给换成我们构建完的前端页面
执行的shell
#这个是为了到你的前端项目文件夹下，具体路径要看你自己的项目和服务器配置
cd /var/lib/jenkins/workspace/chatmovie_web/chatmovieweb
#这些npm命令前最好确保可以连接到，或者现在服务器上跑一遍
npm install
# 下载 vue-cli
npm install -g @vue/cli
# 构建项目，生成dist目录
npm run build
# 清除缓存并构建镜像，这里--no-cache很重要，我之前不加这个参数有时候会造成重新构架的镜像和原来的相同，chatmovieweb是镜像名
docker build -t chatmovieweb --no-cache .
# 启动容器，把服务器的8888端口映射到项目的80端口，项目的80端口也就是容器内运行的nginx入口，刚才已经说明过了
docker run -p 8888:80 -d --name chatmovieweb chatmovieweb
在Jenkins中填入上述命令
成功
注意
有时候npm国外镜像会出各种问题，建议更换为淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完查看版本
cnpm -v
可以配置即使是npm也同样使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
检测是否成功
npm config get registry
npm info express
