192 lines
5.0 KiB
Markdown
192 lines
5.0 KiB
Markdown
<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插件
|
||
|
||
|
||
|
||
注意：安装完成后重启Jenkins使其生效
|
||
|
||
#### 2.系统管理配置Node
|
||
|
||
|
||
|
||
#### 3.新建自由风格项目
|
||
|
||
|
||
|
||
#### 4.配置项目
|
||
|
||
General
|
||
|
||
|
||
|
||
|
||
|
||
源码管理
|
||
|
||
注意：需要提前将项目上传到gitlab/github仓库
|
||
|
||
|
||
|
||
构建环境
|
||
|
||
|
||
|
||
构建
|
||
|
||
|
||
|
||
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
|
||
|
||
|
||
|
||
脚本
|
||
|
||
```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配置
|
||
|
||
开启出站请求
|
||
|
||
|
||
|
||
|
||
|
||
#### 2.jenkin配置
|
||
|
||
安装webhook插件（略）
|
||
|
||
项目开启webhook
|
||
|
||
|
||
|
||
#### 3.Gitlab关联jenkins的url
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
5.总结
|
||
|
||
修改项目源码，提交后，会自动进行项目构建和发布
|