Jenkins & GitHub：从零开始构建 CI/CD 前端自动化部署

Northal
247 阅读4分钟

安装jenkins

可以直接参考官网，我使用的是centos 9 stream 官网下载地址

sudo wget -O /etc/yum.repos.d/jenkins.repo \
    https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key
sudo yum upgrade
# Add required dependencies for the jenkins package
sudo yum install fontconfig java-21-openjdk
sudo yum install jenkins
sudo systemctl daemon-reload

启动 Jenkins

sudo systemctl enable jenkins
sudo systemctl start jenkins
sudo systemctl status jenkins
  • 执行status会显示初始密码，打开 [ip]:8080 访问jenkins，输入初始密码

9ce186f2-1525-4dd1-bfcf-9502977ad01f.png

  • 点击选择插件来安装

6f6e8649-7ece-4d9e-ae7c-e74dfdd364e1.png

  • 点击无、安装

04740410-8eb8-4faa-a0b4-91376f522d5c.png

  • 直接使用管理员继续了，当然创建一个管理员用户也是一样的

aa4f061e-aae7-419d-a5fb-b9d745d0185b.png

  • 实例配置可以不做修改直接完成

6a03c137-5be9-42bc-abd4-30008818d9e1.png

27eb7300-d3ae-4cd7-8fd8-66f862ee527e.png

修改账户密码

ca303d96-4642-420e-8c17-c49fc9a12b66.png

安装插件

  1. 点击右上角设置

  2. 进入plugins -> Available plugins

  3. 安装NodeJS、Git、Github

2687ae02-d21a-4ccf-9e1d-cb729fa31f92.png

0a135f03-1f4d-4963-a52e-d3148d6baca3.png

c6733645-6257-490e-b86d-e2ebc83e9952.png

tip: 如果在你的服务器上没有安装git，那么需要你手动安装一下

注意是服务器上，不是jenkins上

如果没有git，那么执行一下 yum install git -y 安装一下，不然jenkins读取不到git的执行路径

7d5738fd-d1ef-4034-99d6-b762dae3d84d.png

想汉化可以安装汉化插件

56f21ab6-94ef-413b-8cfd-d9d0b3ebdc25.png

  • 重启一下Jenkins服务
sudo systemctl daemon-reload
sudo systemctl restart jenkins

配置插件

  • 首先前往github

  • 进入设置 -> 左侧菜单最下面 developer settings -> personal access tokens -> Tokens (classic)

  • 点击右上角 Generate new token -> Generate new token (classic)

  • 在权限（scopes）部分，你需要给这个 Token 至少赋予 repo 和 admin:repo_hook 的权限，这样 Jenkins 才能管理你仓库的 Webhook。

  • 记得复制好生成的token

2e5830e9-9f9b-4155-a71d-414f45e4a5e0.png

  1. 进入系统配置

2e5830e9-9f9b-4155-a71d-414f45e4a5e0.png

  • 找到github 服务器

e354fb15-4fb8-4fab-bd32-20c088ee25dc.png

添加一个凭证

类型选择secret text

将刚刚复制的token粘贴到 secret

id可以随便给

27323da7-f6c5-45fe-bba2-f122f44d41e5.png

18352c53-09a8-4045-a2e8-0320715a64f5.png

  1. 全局工具配置

bb0cb8d2-752b-48ba-9cec-5993c7a27037.png

  1. ssh配置
# 给jenkins用户生成ssh，用于访问github
sudo -u jenkins ssh-keygen -t rsa

cat /var/lib/jenkins/.ssh/id_rsa.pub# 输出的公钥配置在github的ssh上

cat /var/lib/jenkins/.ssh/id_rsa # 密钥配置在jenkins上，如何配置见下面

280d513b-03cd-4939-8b0e-01390edfe53b.png

  1. 配置known_hosts

github know_hosts地址

vim /var/lib/jenkins/.ssh/known_hosts

