前端安装部署jenkins笔记

前言:

环境: 腾讯云轻量服务器: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
  • 增加构建步骤->选择 Send files or execute commands over SSH
    通过ssh讲打包后的文件发送到指定目录,及nginx配置的包位置
    jenkins生成的文件在/var/lib/jenkins/workspace
    在这里插入图片描述
    至此 完成了项目的配置,

四、构建

这时 点击 【立即构建】或提交代码都能进行自动构建部署
在这里插入图片描述
在这里插入图片描述
如果成功,则
在这里插入图片描述
如果失败,看看log,错哪里了进行修改
还有可能是 UNSTABLE,我的第二个网站就是UNSTABLE,但是也能访问
在这里插入图片描述

美好的一天结束了!
加油,少女!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值