使用 Jenkins 实现持续集成和部署

2025-05-25

使用 Jenkins 实现持续集成和部署

我第一次使用 Jenkins 的时候很不容易,因为大多数关于设置和配置它的文章都过时了。所以,我写这篇文章是为了方便大家,让他们不必经历我之前设置 Jenkins 时经历的一切。

那么,就这样吧...

首先,Jenkins 到底是什么?

Jenkins是一个开源自动化工具,用于自动化软件的构建、测试和部署,让用户轻松实现持续集成和持续部署。

本质上,这意味着 Jenkins(以及许多其他工具)允许您在软件更改准备就绪后立即自动部署或向用户提供更改的过程。想象一下,当您将 PR 合并到 master(或主分支)后,用户就能立即看到您更新后的网站,这该有多方便啊😌。

为什么选择 Jenkins?

  • 它是免费的。
  • 它拥有强大的社区,因此寻求支持不是问题。
  • Jenkins 可以轻松配置,我希望通过本文证明这一点,所以请继续阅读☺️。

在本教程中,我们将学习如何使用 Jenkins 为 Node 应用执行 CI/CD。首先,我们将重点介绍所有步骤,然后在下面详细解释它们:

  1. 为节点应用程序创建 GitHub 存储库
  2. 创建一个简单的节点应用程序并推送到 GitHub
  3. 创建 Heroku 应用以供部署
  4. 安装 Jenkins
  5. 添加 GitHub webhook 以将更改推送到 Jenkins
  6. 使用 Jenkins 配置应用程序
  7. 在 Jenkins 中添加 GitHub 插件
  8. 配置 Jenkins 在测试成功后部署到 Heroku

先决条件

现在,让我们开始吧!

步骤 1 — 为节点应用程序创建 GitHub 存储库

登录你的 GitHub 账户并创建一个新的仓库。你可以随意命名,我将其命名为jenkins-test。你可以使用README.gitignore来初始化Node 仓库。另外,请确保你的仓库设置为public

图像

第 2 步 — 创建一个简单的 Node 应用并推送到 GitHub

创建存储库后,使用以下命令将存储库克隆到本地计算机:

git clone <repository_url>
Enter fullscreen mode Exit fullscreen mode

请务必将 更改repository_url为您的。
要创建package.json文件,请打开终端并cd进入项目文件夹,然后运行npm init并按照提示操作。我添加了一个屏幕截图,用于查看下面的 CLI 交互。

2

您可以删除或修改package.json文件的脚本块中的内容,并添加以下内容来启动测试应用程序:

"start": "node index.js",
"test": "jest"
Enter fullscreen mode Exit fullscreen mode

我们将使用express作为示例节点应用程序,因此请继续通过在终端中运行以下命令来安装它:

npm install express
Enter fullscreen mode Exit fullscreen mode

接下来,创建一个index.js文件作为我们的节点应用程序的入口点,并向其中添加以下几行:

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.status(200).json("Hello world");
});

module.exports = app.listen(process.env.PORT || 4000, () =>
  console.log(`Running on http://localhost:4000`)
);
Enter fullscreen mode Exit fullscreen mode

运行npm start并在浏览器上访问http://localhost:4000/来查看 Node 应用程序,您应该会看到浏览器中显示的Hello world 。


接下来,我们将向我们的应用程序添加一些测试,毕竟,使用 CI,我们应该确保测试可用并且在合并更改之前通过。

因此,返回终端,确保您位于项目的根目录中,然后使用以下命令安装jestsupertest包:

npm install --save-dev jest supertest
Enter fullscreen mode Exit fullscreen mode

接下来,在项目的根目录中创建一个文件夹,并将其命名为__test__(两个下划线,分别位于文件夹前面和文件夹末尾)。在这个__test__文件夹中,创建一个index.test.js文件,并至少添加以下代码(你随时可以使你的测试更加全面)。

const request = require("supertest");
const app = require("../index");

describe("Get route", () => {
  it("page should return hello world", async (done) => {
    const res = await request(app).get("/");
    expect(res.statusCode).toEqual(200);
    expect(res.body).toEqual("Hello world");
    done();
  });
});

afterAll(async () => {
  await app.close();
});
Enter fullscreen mode Exit fullscreen mode

在终端中运行npm testnpm run test,您应该会看到测试通过:

2ii

现在我们的代码正在运行并且测试通过,我们可以提交更改并推送到 GitHub。

