You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ci-cd/md/持续集成-交付-发布-VUE.md

5.2 KiB

持续集成-交付-发布-VUE


作者:行癫(盗版必究)

Jenkins服务器部署Node.js

1.下载Node.js安装包

https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.gz

2.安装

[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.设置环境变量

[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.验证

[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

注意安装完成后重启Jenkins使其生效

2.系统管理配置Node

image-20230321200438675

3.新建自由风格项目

image-20230321200557255

4.配置项目

General

image-20230321200725408

image-20230321200758057

源码管理

注意需要提前将项目上传到gitlab/github仓库

image-20230321200912765

构建环境

image-20230321201218621

构建

image-20230322102736415

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

脚本

[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

image-20230322182556301

2.jenkin配置

安装webhook插件

项目开启webhook

image-20230322182720390

3.Gitlab关联jenkins的url

image-20230322182808998

image-20230322182903014

image-20230322182920485

image-20230322182938211

5.总结

修改项目源码,提交后,会自动进行项目构建和发布