From 777b46ea8e47cea2272dfc9835a1ee791d4222f0 Mon Sep 17 00:00:00 2001
From: diandian <xingdianvip@gmail.com>
Date: Wed, 31 Jan 2024 14:47:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20'md/=E6=8C=81=E7=BB=AD?=
 =?UTF-8?q?=E9=9B=86=E6=88=90-=E4=BA=A4=E4=BB=98-=E5=8F=91=E5=B8=83-VUE.md?=
 =?UTF-8?q?'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 md/持续集成-交付-发布-VUE.md | 382 +++++++++++++++++------------------
 1 file changed, 191 insertions(+), 191 deletions(-)

diff --git a/md/持续集成-交付-发布-VUE.md b/md/持续集成-交付-发布-VUE.md
index 1a9dd93..66c8e6a 100644
--- a/md/持续集成-交付-发布-VUE.md
+++ b/md/持续集成-交付-发布-VUE.md
@@ -1,191 +1,191 @@
-<h1><center>持续集成-交付-发布-VUE</center></h1>
-
-------
-
-作者：行癫（盗版必究）
-
-## 一：Jenkins服务器部署Node.js
-
-#### 1.下载Node.js安装包
-
-```shell
-https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.gz
-```
-
-#### 2.安装
-
-```shell
-[root@jenkins ~]# tar xf node-v14.19.3-linux-x64.tar.gz  -C /usr/local/
-[root@jenkins ~]# mv node-v14.19.3-linux-x64/ node
-[root@jenkins ~]# yum -y install gcc-c++ make cmake
-```
-
-#### 3.设置环境变量
-
-```shell
-[root@jenkins ~]# cat /etc/profile
-JAVA_HOME=/usr/local/java
-MAVEN_HOME=/usr/local/maven
-NODE_HOME=/usr/local/node
-PATH=$JAVA_HOME/bin:$PATH
-PATH=$MAVEN_HOME/bin:$PATH
-PATH=$NODE_HOME/bin:$PATH
-export JAVA_HOME MAVEN_HOME  NODE_HOME PATH
-```
-
-#### 4.验证
-
-```shell
-[root@jenkins local]# npm version
-{
-  npm: '6.14.17',
-  ares: '1.18.1',
-  brotli: '1.0.9',
-  cldr: '40.0',
-  icu: '70.1',
-  llhttp: '2.1.4',
-  modules: '83',
-  napi: '8',
-  nghttp2: '1.42.0',
-  node: '14.19.3',
-  openssl: '1.1.1o',
-  tz: '2021a3',
-  unicode: '14.0',
-  uv: '1.42.0',
-  v8: '8.4.371.23-node.87',
-  zlib: '1.2.11'
-}
-```
-
-## 二：Jenkins配置Node.js
-
-#### 1.安装node插件
-
-![image-20230321200315169](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200315169.png)
-
-注意：安装完成后重启Jenkins使其生效
-
-#### 2.系统管理配置Node
-
-![image-20230321200438675](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200438675.png)
-
-#### 3.新建自由风格项目
-
-![image-20230321200557255](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200557255.png)
-
-#### 4.配置项目
-
-General
-
-![image-20230321200725408](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200725408.png)
-
-![image-20230321200758057](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200758057.png)
-
-源码管理
-
-​		注意：需要提前将项目上传到gitlab/github仓库
-
-![image-20230321200912765](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200912765.png)
-
-构建环境
-
-![image-20230321201218621](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321201218621.png)
-
-构建
-
-![image-20230322102736415](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322102736415.png)
-
-shell内容
-
-```
-cd /root/.jenkins/workspace/vue #进入项目目录;这里是war包安装
-npm config set registry https://registry.npm.taobao.org #npm源设置为淘宝源
-npm config get registry #检测npm是否切换成功
-#npm i --unsafe-perm
-#npm install -g npm
-#npm i node-sass -D
-npm update
-#npm install yarn
-npm run-script build #打包
-rm -rf dist.tar.gz #删除上次打包生成的压缩文件
-tar -zcvf dist.tar.gz dist/ #打包
-```
-
-注意：因为node环境构建出现问题的可能性较大，#号部分根据构建报错逐渐打开
-
-构建后：Send build artifacts over SSH
-
-![image-20230322102935384](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322102935384.png)
-
-脚本
-
-```shell
-[root@localhost opt]# cat jenkins-nginx.sh
-#!/usr/bin/bash
-#该项目是构建nginx的vue项目,并实现持续构建
-
-#使用过程中注意全局变量的修改
-web_path="/dist" #定义网站发布目录变量(可以修改)
-job_path="/root/upload"
-files_dir=dist  #构建后的目录名字
-files=dist.tar.gz   #构建后压缩包的名字
-UPDATE="/update/`date +%F-%T`/"
-BACKUP="/backup/`date +%F-%T`/"
-
-mkdir -p $UPDATE
-mkdir -p $BACKUP
-
-#将项目移动到更新目录下
-
-mv ${job_path}/${files} $UPDATE
-
-
-if [ -d /dist ];then
-
-        tar cvf $BACKUP/`date +%F-%T`-$files $web_path
-        if [ $? -ne 0 ];then
-                echo "打包失败"
-                exit 1
-        else
-                rm -rf $web_path
-
-                tar xf $UPDATE/$files -C /
-                chmod 777 /dist/ -R
-        fi
-else
-        tar xf $UPDATE/$files -C /
-        chmod 777 /dist/ -R
-fi
-```
-
-## 三：WebHook持续构建发布
-
-#### 1.Gitlab配置
-
-开启出站请求
-
-![image-20230322182537947](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182537947.png)
-
-![image-20230322182556301](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182556301.png)
-
-#### 2.jenkin配置
-
-安装webhook插件（略）
-
-项目开启webhook
-
-![image-20230322182720390](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182720390.png)
-
-#### 3.Gitlab关联jenkins的url
-
-![image-20230322182808998](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182808998.png)
-
-![image-20230322182903014](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182903014.png)
-
-![image-20230322182920485](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182920485.png)
-
-![image-20230322182938211](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182938211.png)
-
-5.总结
-
-​		修改项目源码，提交后，会自动进行项目构建和发布
+<h1><center>持续集成-交付-发布-VUE</center></h1>
+
+------
+
+作者：行癫（盗版必究）
+
+## 一：Jenkins服务器部署Node.js
+
+#### 1.下载Node.js安装包
+
+```shell
+https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.gz
+```
+
+#### 2.安装
+
+```shell
+[root@jenkins ~]# tar xf node-v14.19.3-linux-x64.tar.gz  -C /usr/local/
+[root@jenkins ~]# mv node-v14.19.3-linux-x64/ node
+[root@jenkins ~]# yum -y install gcc-c++ make cmake
+```
+
+#### 3.设置环境变量
+
+```shell
+[root@jenkins ~]# cat /etc/profile
+JAVA_HOME=/usr/local/java
+MAVEN_HOME=/usr/local/maven
+NODE_HOME=/usr/local/node
+PATH=$JAVA_HOME/bin:$PATH
+PATH=$MAVEN_HOME/bin:$PATH
+PATH=$NODE_HOME/bin:$PATH
+export JAVA_HOME MAVEN_HOME  NODE_HOME PATH
+```
+
+#### 4.验证
+
+```shell
+[root@jenkins local]# npm version
+{
+  npm: '6.14.17',
+  ares: '1.18.1',
+  brotli: '1.0.9',
+  cldr: '40.0',
+  icu: '70.1',
+  llhttp: '2.1.4',
+  modules: '83',
+  napi: '8',
+  nghttp2: '1.42.0',
+  node: '14.19.3',
+  openssl: '1.1.1o',
+  tz: '2021a3',
+  unicode: '14.0',
+  uv: '1.42.0',
+  v8: '8.4.371.23-node.87',
+  zlib: '1.2.11'
+}
+```
+
+## 二：Jenkins配置Node.js
+
+#### 1.安装node插件
+
+![image-20230321200315169](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200315169.png)
+
+注意：安装完成后重启Jenkins使其生效
+
+#### 2.系统管理配置Node
+
+![image-20230321200438675](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200438675.png)
+
+#### 3.新建自由风格项目
+
+![image-20230321200557255](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200557255.png)
+
+#### 4.配置项目
+
+General
+
+![image-20230321200725408](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200725408.png)
+
+![image-20230321200758057](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200758057.png)
+
+源码管理
+
+​		注意：需要提前将项目上传到gitlab/github仓库
+
+![image-20230321200912765](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321200912765.png)
+
+构建环境
+
+![image-20230321201218621](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230321201218621.png)
+
+构建
+
+![image-20230322102736415](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322102736415.png)
+
+shell内容
+
+```
+cd /root/.jenkins/workspace/vue #进入项目目录;这里是war包安装
+npm config set registry https://registry.npm.taobao.org #npm源设置为淘宝源
+npm config get registry #检测npm是否切换成功
+#npm i --unsafe-perm
+#npm install -g npm
+#npm i node-sass -D
+npm update
+#npm install yarn
+npm run-script build #打包
+rm -rf dist.tar.gz #删除上次打包生成的压缩文件
+tar -zcvf dist.tar.gz dist/ #打包
+```
+
+注意：因为node环境构建出现问题的可能性较大，#号部分根据构建报错逐渐打开
+
+构建后：Send build artifacts over SSH
+
+![image-20230322102935384](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322102935384.png)
+
+脚本
+
+```shell
+[root@localhost opt]# cat jenkins-nginx.sh
+#!/usr/bin/bash
+#该项目是构建nginx的vue项目,并实现持续构建
+
+#使用过程中注意全局变量的修改
+web_path="/dist" #定义网站发布目录变量(可以修改)
+job_path="/root/upload"
+files_dir=dist  #构建后的目录名字
+files=dist.tar.gz   #构建后压缩包的名字
+UPDATE="/update/`date +%F-%T`/"
+BACKUP="/backup/`date +%F-%T`/"
+
+mkdir -p $UPDATE
+mkdir -p $BACKUP
+mkdir -p $job_path
+#将项目移动到更新目录下
+
+mv ${job_path}/${files} $UPDATE
+
+
+if [ -d /dist ];then
+
+        tar cvf $BACKUP/`date +%F-%T`-$files $web_path
+        if [ $? -ne 0 ];then
+                echo "打包失败"
+                exit 1
+        else
+                rm -rf $web_path
+
+                tar xf $UPDATE/$files -C /
+                chmod 777 /dist/ -R
+        fi
+else
+        tar xf $UPDATE/$files -C /
+        chmod 777 /dist/ -R
+fi
+```
+
+## 三：WebHook持续构建发布
+
+#### 1.Gitlab配置
+
+开启出站请求
+
+![image-20230322182537947](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182537947.png)
+
+![image-20230322182556301](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182556301.png)
+
+#### 2.jenkin配置
+
+安装webhook插件（略）
+
+项目开启webhook
+
+![image-20230322182720390](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182720390.png)
+
+#### 3.Gitlab关联jenkins的url
+
+![image-20230322182808998](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182808998.png)
+
+![image-20230322182903014](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182903014.png)
+
+![image-20230322182920485](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182920485.png)
+
+![image-20230322182938211](https://xingdian-image.oss-cn-beijing.aliyuncs.com/xingdian-image/image-20230322182938211.png)
+
+5.总结
+
+​		修改项目源码，提交后，会自动进行项目构建和发布