git add .
git commit -m “initial commit”
git push
Enter fullscreen mode Exit fullscreen mode

步骤 3 — 创建用于部署的 Heroku 应用

登录你的 Heroku 仪表盘。
查看右上角,然后点击“新建”
选择“创建新应用”
添加你选择的应用名称,然后选择一个靠近你的区域。
点击“创建应用”

图像

返回你的项目终端,并使用Heroku CLI登录Heroku 。如果你尚未安装 Heroku CLI,可以参考这篇文章

之后,使用以下命令将远程内容添加到本地存储库:

heroku git:remote -a heroku-app-name
Enter fullscreen mode Exit fullscreen mode

然后使用以下命令推送代码:

git push heroku <github-branch-name>
Enter fullscreen mode Exit fullscreen mode

这样做是为了确保在自动化之前一切正常。您可以点击Heroku 应用仪表板上的“打开应用”来检查它是否正常工作。

4ii

第 4 步 - 安装 Jenkins

打开一个新终端并使用非 root用户帐户登录到您的服务器

ssh username@droplet_ip_address
Enter fullscreen mode Exit fullscreen mode

有了这个,我们可以使用以下命令更新内核:

sudo apt-get update
Enter fullscreen mode Exit fullscreen mode

运行以下命令安装java运行时:

sudo apt-get install default-jre
sudo apt-get install default-jdk
Enter fullscreen mode Exit fullscreen mode

依次运行以下命令来安装 Jenkins。

wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > \
    /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins
Enter fullscreen mode Exit fullscreen mode

现在,Jenkins 及其依赖项已安装,我们可以使用以下命令启动它:

sudo systemctl start jenkins
Enter fullscreen mode Exit fullscreen mode

您可以使用以下命令验证 Jenkins 是否启动成功:

sudo systemctl status jenkins
Enter fullscreen mode Exit fullscreen mode

它应该显示active

3i

由于 Jenkins 在端口8080上运行,因此我们使用ufw打开它:

sudo ufw allow 8080
Enter fullscreen mode Exit fullscreen mode

您可以使用以下命令检查ufw的状态:

sudo ufw status
Enter fullscreen mode Exit fullscreen mode

现在访问http://ip_address:8080来设置 Jenkins,您应该会看到解锁 Jenkins屏幕。

图像

要解锁 Jenkins,请返回终端,然后输入以下命令以显示密码。

sudo cat /var/lib/jenkins/secrets/initialAdminPassword
Enter fullscreen mode Exit fullscreen mode

复制密码并将其粘贴到管理员密码字段中。
下一个屏幕显示“自定义 Jenkins”,点击“安装建议的插件”

安装完成后,将进入“创建第一个管理员用户”屏幕。输入用户的用户名密码全名电子邮件地址,然后保存并继续

图像

之后,输入服务器 IP 地址,即http://ip_address:8080,然后保存并完成
耶🎉 Jenkins 准备好了!点击开始使用 Jenkins

第 5 步 — 添加 GitHub webhook 以将更改推送到 Jenkins

在应用程序的 GitHub 仓库中,转到“设置”,然后从侧边栏单击“Webhooks”。单击“添加 webhook” ,并在“Payload URL”字段中输入附加了/github-webhook/的 Jenkins url

对于Content-type ,选择application/json

选择仅推送事件作为触发 webhook 的事件。

勾选Active并点击Add webhook。现在,GitHub 可以成功将事件推送到 Jenkins 了。

图像

步骤 6 — 使用 Jenkins 配置应用程序

打开一个新的终端选项卡或窗口,并使用相同的非 root用户帐户登录到您的服务器。

ssh username@droplet_ip_address
Enter fullscreen mode Exit fullscreen mode

在同一个终端中,使用以下命令启用 root 权限:

sudo su
apt install npm
Enter fullscreen mode Exit fullscreen mode

切换到 root 用户并安装 npm 后,Jenkins 会在安装后自动创建一个新用户。使用此命令切换到该用户。

su jenkins
Enter fullscreen mode Exit fullscreen mode

使用以下命令生成新的 SSH 密钥:

ssh-keygen -t rsa
Enter fullscreen mode Exit fullscreen mode

Enter 键进入位置,并在要求输入密码时不要输入任何密码,只需按Enter 键即可。

5i

该过程完成后,使用以下命令打印公钥信息:

cat ~/.ssh/id_rsa.pub
Enter fullscreen mode Exit fullscreen mode

