从零到一实现Jenkins前端自动化流水线搭建

从零到一实现Jenkins前端自动化流水线搭建

引用

CSDN

1.

https://m.blog.csdn.net/jinchenxinglaiy/article/details/143609469

Jenkins是一个功能强大的自动化构建工具，广泛应用于持续集成和持续交付（CI/CD）流程中。本文将从零开始，详细介绍如何使用Jenkins搭建前端自动化流水线，包括环境配置、安装部署、插件配置以及流水线的具体实现步骤。

前言

Jenkins是一个熟悉又默认的东西，说熟悉是因为早在2020年（四年前）我就知道这个自动化构建工具，说不熟悉知道他四年了一直都不知道该怎么使用 Jenkins 来帮助自己以及团队提效。所以就趁着最近不忙，从零到一搭建一个Jenkins应用并新建一条前端流水线来学习和使用Jenkins了。

基础环境

推荐使用 Docker 安装最新稳定版 Jenkins，版本可能和本文不一致，配置都是一样的。

注意事项

推荐使用 Docker 安装最新稳定版 Jenkins，最新版本 Jenkins 对环境要求较高，需要 JDK 17 版本，通常项目上使用比较多的还是 JDK 1.8，使用 Docker 就可以有效避免环境依赖问题。不建议安装低版本的 Jenkins，因为 Jenkins 生态比较活跃，插件安装默认会安装最新版本，插件与 Jenkins 版本不匹配很容易给你带来不必要的麻烦。

Jenkins 安装部署

Docker 国内镜像源配置

在 /etc/docker/daemon.json 配置中添加镜像源。PS：如果没有就 touch 一个！

推荐配置，实测有效！

{
    "registry-mirrors": [
        "https://docker.1panel.live",
        "https://registry.dockermirror.com",
        "https://dockerpull.org",
        "https://docker.unsee.tech"
    ]
}

重启 Docker 服务

systemctl daemon-reload
systemctl restart docker

拉取 Jenkins 镜像

docker pull jenkins/jenkins:lts

启动镜像

--add-host 参数添加自定义域名到容器的 hosts，没有添加自定义域名访问需求可以直接删掉 。

docker run \
--add-host="test.jincheny.com:192.168.149.131" \
--name jenkins -p 8080:8080 -p 50000:50000 \
--restart=on-failure \
-v jenkins_home:/var/jenkins_home \
-d jenkins/jenkins:lts

注意事项

Docker 安装 Jenkins 需要指定容器重启策略，否则在安装插件重启 Jenkins 执行 restart 操作时重启失败！

Jenkins 插件安装&配置

默认使用 Jenkins 推荐安装的插件即可！

基础插件

• Localization: Chinese (Simplified) —— 中文汉化（简体）
• Branch API —— 支持多分支项目
• Git Parameter —— Git 参数化构建，可以构建选定的分支
• NodeJS —— Node.js 版本管理

插件安装完成，在 Jenkins 页面执行重启操作

http://ip:8080/restart

NodeJS 插件配置

Node.js、npm 国内安装镜像配置

Node.js 配置添加

系统管理 —— 全局工具配置 —— NodeJS 安装

选择从国内镜像安装 Node.js

镜像地址：

https://npmmirror.com/mirrors/node/

npm 配置添加

系统管理 —— Managed files —— Add a new Config

在 Content registry 中添加淘宝镜像

淘宝镜像：

https://registry.npmmirror.com/

凭据管理配置

系统管理 —— 凭据管理

Git 用户名/密码添加（GitLab、Gitee）可以使用直接使用用户名和密码、GitHub 有双重认证在密码输入框输入个人访问令牌。

前端流水线配置

新建任务

构建一个自由风格的软件项目

丢弃旧的构建

保持构建的天数、保持构建的最大个数（可以自己根据项目情况合理设置）。

参数化构建过程

Git 参数

源码管理 —— Git —— Branches to build

注意事项

指定分支必须和参数化构建过程 —— Git 参数名称保持一致！

名称：branch

指定分支：$branch

构建环境

Provide Node & npm bin/ folder to PATH

Node.js、npm 配置使用在安装 Jenkins 后配置好的 Node.js 以及 npmrc file。

Build Steps（构建阶段）

增加构建步骤 —— 执行 shell

构建后操作

归档打包输出的产物目录或者安装包

这里前端项目打包后执行了，cicd 命令将产物包打包成 tar.gz 格式。

验证

流水线任务 —— Build with Parameters（参数化构建）—— 选择分支 —— Build

总结

总体来讲，Jenkins 作为老牌的自动化构建工具功能还是很强大的，不过对于前端同学来说，学习成本还是挺高的。本篇博客从零到一实现了前端 Jenkins 流水线的部署以及搭建，博客通篇写的内容很详细，篇幅很长。不过还是有待补充项，例如：自动化部署、钉钉群消息通知等等。后续有社区的同学有兴趣欢迎评论区探讨。