# 写入以下内容
github.com ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIOMqqnkVzrm0SdG6UOoqKLsabgH5C9okWi0dh2l9GKJl
github.com ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBEmKSENjQEezOmxkZMy7opKgwFB9nkt5YRrYMjNuG5N87uRgg6CLrbo5wAdT/y6v0mKV0U2w0WZ2YB/++Tpockg=
github.com ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCj7ndNxQowgcQnjshcLrqPEiiphnt+VTTvDP6mHBL9j1aNUkY4Ue1gvwnGLVlOhGeYrnZaMgRK6+PKCUXaDbC7qtbW8gIkhL7aGCsOr/C56SJMy/BCZfxd1nWzAOxSDPgVsmerOBYfNqltV9/hWCqBywINIR+5dIg6JTJ72pcEpEjcYgXkE2YEFXV1JHnsKgbLWNlhScqb2UmyRkQyytRLtL+38TGxkxCflmO+5Z8CSSNY7GidjMIZ7Q4zMjA2n1nGrlTDkzwDCsw+wqFPGQA179cnfGWOWRVruj16z6XyvxvjJwbz0wQZ75XK5tKSb7FNyeIEs4TT4jk+S4dhPeAUC5y+bDYirYgM4GC7uEnztnZyaVWQ7B381AK4Qdrwt51ZqExKbQpTUNn+EjqoTwvqNj4kqx5QUCI0ThS/YkOxJCXmPUWZbhjpCg56i+2aB6CmK2JGhn57K5mj0MNdBXA4/WnwH6XoPWJzK5Nyu2zB3nAZp+S5hpQs+p1vN1/wsjk=

新建任务

  1. 新建一个任务选择自由风格软件项目

4807feff-134d-4000-9512-dfff7197c201.png

d0159e26-409d-42c5-94cd-424ced098a77.png

d2261796-38c1-402e-9783-14e38849a7a3.png

1b5bfd3c-af3b-4195-9a5f-644b550c095a.png

6c65348d-817b-42c8-9a5d-e53f2c5d932d.png

  • build steps 选择执行shell脚本

  • 可以点击立即构建手动执行一下看看能否拉取到代码，正常输出

7fa5ea45-9e3b-4796-96df-11d3164d242b.png

f61089bd-45b0-4daf-82c7-d2d192525ea4.png

配置gitub webhook，推送代码就触发构建

  • 进入github对应的项目仓库

  • 点击仓库的setting

  • 左侧菜单中间部分找到webhooks

  • 右上角添加Add webhook

  • payload url 是你的jenkins url 后面 加上 /github-webhook/

f2dc7341-c96c-4b80-a43d-4296f8904e0c.png

  • 配置完成可以推送代码，大概10s左右会开始构建

修改build steps，自动打包部署项目

  • 点击配置

  • 找到Build Steps修改shell脚本

  • 大概的思路就是安装nginx、启动nginx、安装npm依赖、执行打包、配置nginx完成部署 —— 至少有ai写个shell脚本不麻烦

  • 脚本地址：build steps shell脚本

  • 你只需要修改脚本的SERVER_NAME和PROJECT_NAME 第7和10行

  • 当然这里有个坑，就是如果是使用jenkins用户去安装软件需要root权限，所以你得给jenkins提权

  • 修改完成重启jenkins，重启命令上面有

vim /usr/lib/systemd/system/jenkins.service
# 修改其中的用户和用户组为 root
User=root
Group=root

a738d040-bdff-4d13-a166-6866102b1bfc.png

  • 记得重启

  • 修改了这个之后，去重新构建会出现这种错误

    ERROR: Error fetching remote repo 'origin'

  • 在工作空间内清理工作空间就好了

7d140a3d-6437-4ed1-9d86-0060bfec09e3.png

  • 然后重新在手动构建/推送代码触发webhook构建即可完成
avatar
文章
阅读
粉丝