CICD了解

基于Gitee+Jenkins+腾讯云轻量云服务器的前端CI/CD

一、环境准备清单

组件	版本/要求	说明
腾讯云轻量云服务器	CentOS 7.6+ / Ubuntu 18.04+
Jenkins	2.346+	持续集成工具
Node.js	16+	前端构建环境
Nginx	1.18+	静态资源服务器
Gitee仓库	任意	代码托管平台
域名（可选）	-	用于生产环境访问

---

二、服务器初始化配置（以CentOS 7.9为例）（这里用宝塔面板快速过了）

1. 登录服务器并更新系统

# 使用SSH登录服务器（替换为你的服务器IP）
ssh root@your-server-ip

# 更新系统
yum update -y

# 安装常用工具
yum install -y wget curl vim git

2. 配置防火墙（如未开启可跳过）

# 查看防火墙状态
systemctl status firewalld

# 开放常用端口（如已关闭防火墙可忽略）
firewall-cmd --zone=public --add-port=8080/tcp --permanent  # Jenkins默认端口
firewall-cmd --zone=public --add-port=80/tcp --permanent    # HTTP
firewall-cmd --zone=public --add-port=443/tcp --permanent   # HTTPS
firewall-cmd --reload

3. 安装Node.js环境

# 下载Node.js 20 LTS版本
curl -fsSL https://rpm.nodesource.com/setup_20.x | bash -

# 安装Node.js
yum install -y nodejs

# 验证安装
node -v
npm -v

# 配置淘宝镜像（可选）
npm config set registry https://registry.npmmirror.com

---

三、Jenkins安装与配置

1. 安装Jenkins

# 添加Jenkins仓库
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

# 安装Jenkins
yum install -y jenkins

# 启动Jenkins并设置开机自启
systemctl start jenkins
systemctl enable jenkins

# 查看服务状态
systemctl status jenkins

2. 初始化Jenkins

1. 访问Jenkins控制台：浏览器打开 http://your-server-ip:8080
2. 获取初始密码： cat /var/lib/jenkins/secrets/initialAdminPassword
3. 安装推荐插件：选择"Install suggested plugins"
4. 创建管理员账户：设置用户名、密码、邮箱
5. 完成安装：保存并完成

3. 安装必要插件

进入Jenkins → 系统管理 → 插件管理 → 可选插件，搜索并安装：

• Git plugin（Git插件，已默认安装）
• NodeJS Plugin（Node.js环境管理）
• Publish Over SSH（SSH部署插件）
• Gitee Plugin（Gitee集成插件，可选）

4. 配置全局工具

进入Jenkins → 系统管理 → 全局工具配置：

Node.js配置：

• 名称：nodejs-20
• 自动安装：勾选
• 版本：选择20.x.x
• 全局npm包：可添加yarn（可选）

保存配置。

---

四、Gitee仓库配置

1. 创建Gitee仓库

1. 登录Gitee，创建新仓库
2. 上传前端项目代码（确保有package.json和构建脚本）
3. 记录仓库地址：https://gitee.com/your-username/your-repo.git

2. 配置SSH密钥（用于Jenkins拉取代码）

# 在服务器生成SSH密钥对
ssh-keygen -t rsa -C "your-email@example.com"

# 查看公钥
cat ~/.ssh/id_rsa.pub

将公钥内容添加到Gitee：

• 进入Gitee → 个人设置 → SSH公钥
• 粘贴公钥内容，设置标题（如"jenkins-server"）
• 点击"确定"

3. 测试SSH连接

# 测试连接Gitee
ssh -T git@gitee.com

# 如果显示"Welcome to Gitee.com, your-username!"表示成功

---

五、创建Jenkins流水线任务

1. 新建任务

• 点击"新建任务"
• 输入任务名称（如"frontend-ci-cd"）
• 选择"构建一个自由风格的软件项目"
• 点击"确定"

2. 源码管理配置

在"源码管理"选项卡：

• 选择"Git"
• Repository URL：git@gitee.com:your-username/your-repo.git
• Credentials：点击"添加" → Jenkins 类型：SSH Username with private key Username：git Private Key：选择"Enter directly"，粘贴~/.ssh/id_rsa私钥内容 ID：可填写描述（如"gitee-ssh-key"）
• 选择刚创建的凭据
• 分支：*/main（根据实际分支调整）

3. 构建触发器配置

在"构建触发器"选项卡：

• 勾选"轮询 SCM"
• 计划：H/5 * * * *（每5分钟检查一次代码变更）
• 或使用Gitee Webhook（推荐，见后续章节）

4. 构建环境配置

在"构建环境"选项卡：

• 勾选"Provide Node & npm bin/ folder to PATH"
• 选择之前配置的nodejs-20

5. 构建步骤配置

在"构建"选项卡，点击"增加构建步骤" → "Execute shell"：

#!/bin/bash

# 安装依赖
echo "开始安装依赖..."
npm install --registry=https://registry.npmmirror.com

# 代码检查（可选）
echo "执行代码检查..."
npm run lint || true  # 如果lint失败不中断构建

