通过jenkins构建一个多分支的Pipeline项目

作者：crazy82071 | 来源：互联网 | 2023-09-02 19:08

微信公众号搜索DevOps和k8s全栈技术，即可关注我的公众号，也可通过扫描文章最后的二维码关注，每天都会分享技术文章供大家参考阅读~&#

微信公众号搜索DevOps和k8s全栈技术 &＃xff0c;即可关注我的公众号&＃xff0c;也可通过扫描文章最后的二维码关注&＃xff0c;每天都会分享技术文章供大家参考阅读~&＃xff0c;拥抱开源&＃xff0c;同大家共同进步&＃xff01;&＃xff01;

前言

这篇文章给大家展示如何使用Jenkins协调一个用Node Package Manager (npm) 管理的简单 Node.js 和 React 项目&＃xff0c; 并同时为开发和产品环境交付不同的结果。项目的交付会根据Jenkins构建不同的Git分支而有所区别。也就是说&＃xff0c;所构建的分支决定你的流水线会执行哪一个交付阶段。

在Docker中运行Jenkins

docker run \--rm \-u root \-p 8080:8080 \-v jenkins-data:/var/jenkins_home \-v /var/run/docker.sock:/var/run/docker.sock \-v "$HOME":/home \jenkinsci/blueocean

访问Jenkins/Blue Ocean Docker容器

如果你有一些使用 Docker 的经验&＃xff0c;希望或需要使用 docker exec 命令通过一个终端/命令提示符来访问 Jenkins/Blue Ocean Docker 容器, 你可以添加如 --name jenkins-tutorials 选项(与上面的 docker run ), 这将会给Jenkins/Blue Ocean Docker容器一个名字 "jenkins-tutorials"。这意味着你可以通过 docker exec 命令访问Jenkins/Blue Ocean 容器(通过一个单独的终端 /命令提示窗口) &＃xff0c;例如:

docker exec -it jenkins-tutorials bash

安装向导

在你访问 Jenkins之前, 你需要执行一些快速的 "一次性" 步骤。

解锁Jenkins

当你第一次访问一个新的Jenkins实例时,要求你使用自动生成的密码对其进行解锁。

1.当在终端/命令提示窗口出现两组星号时,浏览http://localhost:8080并等待 Unlock Jenkins 页面出现。

2.再次从终端/命令提示窗口, 复制自动生成的字母数字密码(在两组星号之间)。

3.在 Unlock Jenkins 页面, 粘贴该密码到 Administrator password 字段并点击 Continue。

使用插件自定义Jenkins

在解锁 Jenkins后, Customize Jenkins 页面出现。

在该页面&＃xff0c;点击 Install suggested plugins。

安装向导显示了正在配置的Jenkins的进程&＃xff0c;以及建议安装的插件。这个过程肯需要几分钟。

创建第一个管理员用户

最后, Jenkins 要求创建你的第一个管理员用户。

1.当 Create First Admin User 页面出现, 在相应的字段中指定你的详细消息并点击 Save and Finish。

2.当 Jenkins is ready 页面出现, 点击 Start using Jenkins。

注意&＃xff1a;

1&＃xff09;该页面可能表明 Jenkins is almost ready! 如果相反, 点击 Restart. 2&＃xff09;如果该页面在一分钟后没有自动刷新, 使用你的web浏览器手动刷新

3.如果需要,登录 Jenkins &＃xff0c; 你就可以开始使用 Jenkins了!

停止和重启Jenkins

在文档的其余部分,你可以通过在终端/命令提示窗口输入Ctrl-C&＃96;停止 Jenkins/Blue Ocean Docker容器&＃xff0c;你可以从中运行<>的 &＃96;docker run ... 命令。

要重启Jenkins/Blue Ocean Docker 容器:

1.在上面的 macOS,Linux 或 Windows上运行相同的 docker run ... 命令。

注意&＃xff1a;

如果有更新的话&＃xff0c;该进程会更新 jenkinsci/blueocean Docker 镜像。

2.浏览&＃96;http://localhost:8080&＃96;。

3.等待直到登录页面出现并登陆。

Fork和clone GitHub示例仓库

