jenkins+docker+nginx+vue前端项目实现自动部署
借鉴博客：https://www.jianshu.com/p/1d07b986ab2c
借鉴博客：https://blog.csdn.net/ansu2009/article/details/83584796
1、准备一个vue项目代码上传到git仓库
2、jenkins配置node插件：
2,1、jenkins全局配置，选择自动安装node：选择的版本要和本地vue项目运行的版本一至，不然jenkins打包的时候会报错各种问题
3、接下创建一个任务，选择自由风格项目
3.1、创建的任务配置git仓库地址：
3.2、选择构建环境：如果安装好了nodeJs配置，直接选中就可以了
3.3、项目构建配置这里选择执行shell，就是写一些shell脚本命令打包这个vue项目，并运行到docker容器（由于我是把打包好的vue项目放到nginx里面的，所以docker运行的是nginx容器，可以选择其他的：比如tomcat，把打包好的dist丢到tomcat里面，再运行tomcat也是一样的）
npm这段打包vue项目的命令本来是写进dockerRun.sh脚本里的，不知道为什么在脚本里执行没生效，提示找不到npm命令，所以把这段命令拿出来先执行了，再执行脚本中的命令：
node -v npm -v cd /var/lib/jenkins/workspace/vue-project npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver npm install npm run build sh /home/vueProject/nginx/dockerRun.sh
========最后保存，然后去服务器配置一些打包部署的重要配置文件===============================
3.4、/home/vueProject/nginx/ 此目录下会放三个配置文件：default.conf 、 dockerfile 、dockerRun.sh
default.conf 此配置文件是用来配置nginx的
dockerfile 用来生成docker镜像
dockerRun.sh 此脚本里面写构建vue、生成并运行nginx镜像容器的shell命令
3.3.1、default.conf配置文件内容如下：
server {
listen 80;
server_name xx.xx.xx.xx;
location / {
root /home/vueProject/nginx;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
error_page 405 =200 $uri;
}
location /api {
proxy_pass http://xx.xx.xx.xx:8080/jz-project;
proxy_redirect off;
proxy_cookie_path / /api;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3.3.2、dockerfile 配置文件内容如下：
FROM nginx MAINTAINER myname_z RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /home/vueProject/nginx/
3.3.3、dockerRun.sh 脚本命令文件内容如下：
#===================================================================================== #=================================1、定义初始化变量====================================== #===================================================================================== #操作/项目路径(Dockerfile存放的路径) #BASE_PATH=/home/vueProject/nginx #项目名称 SERVER_NAME=nginx-vue-project #获此项目的取容器id CID=$(docker ps -a | grep -w "$SERVER_NAME" | awk '{print $1}') #获取此项目的镜像id IID=$(docker images | grep -w "$SERVER_NAME" | awk '{print $3}') #===================================================================================== #===================================================================================== # 将build好的vue项目源文件目录移动到Dockerfile文件所在目录 function transfer(){ echo "=========================>>>>>使用npm命令打包vue项目====="
cd dist
echo "=========================>>>>>>>移动打包好的dist到Dockerfile所在目录==========" cp -r /var/lib/jenkins/workspace/vue-project/dist /home/vueProject/nginx echo "=========================>>>>>>>迁移完成Success" } #===================================================================================== #==================================3、构建最新镜像======================================= #===================================================================================== # 构建docker镜像 function build(){ #无论镜像存在与否，都停止原容器服务，并移除原容器服务 echo "=========================>>>>>>>停止$SERVER_NAME容器，CID=$CID" docker stop $CID echo "=========================>>>>>>>移除$SERVER_NAME容器，CID=$CID" docker rm $CID #无论如何，都去构建新的镜像 #构建新的镜像之前，移除旧的镜像 if [ -n "$IID" ]; then echo "=========================>>>>>>>存在$SERVER_NAME镜像，IID=$IID" echo "=========================>>>>>>>移除老的$SERVER_NAME镜像，IID=$IID" docker rmi $IID echo "=========================>>>>>>>构建新的$SERVER_NAME镜像，开始---->"
cd /home/vueProject/nginx
docker build -t $SERVER_NAME .
echo "=========================>>>>>>>构建新的$SERVER_NAME镜像，完成---->" else echo "=========================>>>>>>>不存在$SERVER_NAME镜像，构建新的镜像，开始--->" cd /home/vueProject/nginx docker build -t $SERVER_NAME . echo "=========================>>>>>>>构建新的$SERVER_NAME镜像，结束--->" fi } #===================================================================================== #==============================4、最后运行docker容器，启动服务=============================== #===================================================================================== # 最后运行最新容器，启动服务 function run(){ transfer build docker run -d --restart=always --name $SERVER_NAME -p 80:80 $SERVER_NAME } #入口 run
4、最后所有准备工作完成，点击立即构建，查看jenkins控制台日志输出： 成功如下
4.1、在服务器上查看此项目在docker镜像的容器是否运行成功： 成功如下：
4.2、在浏览器直接访问vue项目所在服务器ip地址，成功如下：
...
