linux中使用jenkins自动部署前端工程-Toy模板网

这篇具有很好参考价值的文章主要介绍了linux中使用jenkins自动部署前端工程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、去年在自己的服务器上安装了jenkins，说用来自己研究一下jenkins自动化部署前端项目，jenkins安装好了，可是一直没管，最近终于研究了一下使用jenkins自动化部署，以此记录下来。

一、jenkins的安装

由于安装已经过去大半年时间了，具体步骤没有记录，可以到网上自行百度。

大致流程：

1、安装jdk

2、下载jenkins包并安装

3、修改jenkins端口（我用的8888端口）

4、防火墙开启对应端口（我的开启8888端口）

5、启动jenkins：service jenkins start

注：jenkins安装好后的默认账号是admin，默认密码在 /var/jenkins_home/secrets/initialAdminPassword 文件中，重置密码请自行百度

linux中使用jenkins自动部署前端工程

二、配置jenkins权限

安装完Jenkins后，还需要再配置一下Jenkins的root权限（提升执行shell命令的权限）

sudo vim /etc/sysconfig/jenkins
编辑状态中
JENKINS_USER="root"

修改 Jenkins 相关文件夹用户权限

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins

重启jenkins服务

service jenkins restart

文章来源地址https://www.toymoban.com/news/detail-450576.html

三、jenkins安装插件

点击Dashboard 旁边的向下的黑色箭头（截图里看不到）-系统管理-插件管理

linux中使用jenkins自动部署前端工程

进入到该页面后，点击可选插件，可以搜索并安装插件

需要安装如下插件：

NodeJS Plugin（nodejs环境）

Publish over SSH （用于执行构建后的操作）

Gitee Plugin（由于我用的是gitee管理代码，所以需要安装）

四、配置信息

点击左上角Dashborad -> 系统管理 -> 全局工具配置

linux中使用jenkins自动部署前端工程

4.1、配置git命令

linux中使用jenkins自动部署前端工程

4.2、配置node信息

这里需要选择和自己本地node一致的版本

linux中使用jenkins自动部署前端工程

4.3、配置gitee

linux中使用jenkins自动部署前端工程

证书令牌需要提前在gitee里配置，登录gitee账户，进入设置 -> 私人令牌页面，点击生成新令牌

linux中使用jenkins自动部署前端工程

4.4、配置Publish over SSH

1、在自己的服务器上生产ssh key

ssh-keygen -t rsa -C "xxxx@xxx.com"

2、查看生成的公钥

cat ~/.ssh/id_rsa.pub

3、复制公钥到下图的位置

linux中使用jenkins自动部署前端工程

五、新建任务

5.1、添加任务和选择任务类型

点击左侧的新建任务，打开如下页面，输入一个任务名称，选择“构建一个自由风格的软件项目”，点击确定

linux中使用jenkins自动部署前端工程

5.2、配置源码管理

linux中使用jenkins自动部署前端工程

5.3、配置构建触发器

linux中使用jenkins自动部署前端工程

在gitee里对应的仓库里点击左侧WebHooks，添加webhook，配置url，并在webhook密码这里填写上一步在jenkins里生成的密码，保存

linux中使用jenkins自动部署前端工程

5.4、配置构建环境

linux中使用jenkins自动部署前端工程

5.5、配置构建

增加构建步骤选择执行shell，并编写shell脚本：

linux中使用jenkins自动部署前端工程

继续点击：增加构建步骤 -> Send files or execute commands over SSH

linux中使用jenkins自动部署前端工程执行sheel脚本，其实sheel脚本里的命令也就是先把nginx下的对应前端工程代码先进行备份，然后使用npm命令进行打包，生成dist目录，最后再把dist目录下的所有文件复制到nginx下对应的前端工程目录下，这样也就完成了前端工程部署。nginx下替换完前端工程代码后，不用重启nginx。