通过将应用程序源代码所在的示例仓库fork到你自己的Github账号中&＃xff0c; 并clone到本地&＃xff0c; 你就可以获取一个"Welcome to React"简单Node.js和React应用程序。

请确保你登陆了你的GitHub账户。如果你还没有Github账户&＃xff0c;你可以在 GitHub网站免费注册一个账户。
将示例仓库 building-a-multibranch-pipeline-project fork到你的账户的Github仓库中。在此过程中&＃xff0c;如果你需要帮助&＃xff0c; 请参考 Fork A Repo 文档。
将你的GitHub账户中的 simple-java-maven-app 仓库clone到你的本地机器。根据你的情况完成以下步骤之一(其中是你的操作系统用户账户名称)&＃xff1a;

macOS 系统路径为 /Users//Documents/GitHub/
Linux 系统路径为 /home//GitHub/
Windows 系统路径为 C:\Users\\Documents\GitHub\ &＃xff08;推荐使用Git bash命令行&＃xff0c;而不是通常的Microsoft命令提示符&＃xff09;

macOS 系统配置为 /Users//Documents/GitHub/building-a-multibranch-pipeline-project
Linux 系统配置为 /home//GitHub/building-a-multibranch-pipeline-project
Windows 系统配置为 C:\Users\\Documents\GitHub\building-a-multibranch-pipeline-project

如果你的机器安装了Github Desktop&＃xff1a;
其他情况:

打开一个终端/命令提示符&＃xff0c;并且 cd 进入正确的目录路径&＃xff1a;
运行以下命令完成仓库的clone&＃xff1a;
git clone https://github.com/YOUR-GITHUB-ACCOUNT-NAME/building-a-multibranch-pipeline-project
其中 YOUR-GITHUB-ACCOUNT-NAME 是你的Github账户的名称。
在GitHub网站上&＃xff0c;点击绿色的 Clone or download 按钮&＃xff0c;再点击 Open in Desktop.
在Github桌面版中&＃xff0c;在点击 Clone a Repository 对话框上的 Clone 按钮之前&＃xff0c;确保 Local Path 的配置为&＃xff1a;

在你的仓库中创建开发和生产分支

在Jenkins中创建流水线项目之前&＃xff0c;在你的本地Git仓库中创建"development"和 "production"分支。你将创建一个单独的Jenkinsfile&＃xff08;最初是在 master 分支&＃xff0c;但最终其上的代码会复制到其他分支&＃xff09;&＃xff0c; 该Jenkinsfile的各个阶段会根据Jenkins所构建的分支不同而被选择性的执行。在building-a-multibranch-pipeline-project 目录路径下&＃xff08;即你的本地clone仓库&＃xff09;

运行以下命令来创建以上分支&＃xff08;从 master 分支的内容复制&＃xff09;&＃xff1a;
git branch development
以及
git branch production
检查这些分支被成功创建&＃xff0c;运行命令 git branch&＃xff0c;结果为&＃xff1a;
development * masterproduction
如果符号*&＃xff08;标识当前分支&＃xff09;未处于 master 的位置&＃xff0c;运行命令 git checkout master 以确保 master 是当前分支。

在Blue Ocean中创建你的流水线项目

当你在Blue Ocean中创建 any 流水线项目是 , Jenkins 实际上在后台创建了一个多分支管道项目。如果你在Blue Ocean创建了一个流水线项目后&＃xff0c;访问 Jenkins的经典界面; 你会看到Jenkins 将你的项目创建为一个 "多分支流水线" 项目。

回到Jenkins并进入 Blue Ocean 界面。要做到这点, 确保:
浏览 http://localhost:8080/blue 并登陆&＃43; 或
浏览 http://localhost:8080/, 登录后点击右侧的 Open Blue Ocean 。
在Blue Ocean界面中心的 Welcome to Jenkins 框, 点击 Create a new Pipeline 开始流水线构建向导。
Note: 如果你没有看到这个框, 点击右上方的 New Pipeline。
在 Where do you store your code?,点击 Git (not GitHub).
在*Repository URL* 域 (在 *Connect to a Git repository*里), 指定你aboveclone到本地的仓库的目录路径, 他来自你主机上的用户账号/主目录 , 映射到Jenkins容器的 /home d目录 - 即
macOS - /home/Documents/GitHub/building-a-multibranch-pipeline-project
Linux - /home/GitHub/building-a-multibranch-pipeline-projec
Windows - /home/Documents/GitHub/building-a-multibranch-pipeline-project 5.点击k Save 保存你新建的流水线项目。
5.Blue Ocean 在每个分支中检测 Jenkinsfile "流水线存根" 的存在并运行每条流水线以对抗其各自的分支, 它的构建结果显示在Blue Ocean主界面的 Activity 页面上。&＃43;

