jenkins打包自动化发布前端项目

1.前部分jenkins配置参考：jenkins打包发布前端项目_Apex Predator的博客-CSDN博客

2.构建步骤更改为以下内容

npm install     #配置编译环境
npm run build   #编译前端项目
cd dist      #进入编译后的dist目录
rm -rf *.tar.gz   #将之前的压缩文件删除
tar -zcvf $tag.tar.gz ./*   #将dist目录下的所有文件打包压缩
ssh root@10.1.60.80 sh /etc/jb/1.sh    #将112web服务器的流量切掉，不让客户请求过来
if [ $? == 0 ]; then      #判断是否切流量成功
   scp *.tar.gz root@10.1.60.112:/etc/web   #将压缩文件传送到112 web服务器上
   ssh root@10.1.60.112 sh /etc/web/delete.sh  #执行部署脚本，将web文件部署到112服务器上
else
   echo "请检查nginx配置文件"
   exit 2   #若是切流量不成功则退出，退出状态为2，退出后下面的命令也不会在执行
fi
ssh root@10.1.60.80 sh /etc/jb/2.sh  #将114web服务器的流量切掉，不让客户请求过来，恢复112web服务器的请求流量
if [ $? == 0 ]; then    #判断是否切流量成功
   scp *.tar.gz root@10.1.60.114:/etc/web
   ssh root@10.1.60.114 sh /etc/web/delete.sh
else
   echo "请检查nginx配置文件"
   exit 2
fi
ssh root@10.1.60.80 sh /etc/jb/3.sh    #恢复114web服务器的流量请求
if [ $? == 0 ]; then
   echo "发布完成"
else
   echo "请检查nginx配置文件"
fi

3.web服务器脚本配置 

delete.sh

#!/bin/bash
rm -rf /etc/web/webproject/*  #将老的web文件全部删除
tar -zxvf /etc/web/*.tar.gz -C /etc/web/webproject/  #将新的web文件解压后，放到web文件目录下
mv /etc/web/*.tar.gz /etc/web/backup/   #将此版本的web文件压缩包备份

给脚本增加执行权限

chmod  +x /etc/web/delete.sh

4.nginx服务器脚本配置

1.sh

#!/bin/bash
sed -i '/10.1.60.112:8085/s/^/#/g' /etc/nginx/conf.d/web.conf #将112web服务器的流量切掉
nginx -s reload #优雅的重载nginx配置，可以在不影响客户访问的情况下将流量平滑的切换
if [ $? == 0 ]; then #判断是否执行成功
   exit 0
else
   exit 2
fi

2.sh

sed -i '/10.1.60.112:8085/s/.//' /etc/nginx/conf.d/web.conf #恢复112web服务器的流量请求
sed -i '/10.1.60.114:8085/s/^/#/g' /etc/nginx/conf.d/web.conf  #切掉114web服务器的流量请求
nginx -s reload  #优雅的重载nginx配置
if [ $? == 0 ]; then
   exit 0
else
   exit 2
fi

3.sh

#!/bin/bash
sed -i '/10.1.60.114:8085/s/.//' /etc/nginx/conf.d/web.conf #恢复114 web服务器的流量请求
nginx -s reload
if [ $? == 0 ]; then
   exit 0
else
   exit 2
fi

给脚本增加执行权限

chmod +x /etc/jb/1.sh

chmod +x /etc/jb/2.sh

chmod +x /etc/jb/3.sh

5.nginx配置文件部分配置

112web服务器

    server {
        listen 8085;   #配置监听8085端口
        server_name 10.1.60.112;  #配置server为自身ip地址
        location / {
             root /etc/web/webproject;  #配置代理目录为webwenj目录
             index index.html;    #配置html文件
        }
        location ~* \.(ico|gif|jpg|jpeg|png|bmp|swf|flv|mp4)$ {  #此处规则为不区分大小写匹配结尾为ico、gif等文件则调用此规则，$为匹配末尾
             root /etc/web/webproject;   #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 0s;  #此处为配置缓存时间
        }
        location ~* \.(css|js|eot|svg|ttf|woff|woff2|otf)$ {  #此处规则为不区分大小写匹配结尾为css、js等文件则调用此规则
             root /etc/web/webproject;   #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 7d;
        }
        location ~* \.(htm|html)$ {   #此处规则为不区分大小写匹配结尾为htm、html文件则调用此规则
             root /etc/web/webproject;  #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 0s;
        }
    }

114web服务器

    server {
        listen 8085;   #配置监听8085端口
        server_name 10.1.60.114;  #配置server为自身ip地址
        location / {
             root /etc/web/webproject;  #配置代理目录为webwenj目录
             index index.html;    #配置html文件
        }
        location ~* \.(ico|gif|jpg|jpeg|png|bmp|swf|flv|mp4)$ {  #此处规则为不区分大小写匹配结尾为ico、gif等文件则调用此规则，$为匹配末尾
             root /etc/web/webproject;   #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 0s;  #此处为配置缓存时间
        }
        location ~* \.(css|js|eot|svg|ttf|woff|woff2|otf)$ {  #此处规则为不区分大小写匹配结尾为css、js等文件则调用此规则
             root /etc/web/webproject;   #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 7d;
        }
        location ~* \.(htm|html)$ {   #此处规则为不区分大小写匹配结尾为htm、html文件则调用此规则
             root /etc/web/webproject;  #配置代理目录为web文件目录,若是匹配到结尾为以上设置的结尾时，会代理到此目录
             expires 0s;
        }
    }

80nginx服务器

upstream demo {   #配置负载均衡
       server 10.1.60.112:8085;
       server 10.1.60.114:8085;
}
server {
     listen 8085;  #配置监听端口
     server_name 10.1.60.80;  #配置server服务器
     location / {
         proxy_pass http://demo;  #代理转发到上面配置的负载均衡服务器上
     }
}

6.关于nginx项配置的解释

web文件目录的内容展示

 由上图可以以看到html页面放在了web文件根目录下，关于图片的放在了img目录里面，css的文件则放在css目录里面，js的文件放在了js目录里，一般情况下，html页面都会做好了链接，即使不做css、js、img文件的nginx代理，在内网环境中访问index.html这个页面能看见这个页面里展示的图片、css元素这些，就是因为在index.html页面做好了完整的链接，不过仅仅是在webproject这个目录里的链接，并不是完整的包含/etc/web/webproject完整目录连接，直接看下图展示

 但是如果要发布到外网上，就需要通过配置nginx的代理去把关于css、js、img文件代理到外网上，可以看到上面112、114web服务器的nginx配置是把/etc/web/webproject此目录代理了出去，当客户访问此目录时，所有的静态文件都会通过nginx代理到/etc/web/webproject此目录，就相当于把路径拼接成了一个完整的访问路径