Jenkins实践-自动构建并发布前端项目

1.安装插件

1.1 安装NodeJS插件

点击系统管理,然后点击插件管理,在可选插件里面搜索NodeJS插件,然后安装

1.2 安装连接SSH的插件

Publish Over SSH用于连接远程服务器

1.3 安装把应用发布到远程服务器的插件

**Deploy to container **插件用于把打包的应用发布到远程服务

2. 配置git和NodeJS环境

2.1 安装配置git

#安装git
root@server:~# apt install git 
root@server:~# whereis git 

#查看git的执行文件位置, 默认是在 /usr/bin/git
whereis git
git: /usr/bin/git /usr/share/man/man1/git.1.gz

2.2 安装配置NodeJS

NodeJs 下载地址：https://nodejs.org/dist/

cd /apps
tar -zxvf node-v16.18.1-linux-x64.tar.gz
#创建软连接
ln -sv node-v16.18.1-linux-x64/  /usr/local/node

填写本地node路径

3. 新建项目部署信息

3.1 源码管理

填写项目仓库地址

配置免密公钥认证

3.2 构建触发器

定时每五分钟检查一次代码仓库有没有新的提交，如果有新的提交就自动构建项目并发布到目标前端服务器。

3.3 构建环境

3.4 执行Shell命令

npm config get registry 
npm install --legacy-peer-deps
npm run docs:build
cd src/.vuepress/dist
export DIST_NAME="dist-v"$(date +"%Y%m%d%H%M%S")""
tar -zcf $WORKSPACE/deployment/$DIST_NAME.tar.gz ./*
\cp $WORKSPACE/deployment/$DIST_NAME.tar.gz $WORKSPACE/deployment/dist-latest.tar.gz
rm -rf $WORKSPACE/src/.vuepress/dist

3.5 构建后操作

用到SSH Publishers 插件，将项目代码文件推送到目标主机。

SSH Publishers 配置

系统管理—> 系统配置 —> Publish over SSH

Passphrase: 公钥密码

Name:目标服务器名称

Hostname：目标服务器IP地址

Username: 目标主机用户名

Remote Directory：目标主机存放目录

4.测试项目自动发布

4.1 测试手动构建发布

立即构建

控制台输出查看任务进度

构建成功

前端服务器目录下验证

4.2 测试自动构建发布

代码更新后自动构建并发布