注意&＃xff1a;

流水线存根包含一条流水线的基本要求 - 即 agent 和 stages 部分, 以及 stage 指令。为什么 building-a-multibranch-pipeline-project 仓库的原因包括&＃96;Jenkinsfile&＃96; 流水线存根&＃xff0c;它的存在的作用是&＃xff1a;在 Blue Ocean中创建流水线项目后能够立刻检测到(即 Jenkinsfile) , 这使得这些分支可以通过Blue Ocean进行访问。

如果你在Blue Ocean中构建了一个流水线项目&＃xff0c;但在你的仓库的一个或多个分支上没有一个 Jenkinsfile, 随后添加&＃96;Jenkinsfile&＃96; 到这些分支中,然后在Blue Ocean中访问这些分支任一个:

在多分支流水线项目中使用 Scan Multibranch Pipeline Now 特性 (可通过 Jenkins的经典界面进行访问),
或者
在 Git 仓库中实现webhooks。

在将你的带有build和test阶段的初始流水线创建为Jenkinsfile

现在&＃xff0c;你已经准备好在Jenkins中创建你的能够自动构建Node.js和React应用程序的流水。你的流水线将被创建为 Jenkinsfile, 它会提交你本地的Git仓库(building-a-multibranch-pipeline-project)的 master 分支。首先, 创建一个初始流水线来下载 Node Docker 镜像并将它作为Docket容器运行&＃xff0c;它会构建简单的Node.js 和 React 应用程序。还会添加 "Build" 阶段到流水线&＃xff0c;开始编排整个过程和"Test" 阶段 &＃xff0c;检查应用程序呈现的结果是否令人满意。

1.使用你最称手的文本编辑器或IDE,在本地building-a-multibranch-pipeline-project Git 仓库的根目录下打开现有的 Jenkinsfile 并 clear 它的内容。
注意:

确保在你的仓库的&＃96;master&＃96; 分支上执行了该步骤。

2.复制并粘贴下面的声明式流水线代码到空的 &＃96;Jenkinsfile&＃96;文件中:

pipeline {agent {docker {image &＃39;node:6-alpine&＃39;args &＃39;-p 3000:3000 -p 5000:5000&＃39; }}environment {CI &＃61; &＃39;true&＃39;}stages {stage(&＃39;Build&＃39;) {steps {sh &＃39;npm install&＃39;}}stage(&＃39;Test&＃39;) {steps {sh &＃39;./jenkins/scripts/test.sh&＃39;}}} }

3.保存并提交你编辑的Jenkinsfile文件到本地的building-a-multibranch-pipeline-projectGit仓库。比如在building-a-multibranch-pipeline-project 目录下, 运行下面的命令:
git stage .
然后
git commit -m "Add initial Jenkinsfile with &＃39;Test&＃39; stage"

4.再次回到Jenkins, 必要的话再次登录并进入 Jenkins的Blue Ocean的界面。

5.点击右上方的 Branches 进入你的流水线项目的分支列表。

6.点击你的流水线项目的 master 分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接来查看Jenkins 使用改进后的 Jenkinsfile&＃96;构建 &＃96;master 分支。如果你点击不了OPEN 链接, 点击Blue Ocean Activity 页面的_top_ 行来使用这一特性。在几分钟内, 如果Jenkins成功的从你的 &＃96;master&＃96;分支构建了 Node.js 和 React 应用程序&＃xff0c;Blue Ocean界面就会变成绿色。

7.点击右上方的 X 回到Blue Ocean 界面的 Activity 页面。

给你的流水线添加deliver和deploy阶段

