jenkins安装部署前后端简版 jenkins 前端部署

转载

人类新新 2024-07-25 15:04:34

文章标签 jenkins安装部署前后端简版前端 jenkins 笔记 java 文章分类 运维

前言：

环境：腾讯云轻量服务器：CentOS CPU - 2核内存 - 4GB（原来使用的内存是2GB构建总是卡死，升级为4GB）
目标：实现推送代码后，自动进行构建部署，网站刷新即可展示最新效果

内容较长，且看且耐心！💪

实现过程：

一、安装jenkins

开始前的废话：由于当前最新版本的jenkins需要jdk17的支持，而我服务器已经安装了jdk8，因此，我本来是想安装对应版本的jenkins，但是安装完后，配置 jenkins会有大部分的插件安装不上，导致无法使用jenkins，所以费一大圈劲儿，又重新卸载安装jdk17和最近版本的，唉，程序员美好的一天！

正题如下：

1、下载安装jenkins

jenkins下载地址：https://www.jenkins.io/zh/download/

下载稳定版本，对应自己系统的jinkins，我这里是centOS，

jenkins安装部署前后端简版 jenkins 前端部署_java

点进入后，进入安装步骤页面，执行红框里面的命令。

由于我的服务器原来安装了java环境，所以在此之前提前升级了jdk17，具体步骤见记服务器jdk8升级jdk17

jenkins安装部署前后端简版 jenkins 前端部署_java_02

正常情况下，到这应该没什么问题，一般会安装成功（好像是出现类似表格和完毕的内容）

2、配置（报错问题解决）
废话：网上很多帖子，在安装成功后就直接运行了，但是实际可能各种报错，原因可能是找不到java、jenkins端口不对啊等等

java关联
我的java安装在/usr/local/java中，
而 jenkins可能去/usr/bin/java找java
所以就需要将原来的java链接到对应位置

# 查看java位置
which java

# 链接到 /usr/bin/java
ln -s /usr/local/java/jdk17/bin/java /usr/bin/java

防火墙
开放防火墙端口，jenkins默认的是8080端口，如果要修改为其他的，还需在jenkins配置文件中修改其端口
修改配置文件：用户名和端口

# 用户名改为 root
JENKINS_USER="root"
# 端口，由于我的8080端口被占用，所以改为8088
JENKINS_PORT="8088"

3、启动jenkins

systemctl start jenkins

在浏览器输入对应访问地址即可看到下面内容，在提示文件输入密码即可进入插件安装

jenkins安装部署前后端简版 jenkins 前端部署_笔记_03

选择安装推荐的插件即可，接着按照步骤一步步安装完插件、创建用户等即可进入jenkin工作台，至此，jenkin完成安装，成功了40%！

二、部署项目前-安装插件及相关配置

项目的部署主要参考了网友linux中使用jenkins自动部署前端工程的博客，在此表达感谢！
还需要额外安装下面插件：
NodeJS Plugin（nodejs环境）
Publish over SSH （用于执行构建后的操作）
Gitee Plugin（由于我用的是gitee管理代码，所以需要安装）

1、点击系统管理 -> 插件管理

jenkins安装部署前后端简版 jenkins 前端部署_jenkins_04

2、搜索插件并安装

jenkins安装部署前后端简版 jenkins 前端部署_jenkins_05

3、全局工具配置

点击系统管理->全局工具配置，进行配置git和node

jenkins安装部署前后端简版 jenkins 前端部署_前端_06

git
如果服务没有安装git则需要先安装git（是服务器啊，不是jenkins）。
NodeJS

配置信息填完后保存即可。

4、系统配置

这里配置gitee和Publish over SSH

jenkins安装部署前后端简版 jenkins 前端部署_jenkins安装部署前后端简版_07

gitee

gitee的令牌需要去他的地址获取，然后在上面图片里增加，再选择令牌即可
Publish over SSH
写入服务器密码
key我没有写，如果要生成可参考linux中使用jenkins自动部署前端工程的博客或查查其他的试试。

新增SSH Servers，写入信息，测试成功即可

填写完保存即可！

三、部署项目now

1、新建任务

点击新建任务

jenkins安装部署前后端简版 jenkins 前端部署_java_08

写入任务名称，选择自由风格，点确定

jenkins安装部署前后端简版 jenkins 前端部署_笔记_09

2、配置源码管理

选择git，补充红框的信息

gitee的凭证需要先点击添加，写入登录的用户名和密码，然后在下拉选择即可

分支默认master，可根据实际情况修改

jenkins安装部署前后端简版 jenkins 前端部署_java_10

3、配置构建触发器

选择 Gitee webhook触发构建。。。

jenkins安装部署前后端简版 jenkins 前端部署_jenkins安装部署前后端简版_11

修改允许触发构建的分支，并生成 webhook密码

jenkins安装部署前后端简版 jenkins 前端部署_前端_12

去gitee仓库配置webhook

jenkins安装部署前后端简版 jenkins 前端部署_java_13

补充下面信息

URL即为勾选构建触发器时，提示URL
密码是上面生成的

添加完成后，会进行请求测试，今天测试结构都失败了呢，试了一个之前的也是404但构建没问题，姑且放一放，看后来构建是否有影响

4、配置构建环境
选择Provide Node & npm bin/ folder to PATH
5、配置 Build Steps
增加构建步骤->选择执行shell
这里主要是将nginx的代码进行备份移除，并进行install和build

node -v
npm -v

# 判断 -start 如果存在/usr/local/nginx/html/hello
if [ -d /usr/local/nginx/html/hello ]
then 
	echo '当前存在/usr/local/nginx/html/hello目录'
    # 时间戳-用于备份
    TIMESTAMP=$(date +"%Y%m%d%H%M%S")
    # 备份
    sudo mv /usr/local/nginx/html/vue3 '/usr/local/nginx/html/bak/hello_'$TIMESTAMP
else
	echo '当前不存在/usr/local/nginx/html/hello目录'
fi
# 判断 -end
npm install
npm run build