返回 导航

其他

hangge.com

Jenkins - 安装配置、快速上手教程(附:自动化部署Vue项目)

作者:hangge | 2026-08-28 11:18
    Jenkins 是一款开源的自动化服务器,广泛应用于持续集成(CI)和持续部署(CD)领域。通过 Jenkins,开发者可以自动化完成代码构建、测试、部署等一系列工作流程,大大提高开发效率。本文将详细介绍如何在 Linux 服务器上安装配置 Jenkins,并演示如何实现 Vue.js 项目的自动化部署。

一、基本介绍

1,什么是 Jenkins

(1)Jenkins 是一个用 Java 编写的开源自动化服务器,用于自动化各种任务,包括构建、测试和部署软件。它支持多种版本控制系统(如 GitSVN)和构建工具(如 MavenGradlenpm)。

(2)Jenkins 的核心优势包括:

2,应用场景

  • 持续集成:代码提交后自动触发构建和测试
  • 持续部署:构建完成后自动部署到测试或生产环境
  • 定时任务:定期执行脚本、备份等任务
  • 自动化测试:集成单元测试、集成测试等自动化测试流程

二、安装 Jenkins

1,环境准备

(1)在安装 Jenkins 之前,需要确保系统已安装 Java 运行环境。最新版的 Jenkins 需要 Java 21 或更高版,具体安装步骤可以参考我之前写的文章:
注意Jenkins 2.555 及以上版本要求 Java 21,不再支持 Java 11Java 17

(2)如果云服务器没有安装 Git,还需要安装 Git 工具:
sudo yum install git

2,在线安装 Jenkins

(1)下载 Jenkinsyum 源并导入密钥:
提示:以下命令以 CentOS/RHEL 系统为例,Ubuntu/Debian 系统请使用 apt 命令安装。
# 1. 下载 Jenkins 的 yum 源
sudo wget -O /etc/yum.repos.d/jenkins.repo \
  https://pkg.jenkins.io/redhat-stable/jenkins.repo \
  --no-check-certificate

# 2. 导入 Jenkins 密钥
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

# 3. 更新系统软件包
sudo yum upgrade

(2)安装 Jenkins
# 安装 Jenkins
sudo yum install jenkins

# 重新加载守护进程,生成新依赖树
sudo systemctl daemon-reload

3,启动 Jenkins 服务

(1)启动 Jenkins 服务并设置为开机自启动:
# 设置开机自启动
sudo systemctl enable jenkins

# 启动 Jenkins 服务
sudo systemctl start jenkins

# 查看 Jenkins 启动状态
sudo systemctl status jenkins

(2)当看到 Active: active (running) 时,表示 Jenkins 已成功启动:

(3)其他常用命令:
# 重启 Jenkins
sudo systemctl restart jenkins

# 停止 Jenkins
sudo systemctl stop jenkins

三、Jenkins 设置向导

1,解锁 Jenkins

(1)Jenkins 启动后,在浏览器中访问 http://服务器 IP:8080,首次访问会看到解锁页面:
注意:请确保服务器防火墙已开放 8080 端口,否则无法访问 Jenkins

(2)根据页面提示,在服务器终端执行以下命令获取初始管理员密码:
cat /var/lib/jenkins/secrets/initialAdminPassword

(3)将输出的密码复制到"管理员密码"输入框中,然后点击"继续"按钮:

2,安装推荐插件

(1)解锁后进入插件安装页面,选择"安装推荐的插件":
  • 安装推荐的插件:安装 Jenkins 社区推荐的一组插件,适合最常见的用例
  • 自行选择要安装的插件:手动选择需要安装的插件集
提示:建议初次使用选择"安装推荐的插件",这些插件涵盖了 GitPipelineCredentials 等常用功能。

(2)随后等待插件自动安装即可。

3,创建管理员用户

(1)插件安装完成后,Jenkins 要求创建第一个管理员用户。填写用户名、密码、邮箱等信息:

(2)点击"保存并完成",然后点击"开始使用 Jenkins",即可进入 Jenkins 主界面。