接下来, 添加 "交付开发" 和 "部署生产" 阶段到你的流水线,Jenkins将会根据Jenkins所在的分支选择性的执行。这将 "流水线即代码" 概念提升到一个新的级别, 在这个级别中&＃xff0c; 一个单一的 Jenkinsfile 文件描述了在Jenkins中你的仓库的每个分支的整个项目的构建, 测试, 交付和部署过程。

1.回到你的文本编辑器/IDE&＃xff0c;打开&＃96;Jenkinsfile&＃96; 文件。

2.立刻复制并粘贴下面的声明式流水线语法到&＃96;Jenkinsfile&＃96;文件的 Test 阶段下面:

stage(&＃39;Deliver for development&＃39;) {when {branch &＃39;development&＃39;}steps {sh &＃39;./jenkins/scripts/deliver-for-development.sh&＃39;input message: &＃39;Finished using the web site? (Click "Proceed" to continue)&＃39;sh &＃39;./jenkins/scripts/kill.sh&＃39;}}stage(&＃39;Deploy for production&＃39;) {when {branch &＃39;production&＃39;}steps {sh &＃39;./jenkins/scripts/deploy-for-production.sh&＃39;input message: &＃39;Finished using the web site? (Click "Proceed" to continue)&＃39;sh &＃39;./jenkins/scripts/kill.sh&＃39;}}

结果如下:

pipeline {agent {docker {image &＃39;node:6-alpine&＃39;args &＃39;-p 3000:3000 -p 5000:5000&＃39;}}environment {CI &＃61; &＃39;true&＃39;}stages {stage(&＃39;Build&＃39;) {steps {sh &＃39;npm install&＃39;}}stage(&＃39;Test&＃39;) {steps {sh &＃39;./jenkins/scripts/test.sh&＃39;}}stage(&＃39;Deliver for development&＃39;) {when {branch &＃39;development&＃39; }steps {sh &＃39;./jenkins/scripts/deliver-for-development.sh&＃39;input message: &＃39;Finished using the web site? (Click "Proceed" to continue)&＃39;sh &＃39;./jenkins/scripts/kill.sh&＃39;}}stage(&＃39;Deploy for production&＃39;) {when {branch &＃39;production&＃39; }steps {sh &＃39;./jenkins/scripts/deploy-for-production.sh&＃39;input message: &＃39;Finished using the web site? (Click "Proceed" to continue)&＃39;sh &＃39;./jenkins/scripts/kill.sh&＃39;}}} }

when 指令 (和它们的&＃96;branch&＃96; 条件一起)决定是否 stages (包括这些 when 指令) 会被执行。如果 branch 条件的值(即模式) 与Jenkins运行构建的分支名匹配, 包含 when 和 branch 概念的&＃96;stage&＃96; 就会被执行。

注意&＃xff1a;

对 input message 过程的解释, 请参考“Add a final deliver stage…” p of the Build a Node.js and React app 教程的声明式流水线的注解 4。
对 deliver-for-development.sh, deploy-for-production.sh 和 kill.sh 脚本步骤的解释,请参考位于&＃96;building-a-multibranch-pipeline-project&＃96; 仓库的根目录下的&＃96;jenkins/scripts&＃96; 目录下的这些文件的内容。

3.保存并提交你编辑的 Jenkinsfile 到本地的 building-a-multibranch-pipeline-project Git 仓库。比如在 building-a-multibranch-pipeline-project 目录, 运行命令:

git stage .

然后

git commit -m "Add &＃39;Deliver...&＃39; and &＃39;Deploy...&＃39; stages"

4.再次回到Jenkins, 如果必要重新登录并进入Jenkins的Blue Ocean界面。

5.点击右上方的 Branches 来访问你的流水线项目的分支列表。

6.点击你的流水线项目的&＃96;master&＃96;分支的运行图标 ,然后快速的点击出现在右下方的 OPEN 链接查看Jenkins使用改进过的 Jenkinsfile&＃96;构建 &＃96;master 分支。I如果你点击不了 OPEN 链接, 点击Blue Ocean Activity 页面的 top 行来访问这一特性。
注意Jenkins是如何跳过你添加的最后两个阶段, 由于你正在运行构建的分支 (master) 在这些阶段不满足 when 指令的 branch 条件。

