先说Jenkins,安装就不说了,网上一大推,这里贴一个地址:https://jenkins.io/zh/

安装成功后首页面类似这样的:

升级gitlab中的nginx gitlab nginx配置_nginx


开始新建一个jenkins任务:输入一个任务名称,前端我们统一都是XXX-WEB

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_02


新建项目后点击确认进入项目配置界面:

这里选择丢弃旧有项目

升级gitlab中的nginx gitlab nginx配置_gitlab_03


接着下一步源码管理:

公司集成的是gitlab,这里就选择用gitlab地址

Credentials这里的配置需要注意

如果没有可添加的需要点击添加新建一个

升级gitlab中的nginx gitlab nginx配置_gitlab_04


出现异常就是Credentials添加不正确,主要要使用私钥

升级gitlab中的nginx gitlab nginx配置_nginx_05


异常会出现如下:

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_06


正确配置应该如下

升级gitlab中的nginx gitlab nginx配置_gitlab_07


接着往下走:

构建触发器和构建环境都可以不选择

升级gitlab中的nginx gitlab nginx配置_jekins_08


构建这里选择执行shell:

升级gitlab中的nginx gitlab nginx配置_nginx_09


shell执行的脚本文件如下:

这里先插入代码在截图:

#!/bin/bash
export BUILD_ID=my-web
//因为构建的任务有点多,名字稍加区分,这里是取的是jenkins和nginx的路径,后面会讲解nginx的配置
vue_path2=/root/.jenkins/workspace/my-web/dist/*
nginx_path2=/usr/share/nginx/html/dist/my-web
//以下内容不用修改
echo "install vue project"
npm install
npm run build

echo "stop nginx" 
service nginx stop

echo "Remove vue file" 
rm -rf ${nginx_path2}/*

echo "deploy vue project" 
cp -rf ${vue_path2} ${nginx_path2}

echo "restart nginx" 
service nginx restart

升级gitlab中的nginx gitlab nginx配置_gitlab_10


编辑完后保存 ,然后点击构建

升级gitlab中的nginx gitlab nginx配置_jekins_11


我们在控制台可以看到:

升级gitlab中的nginx gitlab nginx配置_自动化部署_12


我们在jenkins路径上能看到已经有这个目录了

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_13


我们这里是因为这下面的目录只能手动构建,我们取报错的路径取看看 我们看到指定的路径里面没有my-web这个目录,我们手动新建一个

升级gitlab中的nginx gitlab nginx配置_nginx_14


mkdir my-web

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_15


我们看到目录添加成功了,然后里面的文件是空的我们在重新构建一下my-web的任务

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_16


我们看到执行成功了 我们再看下nginx下的目录有么有文件

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_17


我们可以到文件已经有了

升级gitlab中的nginx gitlab nginx配置_gitlab_18


接下来就是nginx的配置了,进入nginx代理配置修改问题

vim /etc/nginx/conf.d/default.conf
server {
    listen       7954;//这里是监听的端口设置
    server_name  172.30.251.16;
# Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

        location / {
                root /usr/share/nginx/html/dist/dtgd_template;//这里是我们nginx里存放的地址
                index  index.html index.htm;//不用修改
                try_files $uri $uri/ /index.html;//不用修改
        }
        //因为我们选择的是微服务架构,会有很多个接口服务,这里是来做接口代理的请求遇到keyguard就把请求转发到代理的路径
  		location  /keyguard {
                     proxy_pass http://172.30.251.16:2001/keyguard/v1;
                        }
  	    location  /iwms {
                     proxy_pass http://172.30.251.16:2002/iwms/v1;
                        }
        location  /scc {
                     proxy_pass http://172.30.251.16:2003/scc/v1;
                        }

}

我的接口配置:

export function selectrole(query) {//查询角色列表
  return request({
    url: '/keyguard/roles',
    method: 'get',
    params: query
  })
}

配置完成后保存退出 :wq,重启nginx服务service nginx restart

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_19


我们直接访问端口172.30.251.16:7954

升级gitlab中的nginx gitlab nginx配置_升级gitlab中的nginx_20


OK,这里就全部完成了,

升级gitlab中的nginx gitlab nginx配置_自动化部署_21