前端安装部署jenkins笔记

最新推荐文章于 2024-03-25 11:12:49 发布

cheeseCui

最新推荐文章于 2024-03-25 11:12:49 发布

阅读量1k

点赞数 21

分类专栏：服务器配置文章标签：前端 jenkins 笔记

本文链接：https://blog.csdn.net/cheeseC/article/details/136615683

版权

服务器配置专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言：

环境：腾讯云轻量服务器：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，
在这里插入图片描述
点进入后，进入安装步骤页面，执行红框里面的命令。
由于我的服务器原来安装了java环境，所以在此之前提前升级了jdk17，具体步骤见记服务器jdk8升级jdk17

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

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

在浏览器输入对应访问地址即可看到下面内容，在提示文件输入密码即可进入插件安装
在这里插入图片描述
选择安装推荐的插件即可，接着按照步骤一步步安装完插件、创建用户等即可进入jenkin工作台，至此，jenkin完成安装，成功了40%！

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

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

1、点击系统管理 -> 插件管理
在这里插入图片描述
2、搜索插件并安装

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

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

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

4、系统配置
这里配置gitee和Publish over SSH
在这里插入图片描述

gitee

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

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

填写完保存即可！

三、部署项目now

1、新建任务
点击新建任务
在这里插入图片描述
写入任务名称，选择自由风格，点确定

2、配置源码管理
选择git，补充红框的信息
gitee的凭证需要先点击添加，写入登录的用户名和密码，然后在下拉选择即可
分支默认master，可根据实际情况修改

3、配置构建触发器
选择 Gitee webhook触发构建。。。
在这里插入图片描述
修改允许触发构建的分支，并生成 webhook密码
去gitee仓库配置webhook

补充下面信息

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