diandian
/
ci-cd
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 'md/持续集成-交付-发布-VUE.md'

Browse Source
main
diandian 8 months ago
parent 3a7cc21f16
commit 777b46ea8e
1 changed files with 191 additions and 191 deletions
Show Stats Download Patch File Download Diff File

382
md/持续集成-交付-发布-VUE.md
Unescape View File

@ -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.总结
​ 修改项目源码，提交后，会自动进行项目构建和发布

Write Preview
Loading…
Cancel
Save