# 运行测试（可选）
echo "执行单元测试..."
npm run test || true

# 构建项目
echo "开始构建..."
npm run build

# 检查构建产物
if [ -d "dist" ]; then
    echo "构建成功，构建产物在dist目录"
    ls -la dist/
else
    echo "❌ 构建失败，未生成dist目录"
    exit 1
fi

6. 保存并立即构建

点击"保存"，然后点击"立即构建"测试流水线。

查看构建日志：点击构建编号 → Console Output，确认构建成功。

---

六、配置Nginx静态服务器

1. 安装Nginx

# 安装Nginx
yum install -y nginx

# 启动Nginx
systemctl start nginx
systemctl enable nginx

# 验证安装
nginx -v

2. 配置Nginx站点

创建配置文件：

vim /etc/nginx/conf.d/frontend.conf

添加以下内容（根据实际情况修改路径）：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或服务器IP

    # 静态资源目录（指向Jenkins工作目录的dist文件夹）
    root /var/lib/jenkins/workspace/frontend-ci-cd/dist;
    index index.html;

    # 开启gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss;

    # 处理前端路由（单页应用配置）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. 验证配置并重启

# 检查配置语法
nginx -t

# 重启Nginx
systemctl restart nginx

4. 测试访问

浏览器访问 http://your-server-ip，应该能看到部署的前端页面。

---

七、自动化部署配置（构建后操作）

方案一：使用Shell脚本复制文件（简单）

在Jenkins构建步骤的Execute shell中，在构建命令后添加：

# ... 构建命令之后添加：

# 复制构建产物到Nginx目录
echo "开始部署到Nginx..."
rm -rf /usr/share/nginx/html/*
cp -r dist/* /usr/share/nginx/html/

# 重启Nginx（可选）
systemctl restart nginx

echo "✅ 部署完成"

注意：需要给Jenkins用户权限：

# 将Jenkins用户加入nginx组
usermod -a -G nginx jenkins

# 修改Nginx目录权限
chown -R nginx:nginx /usr/share/nginx/html
chmod 775 /usr/share/nginx/html

# 重启Jenkins
systemctl restart jenkins

方案二：使用Publish Over SSH插件（推荐）

步骤1：安装插件

• 系统管理 → 插件管理 → 安装"Publish Over SSH"

步骤2：配置SSH连接

• 系统管理 → 系统配置 → Publish over SSH
• 点击"Add"添加SSH Server： Name：deploy-server Hostname：localhost（因为是同一台服务器） Username：root Remote Directory：/（根目录） 高级 → 勾选"Use password authentication, or use a different key" Passphrase / Password：输入服务器root密码
• 点击"Test Configuration"测试连接

步骤3：配置构建后操作

在Jenkins任务配置中：

• 构建后操作 → Send build artifacts over SSH
• SSH Server：选择刚配置的deploy-server
• Transfers： Source files：dist/**（构建产物） Remove prefix：dist（去掉dist前缀） Remote directory：/usr/share/nginx/html（Nginx目录） Exec command：systemctl restart nginx（可选，重启Nginx）

---

八、配置Gitee Webhook自动触发（可选）

1. 安装Gitee插件

• 系统管理 → 插件管理 → 可选插件
• 搜索"Gitee"并安装
• 重启Jenkins

2. 生成Gitee API Token

• 登录Gitee → 个人设置 → 私人令牌
• 生成新令牌，勾选"projects"权限
• 复制token

3. 配置Jenkins Gitee凭据

• Jenkins → 系统管理 → 系统配置
• 找到"Gitee Configuration"
• Gitee API URL：https://gitee.com
• Credentials：添加凭据 类型：Gitee API Token API Token：粘贴刚才复制的token ID：可填写描述
• 点击"Test Connection"测试

4. 配置Webhook触发

在Jenkins任务配置中：

• 构建触发器 → 勾选"Gitee webhook"
• Gitee webhook密码：点击"Generate"生成
• 复制生成的密码

5. 在Gitee配置Webhook

• 进入Gitee仓库 → 管理 → WebHooks
• 添加WebHook： URL：http://your-jenkins-ip:8080/gitee-project/frontend-ci-cd（替换为你的Jenkins地址和任务名） 密码：粘贴刚才复制的密码 触发事件：选择"Push事件"
• 点击"添加"

6. 测试Webhook

在Gitee仓库推送代码，查看Jenkins是否自动触发构建。

---

九、完整流水线验证

测试流程：

1. 本地开发：修改代码并提交到Gitee
2. 自动触发：Gitee Webhook通知Jenkins（或轮询检测到变更）
3. 构建阶段： 拉取最新代码 安装依赖 执行代码检查、测试 构建打包
4. 部署阶段： 复制构建产物到Nginx目录 重启Nginx（可选）
5. 访问验证：浏览器访问服务器IP，确认更新生效

常见问题排查：

• 权限问题：检查Jenkins用户对目录的读写权限
• 构建失败：查看Console Output日志，确认依赖、环境问题
• 部署失败：检查Nginx配置、目录路径是否正确
• Webhook不触发：检查防火墙、网络连通性