Jenkins实现自动化部署React项目

2023年 9月 21日 33.6k 0

Jenkins实现自动化部署React项目

一、宝塔面板安装

示例服务器 阿里云CentOS(2核2G) ,项目为React,为方便操作,使用宝塔面板进行操作

使用CentOS的一键安装脚本:

Linux面板8.0.2安装脚本

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

根据提示安装就好,安装完成后根据所提供的用户名,密码和面板地址进行访问

image-20230918195226959

image-20230918201219884

进入首页需要绑定一个宝塔账号,没有的话可以去注册一个

image-20230918201444018

绑定账号后,会提示安装套件,选择推荐的就好

image-20230918201717474

二、Jenkins安装

进入宝塔面板,在docker菜单栏中一键安装Jenkins,没有安装docker的一键安装就行

image-20230918202217458

image-20230918203536261

选择一个自己喜欢的端口(注意避免冲突),同时运行外部访问(有防火墙的记得要打开),一键部署

image-20230918203840771

部署完成,所提供的地址就是Jenkins服务的地址

image-20230918205215241

首次进入Jenkins,需要到/var/jenkins_home/secrets/initialAdminPassword查看密码,但是这个Jenkins是安装在docker容器里面的,密码要在存储卷关联的路径里面找

image-20230918205403985

从存储卷的挂载点进去

image-20230918210010893

找到secrets文件夹进去

image-20230918210137617

initialAdminPassword文件里面就是初始密码

image-20230918210235342

image-20230918210400062

随后进入插件安装页面,暂时安装系统推荐插件即可

image-20230918211116012

可创建一个管理员用户

image-20230919104853808

url地址默认就行

image-20230919104949044

三、创建GitHub仓库

进入自己的GitHub并创建一个测试仓库

image-20230919111307086

根据提示,将React项目推送到远程仓库

image-20230919112230203

image-20230919112305346

image-20230919113612059

四、Jenkins拉取GitHub仓库代码

1.系统管理,进入凭据管理

image-20230919120317173

2.添加一个全局凭据

image-20230919120420731

3.填写GitHub账号密码,类型选择Username with password,ID不用填写会自动生成

image-20230919121138975

4.新建一个自由风格的项目

image-20230919114501809

5.勾选GitHub项目并填入仓库地址

image-20230919115900827

6.源码管理选择git,填入仓库地址并选择步骤3所创建的全局凭据

image-20230919121520126

7.点击立即构建,即可拉取代码到Jenkins工作空间

image-20230919122726503

五、构建React项目

1.进入插件管理,安装NodeJs插件

image-20230919122111699

在Available plugins里搜索NodeJS进行安装

image-20230919122141038

装完后地址栏输入restart重启Jenkins服务

image-20230919122309978

2.全局工具配置

image-20230919144252483

填写一下别名,选择NodeJS版本,自动安装

image-20230919144815056

3.在项目设置中选择刚刚设置好的NodeJS构建环境

image-20230919152153426

4.在构建步骤中,添加执行shell脚本

npm install
npm run build
tar -zcvf build.tar.gz build/

image-20230919152330898

5.点击立即构建,即可进行项目构建

build.tar.gz为打包后的压缩包

image-20230919153304834

六、项目部署

1.安装Publish Over SSH插件

image-20230919154457970

2.在阿里云轻量云服务器控制台生成远程密钥

image-20230919154919124

3.进入Jenkins的系统配置,在Publish over SSH 配置中,将云服务器远程密钥复制粘贴上去

image-20230919155208606

4.填写云服务器信息并测试连接

image-20230919160326950

image-20230919162138933

5.在项目配置中,添加构建后操作Send build artifacts over SSH

image-20230919162816393

七、使用Web hooks实现推送代码后自动构建部署

1.在GitHub项目设置中添加一个Webhooks

image-20230919163336484

image-20230919163956517

2.生成密钥

进入设置界面

image-20230919164438452

找到Developer settings

image-20230919164812929

生成一个密钥

image-20230919164727312

注意勾选

image-20230919165223550

image-20230919165302727

复制生成的密钥

image-20230919165352474

2.在Jenkins中添加一个全局凭据,类型为Secret text,将密钥粘贴其中

image-20230919165555251

3.在系统配置使用刚刚添加的凭据添加GitHub服务

image-20230919165832345

4.在项目配置中,构建触发器勾选GitHub hook trigger for GITScm polling

image-20230919170402201

相关文章

服务器端口转发,带你了解服务器端口转发
服务器开放端口,服务器开放端口的步骤
产品推荐:7月受欢迎AI容器镜像来了,有Qwen系列大模型镜像
如何使用 WinGet 下载 Microsoft Store 应用
百度搜索:蓝易云 – 熟悉ubuntu apt-get命令详解
百度搜索:蓝易云 – 域名解析成功但ping不通解决方案

发布评论