7.C点击右上方的 X 回到Blue Ocean界面的 Activity 页面。

Pull更新的Jenkinsfile到其他的仓库分支中

现在你已经有一个完整的 Jenkinsfile 文件可以在Jenkins中构建你的应用, 你可以 pull 该文件从你本地仓库的 master 分支到它的 development 和 production 分支。在你本地仓库的 building-a-multibranch-pipeline-project 目录下:

运行下面的命令来来pull从&＃96;master&＃96; 到 &＃96;development&＃96;的改变:
git checkout development
然后
git pull . master
还可以运行线面的命令将更改从 master pull到 production:
现在你的 development 和 production 分支拥有你在 master 分支上对 Jenkinsfile 的所有修改。

git checkout production
然后
git pull . master

在development分支上运行流水线

1.再次回到 Jenkins, 需要的话再次登录并进入 Jenkins的Blue Ocean界面。

2.点击右上的 Branches 进入流水线项目的分支列表。

3.点击流水线项目&＃96;development&＃96; 分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接来查看Jenkins 使用改进后的 Jenkinsfile&＃96;构建 &＃96;development 分支。如果你点击不了 OPEN 链接, 点击Blue Ocean的 Activity 页面上的 top 行来访问这一特性。

4.在几分钟&＃xff0c;当构建停止时, 确保你正在查看 Deliver for development 阶段 (如果需要点击它), 然后点击顶部绿色的*Shell Script* 步骤来扩展它的内容并向下滚动直到你看见 http://localhost:3000 链接。

注&＃xff1a;由于你正在不同的分支上构建应用程序, npm install 步骤需要几分钟为&＃96;npm&＃96;下载运行Node.js 和 React 应用所需的一些依赖 (保存在Jenkins主目录的&＃96;node_modules&＃96; 目录下)。由于这次的Jenkins构建是你的流水线项目在 development 分支上的第一次运&＃xff0c;并且每个分支都会在Jenkins的主目录中有他自己的工作区目录(包括他自己的&＃96;node_modules&＃96; 目录)&＃xff0c;这些依赖被再次下载。

5.点击http://localhost:3000 链接查看Node.js 和 React 应用在开发模式下在一个新的web浏览器选项卡中运行 (使用 npm start 命令) 。你应该会看到一个标题为 *Welcome to React*的页面/站点。

6.当你查看完页面/站点, 在Blue Ocean点击 Proceed 按钮完成流水线的执行。如果Jenkins成功在&＃96;development&＃96; 分支上构建Node.js 和 React 应用程序&＃xff0c;Blue Ocean界面就会变成绿色。注意 Deliver for development 阶段是如何被执行的 &＃xff0c;而*Deploy for production* 阶段却没有执行。

7.点击右上方的 X 回到Blue Ocean界面的*Activity* 页面

在production分支上运行流水线

1.点击右上方的 Branches 来访问你的流水线项目的分支列表。

2.点击你的流水线项目的&＃96;production&＃96;分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接查看Jenkins使用改进后的 Jenkinsfile&＃96;构建&＃96;production 分支。如果你不能点击 OPEN 链接, 点击Blue Ocean Activity 页面的 top 行来访问这一特性。

3.在几分钟内&＃xff0c;当构建停止时&＃xff0c; 确保你正在查看 Deploy for production 阶段 (如果必要点击它), 然后点击顶部绿色的*Shell Script* 步骤来扩展它的内容并向下滚动直到你看到&＃96;http://localhost:5000&＃96; 链接。

4.点击 http://localhost:5000 链接在一个新的web浏览器选项卡中查看你的Node.js 和 React应用。他将会在生产模式下从你的源代码的生产构建开始运行(使用 npm run build 命令生产)。同样的, 你会看到一个标题为*Welcome to React*的页面/站点然而, 这一次, 该应用程序的内容是由 npm serve module提供的&＃xff0c;并且很可能会继续在你浏览器的后台运行。

5.当你查看完网页/站点, 在Blue Ocean中点击 Proceed 按钮完成流水线的执行。如果Jenkins 从&＃96;production&＃96;分支成功 &＃96;production&＃96;构建你的Node.js 和 React 应用&＃xff0c;Blue Ocean界面就会变成绿色。注意 Deploy for production 阶段是如何被执行的&＃xff0c;而 Deliver for development 阶段被跳过。