四、插件安装与配置

1,安装 Node.js 插件

(1)如果需要构建 Vue.jsNode.js 项目,需要安装 Node.js 插件。进入 Jenkins 首页,点击“管理 Jenkins”->“插件管理”。

(2)在"可选插件"选项卡中,搜索 NodeJS,勾选该插件,点击"安装"按钮:

(3)下载完成后,勾选"安装完成后重启 Jenkins(空闲时)"选项,等待 Jenkins 重启。

2,配置 Node.js 构建环境

(1)插件安装完成后,需要配置 Node.js 构建环境。进入"管理 Jenkins" → "全局工具配置":

(2)找到 NodeJS 安装 部分,点击"新增 NodeJS"按钮:

(3)选择需要安装的 Node.js 版本,点击底部的"保存"和"应用"按钮完成配置。

五、项目自动化部署

1,新建任务

(1)进入 Jenkins 首页,点击左侧菜单栏的"新建 Item"选项。

(2)输入任务名称(如 auto-deploy-vue),选择 Freestyle project(自由风格的软件项目),点击"确定"按钮。

2,源码管理

(1)在任务配置页面,找到"源码管理"部分,选择 Git,填写远程仓库地址:
  • Repository URLGitHub 仓库地址
  • Credentials:登录凭证(首次需添加)
  • 指定分支:构建时拉取的分支,如 */main

(2)注意添加 GitHub 凭据时,密码并不是直接使用我们在 GitHub 上面的登录密码,而是需要使用 Personal Access Token。具体创建方法可以参考我之前写的文章:

3,构建触发器

在"Triggers(构建触发器)"部分,勾选"Build periodically(定时构建)",根据需求填写触发规则:
提示:使用 H 符号可以避免所有任务在同一时间触发,减少服务器负载。
# 触发规则示例:
# 每5分钟构建一次
H/5 * * * *

# 规则说明(5个星号分别代表:分 时 日 月 周)
# 每半小时构建一次:H/30 * * * *
# 每两小时构建一次:H H/2 * * *
# 每天凌晨两点构建:H 2 * * *

4,构建环境

在"Environment(构建环境)"部分,勾选 Provide Node & npm bin/ folder to PATH,选择之前配置的 Node.js 版本:

5,构建脚本

(1)在"Build Steps(构建脚本)"部分,点击“增加构建步骤”,然后选择"Execute shell(执行 shell)",

(2)然后填写构建脚本,这里假设我们需要构建到 /usr/share/nginx/html 目录下下:
注意:首次构建时,需要先在服务器上创建构建目录:mkdir -p /usr/share/nginx/html
echo "========== 开始构建 =========="
# 查看当前路径
echo "当前路径:$(pwd)"

# 查看 Node.js 版本
node -v
npm -v

# 安装项目依赖
echo "========== 安装依赖 =========="
npm install

# 打包项目
echo "========== 打包 =========="
npm run build

# 删除旧的构建文件
echo "========== 删除旧版本 =========="
rm -rf /usr/share/nginx/html/*

# 复制新的构建文件
echo "========== 发布 =========="
cp -rf dist/* /usr/share/nginx/html/

echo "========== 部署完成 =========="

(3)后续构建时如果遇到权限问题,可以执行以下命令设置文件夹权限,这里可以先跳过。
# 为使用到的文件夹设置权限
chown -R jenkins /usr/share/nginx/html
chown -R jenkins /var/lib/jenkins
chown -R jenkins /var/log/jenkins
chown -R jenkins /var/cache/jenkins

# 将 Jenkins 添加到 root 组
sudo usermod -a -G root jenkins

# 重启 Jenkins
systemctl restart jenkins

6,立即构建

(1)保存任务配置后,进入该任务页面,点击"Build Now(立即构建)"按钮执行构建。

(2)构建过程中可以查看控制台输出和详细信息。构建完成后,可以在"构建历史"中查看构建状态。
评论

全部评论(0)

回到顶部