30 分钟搞定！Docker+Jenkins+Nginx + 腾讯云实现前端 CI/CD

作为前端开发，你是否每天都在重复这些机械操作？

bash 复制代码

本地改代码 → npm run build → 压缩dist包 → 上传服务器 → 登录服务器 → 解压覆盖 → 刷新验证...

为什么前端必须搞 CI/CD？先自查这些痛点你中了几条：

✖️ 每次改代码都要手动走一遍打包部署流程，浪费时间 ✖️ 本地构建正常，服务器部署就报错（环境不一致坑） ✖️ 深夜紧急改 BUG，还得手动操作到凌晨？

这套方案帮你解决： ✅ 代码提交后自动构建部署 ✅ 环境一致性问题一键搞定 ✅ 全程可视化日志，报错有据可查 ✅ 2 核 2G 的 "丐中丐" 服务器也能跑

一、环境准备（腾讯云服务器）

只需几条命令，搞定 Docker 全家桶：

连接服务器

可以采用ssh连接（ssh root@服务器公网IP），我采用的是宝塔面板

基础软件安装

bash 复制代码

# Ubuntu/Debian 系统
sudo apt update
sudo apt install -y curl wget vim git

1. 安装 Docker

bash 复制代码

# 添加 Docker 官方 GPG 密钥
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# 添加 Docker 仓库
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# 安装 Docker Engine
sudo apt-get update
sudo apt-get install -y docker-ce docker-ce-cli containerd.io

2. 配置 Docker 服务

bash 复制代码

# 启动 Docker 服务
sudo systemctl start docker

# 设置开机自启动
sudo systemctl enable docker

# 验证安装
sudo docker --version
sudo docker run hello-world

# 将当前用户添加到 docker 组（可选，避免每次使用 sudo）
sudo usermod -aG docker $USER
# 注销并重新登录生效

3. 配置 Docker 镜像加速（可选）

创建或修改 /etc/docker/daemon.json：

bash 复制代码

sudo mkdir -p /etc/docker
vim /etc/docker/daemon.json
#按 i 切换至编辑模式，添加以下内容，并保存。
{
    "registry-mirrors": [
        "https://mirror.ccs.tencentyun.com"
    ]
}
#先按 Esc 键：退出「插入编辑模式」，回到 Vim 普通模式
#输入 :wq（冒号 + w+q，小写）：
#最后按 回车键：执行保存退出操作

#执行以下命令，重启 Docker 即可。示例命令以 CentOS 7 为例。
sudo systemctl restart docker

Jenkins 容器化部署

1. 创建 Jenkins 数据目录

bash 复制代码

# 创建 Jenkins 数据目录
sudo mkdir -p /opt/jenkins_home

# 设置目录权限（Jenkins 容器内用户 ID 是 1000）
sudo chown -R 1000:1000 /opt/jenkins_home

2. 启动 Jenkins 容器

bash 复制代码

# 拉取 Jenkins 镜像
docker pull jenkins/jenkins:lts

# 启动 Jenkins 容器
docker run -d \
  --name jenkins \
  --restart unless-stopped \
  -p 8080:8080 \
  -p 50000:50000 \
  -v /opt/jenkins_home:/var/jenkins_home \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v /usr/bin/docker:/usr/bin/docker \
  --group-add $(getent group docker | cut -d: -f3) \
  jenkins/jenkins:lts

3. 获取初始管理员密码

bash 复制代码

# 等待容器启动完成（约1-2分钟）
sleep 120

# 获取初始密码
sudo cat /opt/jenkins_home/secrets/initialAdminPassword

#点击防火墙添加规则开放8080端口

4. Jenkins 初始化配置

访问 http://服务器IP:8080
输入初始管理员密码
选择 "安装推荐的插件"
创建管理员用户
配置 Jenkins URL

项目 Docker 配置

dockerfile 复制代码

# 第一阶段：构建阶段
FROM node:22.12.0 As builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build-only

# 第二阶段：运行阶段
FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Jenkins 流水线配置

Jenkinsfile 解析

groovy 复制代码

pipeline {
    agent any

    environment {
        // 环境变量定义
        IMAGE_NAME = "ai-graph-image"
        IMAGE_TAG = "${BUILD_NUMBER}"
        CONTAINER_NAME = "ai-graph"
    }

    stages {
        stage('构建Docker镜像') {
            steps {
                echo '开始构建多阶段Docker镜像...'
                sh "docker build -t ${IMAGE_NAME}:${IMAGE_TAG} ."
            }
        }

        stage('停止旧容器') {
            steps {
                echo '停止并移除旧容器（如果存在）...'
                sh "docker stop ${CONTAINER_NAME} || true"
                sh "docker rm ${CONTAINER_NAME} || true"
            }
        }

        stage('部署新容器') {
            steps {
                echo '启动新容器...'
                sh """
                    docker run -d \
                      --name ${CONTAINER_NAME} \
                      -p 8082:80 \
                      ${IMAGE_NAME}:${IMAGE_TAG}
                """
            }
        }
    }

    post {
        success {
            echo "流水线执行成功！应用已部署到8082端口"
        }
        failure {
            echo "流水线执行失败，请查看控制台输出排查问题"
        }
    }
}

创建 Jenkins 流水线项目

登录 Jenkins 管理界面
点击 "新建任务"
输入项目名称，选择 "流水线" 类型
在配置页面的 "流水线" 部分：
- 定义: Pipeline script from SCM
- SCM: Git
- 仓库URL: 你的 Git 仓库地址
- 脚本路径: Jenkinsfile

配置 Git 仓库访问

如果是私有仓库，需要配置认证：

进入 Jenkins 管理 → 管理凭据
添加 Git 仓库的用户名密码或 SSH 密钥
在流水线配置中选择对应的凭据

验证部署

bash 复制代码

# 检查容器状态
docker ps | grep ai-graph

# 检查应用访问
curl -I http://localhost:8082

# 查看容器日志
docker logs ai-graph

访问应用

打开浏览器访问: http://服务器IP:8082

总结

配置完成后，你只需要：

本地git push提交代码打开 Jenkins 看自动执行 30 秒后刷新页面看新效果

从此专注写代码，部署交给机器！

常见问题 Q&A

🤔 服务器配置不够用？2 核 2G 足够跑前端项目 + Jenkins 🤔 私有仓库怎么办？包含完整的 Git 认证配置步骤

完整操作步骤 + 代码已整理好，按照教程一步步来，新手也能一次成功！觉得有用的话，点赞收藏关注三连，下次部署找不到可就亏啦～ 😉