6.点击右上方的 X 回到Blue Ocean界面的 Activity p页面。&＃43; Note: 由于你的浏览器很可能会继续运行npm serve 模块提供的应用内容, 在Jenkins关闭&＃96;serve&＃96; 进程后&＃xff0c;你的浏览器仍然会长时间显示你在&＃96;http://localhost:5000&＃96;查看过的内容。在below关于如何从你的浏览器清除应用程序和它的内容。

跟踪 (可选)

本节将向你介绍使用Jenkins的一种类似的开发工作流程&＃xff0c;在它们被部署到生产 (从 production 分支)前&＃xff0c;从&＃96;development&＃96;分支经由&＃96;master&＃96; 分支对你的应用程序 (即 App.js 源文件) 进行更改。

在你本地仓库的 building-a-multibranch-pipeline-project 目录下, 运行命令 git checkout development 更改 development 分支。
回到你的文本编辑器/IDE&＃xff0c;打开你本地的&＃96;building-a-multibranch-pipeline-project&＃96; Git仓库的 src&＃96;目录下的 &＃96;App.js 文件。
立刻复制并粘贴下面的HTML语法到&＃96;App.js&＃96;文件的&＃96;To get started…&＃96; 行下面:
This is a new line I added.
结果如下:
import React, { Component } from &＃39;react&＃39;; import logo from &＃39;./logo.svg&＃39;; import &＃39;./App.css&＃39;;class App extends Component {render() {return (
Welcome to React To get started, edit src/App.js and save to reload. This is a new line I added.
);} }export default App;
保存并提交你编辑的 App.js 文件到你本地的 building-a-multibranch-pipeline-project Git仓库。比如在 building-a-multibranch-pipeline-project 目录下, 运行命令:
git stage .
然后
git commit -m "Update &＃39;App.js&＃39;"
回到Blue Ocean, 在 development 分支运行你的流水线 (如 above所述) 并通过 &＃96;http://localhost:3000&＃96;检查结果以查看新添加的行。
假设你对该更改感到满意, 在你本地仓库的 building-a-multibranch-pipeline-project 目录下, 运行下面一系列的命令 pull 你的更改到 production 分支 (via the master 分支):
git checkout master
然后
git pull . development
然后
git checkout production
接着
git pull . master
回到 Blue Ocean, 这次在 production&＃96;分支运行你的流水线 (和你在 <>中做的一样) 并通过 &＃96;http://localhost:5000 检查结果&＃xff0c;以查看你新添加的行。
Notes:

由于你的浏览器很可能会缓存 npm serve 模块的内容, 你需要刷新你的浏览器页面以查看你的更改。
在一个真正的软件开发环境中&＃xff0c;对于大型团队来说, 在云或web托管的 Git 服务上 (如 GitHub或BitBucket)使用pull请求&＃xff0c;更有可能在分支之间pull变更。

从你的浏览器中清除应用程序

你的浏览器很有可能继续运行由npm serve module提供的应用的内容, 这意味着在 Jenkins 中止 serve 进程后&＃xff0c;你的浏览器仍然会长时间显示你在&＃96;http://localhost:5000&＃96;查看的内容。从浏览器中清除应用程序以及内容:

在Chrome

在你浏览器的 URL 域输入以下内容:
chrome://serviceworker-internals/
将 "ServiceWorker" 条目定位到 http://localhost:5000
点击 Unregister 按钮。

在Firefox

在你浏览器的 URL 域输入以下内容:
about:serviceworkers
将 "Registered Service Worker" 条目定位到 http://localhost:5000
点击 Unregister 按钮。

结束语

做得好&＃xff01;您刚刚使用Jenkins通过npm构建了一个有选择的运行阶段的多分支流水线项目&＃xff01;本教程展现了Jenkins 使用一个Jenkinsfile在你的仓库的多个分支中编排不同的构建和交付结果的能力。由于Jenkins具有极高的可扩展性&＃xff0c;因此可以对其进行修改和配置&＃xff0c;以处理构建协调和自动化的几乎任何方面。