前端ci/cd工程搭建 Jenkins 流水线构建（超详细）

Dcc
441 阅读5分钟

已经安装完了jenkins后配置怎么配置流水线，集成Git仓库，现在我们则使用 Jenkins 集成 Git

没安装好的看这里：juejin.cn/post/744232…

一. 使用SSH协议集成git仓库源

1. 使用SSH协议生成 SSH 密钥对

如果你还没有 SSH 密钥对，可以使用 ssh-keygen 命令来生成

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

运行上述命令后，系统会提示你输入保存密钥的文件名和密码（可选）。默认情况下，密钥会保存在 ~/.ssh/id_rsa 和 ~/.ssh/id_rsa.pub 文件中

2. 查看生成的公钥/私钥

cat ~/.ssh/id_rsa.pub // 公钥
cat ~/.ssh/id_rsa // 私钥

id_rsa是私钥文件，id_rsa.pub 是对应的公钥文件。我们需要在 Git 端配置公钥，在 Jenkins 端使用私钥与 Git 进行身份校验

3. 在gitee安全设置里面配置SSH公钥

把 cat ~/.ssh/id_rsa.pub 里面的内容复制过来

image.png

4. 去Jenkins里面配置私钥凭证

Jenkins 里面，私钥/密码 的认证信息都是以 凭证 的方式管理的，可以做到一次配置全局通用
我们先新建一个任务

image.png

选择添加凭据

image.png

添加下面的信息确认无误后点击添加

image.png

  • ID：证凭的名称
  • 描述：描述信息
  • Username：用户名
  • Private Key，Enter directly（☑️），key：私钥，把 cat ~/.ssh/id_rsa 的内容复制过来,注意这里私钥的内容包含 -----BEGIN RSA PRIVATE KEY----- 和 -----END RSA PRIVATE KEY-----

image.png

5. 在jenkins 服务器上,测试下能否进行ssh连接

sudo yum install -y git // 安装git
sudo su - jenkins // 验证 Jenkins 用户的 SSH 配置
ssh -T git@gitee.com 
// 返回下面 successfully 信息成功建立连接
// ! You've successfully authenticated, but GITEE.COM does not provide shell access.

保存后，在 Credentials 下拉列表中选择你添加的凭证。 如果没有出现红色无权限提示，则代表身份校验成功，可以正常访问

image.png

如果这种方式无法成功，下面提供第二种

二. 使用Gitee API令牌集成git仓库源

1. 安装Gitee插件

系统管理->插件管理->可选插件->筛选Gitee->选中安装，安装完了之后我们重启一下jenkins

image.png 然后也要给jenkins用户测试ssh连接

sudo su - jenkins 
ssh -T git@gitee.com
sudo systemctl restart jenkins

2. 在系统管理里面添加Gitee的配置

image.png

点击添加凭据，新增一个 Gitee API令牌

image.png 添加完点一下测试是否成功 image.png 这时在源码管理，Git配置里面的 凭证就不用选了 image.png

3. Jenkins Gitee webhook 配置

勾选 Gitee webhook 触发构建这个，下面的触发构建的策略先用默认选择的就行了，后面根据自己的策略自行调整即可 image.png 生成一个，Gitee WebHook 密码 image.png

4. Gitee webhook 配置

登录gitee，选择你要克隆的仓库，

  • URL:前面 jenkins webhook中的那个url
  • jenkins里面生成的 Gitee WebHook 密码 image.png 完了之后点击测试查看结果，大概率是失败的，一直返回404，测试了很久也没找到原因，后面看网上其他人也碰到这个原因是Gitee平台自身的bug，平台webhook的推送数据中（返回404的入参），X-Gitee-Event、X-Git-Oschina-Event是使用的push_hooks，而生产中正常推送的是Push Hook。自己用使用postman修改了错误推送的header为Push Hook之后就正常了，可返回200，查看了Jenkins也有推送记录。所以这里我们直接忽略平台这个测试，用IED push看能不能出出发点就行了，我这图片里面的唯一一次成功就是 IED push出触发的。
    Jenkins 流水线也被触发了 image.png

三. 安装Nginx

nginx安装比较简单直接使用 yum 安装就行了

sudo yum update -y // 更新系统
sudo yum install epel-release -y // 安装 EPEL 仓库
sudo yum install nginx -y // 安装 Nginx
sudo systemctl start nginx // 启动 Nginx 服务
sudo systemctl enable nginx // 开机自启

如果你的系统启用了防火墙，需要允许 HTTP 和 HTTPS 流量。默认情况下，Nginx 使用 80 端口（HTTP）和 443 端口（HTTPS）
添加以下内容到配置文件中（请根据实际情况修改域名和路径）

vim /etc/nginx/nginx.conf // 进入配置文件，修改 server 对象
server { 
    listen 80;
    server_name 106.52.186.188; 
    root /root/www/react-hook-admin;# 文档根目录 
    index index.html; # 默认索引文件 
    location / { 
        try_files $uri $uri/ /index.html =404; 
    }
}

权限问题：如果你发现配置路径都没问题，但是页面访问一直404，查看日志发现是 nginx的权限问题(13: Permission denied) 解决办法，按照以下步骤检查

  • 检查当前文件和目录的权限
ls -ld /root/www/react-hooks-admin
ls -l /root/www/react-hooks-admin
  • 查看启动用户和使用用户是否一致 ps aux | grep nginx
  • 检查修改config文件，user 字段后面改为 root

四. 安装node

我这里是 centOS 系统，用 NVM 安装

通过以下命令来安装 NVM。这个命令会从 NVM 的 GitHub 仓库下载并运行安装脚本。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者，如果你更喜欢使用 wget

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

加载 NVM然后验证安装是否成功 我这里是bash

source ~/.bashrc
nvm --version

使用 NVM 安装 Node.js

列出可用的 Node.js 版本：
你可以列出所有可用的 Node.js 版本来选择你要安装的版本，比如我这里安装node 14.21.3

nvm install 14.21.3

附加一些nvm常用命令

node --version // 查看node版本
nvm use 14.21.3 // 切换版本
nvm alias default 14.21.3 // 切换node版本
nvm ls // 列出已安装的 Node.js 版本
nvm uninstall 14.21.3 // 卸载某个版本的 Node.js
nvm current // 查看当前使用版本

五. 配置流水线 Shell 脚本

image.png

  • 首先打印一下当前的工作目录，如果在执行过程中，系统根目录其他目录cd不进去，需要设置下Jenkins的权限，确保对应的目录有访问权限
  • cd到相应的文件夹，拉代码，依赖然后打包，就和本地执行一样的操作
  • 复制打包后的dist文件到 Nginx 服务监听的文件夹下面
avatar
文章
阅读
粉丝