复制公钥。现在在新终端中以非root
用户 身份重新登录。使用以下命令 打开authorized_keys :

sudo vim ~/.ssh/authorized_keys
Enter fullscreen mode Exit fullscreen mode

粘贴id_rsa公钥并退出。

为了确认密钥配置是否正确,请切换到Jenkins服务器终端,并尝试使用 ssh 以非 root用户身份登录。按照以下步骤操作,即可成功登录。

5ii

第 7 步 — 在 Jenkins 中添加 GitHub 插件

在 Jenkins 仪表盘中,进入“管理 jenkins”,然后点击“管理插件”
在“可用”选项卡中,搜索github并选择“Github 集成插件”
点击“无需重启即可安装”,插件将在几秒钟内安装完成。

步骤 8 — 配置 Jenkins 以在测试成功后部署到 Heroku

现在 GitHub 已连接到 Jenkins,我们可以创建一个新项目。
在侧边栏上,单击“新建项目” ,从选项中选择“自由式项目” ,然后单击“确定”

图像

接下来您应该会被引导至配置页面,但如果没有,您可以通过单击左侧边栏上的配置来打开它。

在配置页面的常规选项卡下,选中Github 项目选项并添加Github 项目链接(项目存储库的 url,不带 .git 扩展名)。

接下来,向下滚动到源代码管理部分,选择Git并添加带有.git扩展名的存储库 URL(与您用于克隆存储库的 URL 相同)。

您可以将分支更改为主分支或部署过程所需的任何其他分支。

单击添加存储库按钮添加第二个存储库,指向您的 Heroku 应用程序。

要获取 Heroku 应用程序仓库链接,请前往Heroku 仪表盘上的“应用程序”设置
并复制该链接。 返回 Jenkins 仪表盘,并将此链接粘贴到“仓库 URL”中。

我们需要新的凭证,因此请单击“添加”来为我们的 Heroku 应用创建凭证。

从列表中选择Jenkins ,您应该会看到一个弹出窗口。

确保类型带密码的用户名,并且范围全局

输入您选择的用户名,但最好使用描述性的名称。我将使用heroku作为我的用户名。

接下来,我们需要将 Heroku Api 密钥添加到“密码”字段中,然后保存。要获取 Heroku Api 密钥,请转到 Heroku 仪表板,单击“帐户设置”,然后向下滚动以查看Api 密钥。复制此密钥并将其粘贴到“密码”字段中。

如果您愿意,可以为此凭证添加描述。

单击“添加”以完成创建凭证。

图像

现在,确保我们刚刚创建的新凭据在下拉菜单中被选中。如果没有,请点击下拉菜单并选择它。

接下来,点击“高级”并添加一个名称,以便在其他远程仓库中识别此仓库。我们稍后会用到这个名称。为了简单起见,我将我的仓库命名为jenkinsTest

接下来,向下滚动到“构建触发器”部分并检查GitHub 钩子触发器的 GITScm 轮询选项。

在Build部分下,单击Add build step按钮,然后单击Execute shell。在 shell 中输入以下代码:

#!/bin/bash

ssh non-root-username@<droplet_ip_address>
alias proj="cd node-app-name"
git pull origin main
npm install
npm test || exit 1
Enter fullscreen mode Exit fullscreen mode

单击添加构建后操作,选择Git Publisher,然后选择仅当构建成功时推送选项。

单击添加分支,在要推送的分支字段中输入要部署的分支的名称,然后将用于标识 Heroku 应用程序存储库的名称添加到目标远程名称字段中(我的是 jenkinsTest,如果您还记得的话,请在此处添加您的名称)。

然后保存

图像

转到项目仪表板,单击左侧边栏上的“立即构建”,然后高兴地看到您的代码构建成功!

图像

想要更刺激的体验,不妨修改一下你的代码并推送到 GitHub。再看看你的代码是如何自动部署到 Heroku 的。

如果您觉得这篇文章对您有帮助,请点赞或留言。如果您有任何疑问,请在评论区告诉我。

另外,别忘了关注我,以便阅读更多文章。谢谢。

文章来源:https://dev.to/mariehposa/achieving-Continous-integration-and-deployment-with-jenkins-4d6k
PREV
初学者 Vue.js 动手实践(第一部分)Vue 作为库在我们的应用程序上显示属性反应性
NEXT
20 个最佳 Tailwind 登陆页面模板(免费和付费)