前后端项目自动部署方案主流实现方案

前后端项目自动部署方案

主流实现方案分为GitLab CI/CD、GitHub Actions、Jenkins、Shell 脚本 + 定时 / 钩子，下面分场景讲解完整配置、流程和实操步骤，覆盖前端、后端（Java/Go/Node）通用部署。

一、整体部署流程（通用）

1. 开发者推送代码到 Git 仓库
2. 代码触发WebHook/CI 流水线
3. 拉取最新代码 → 编译 / 打包
4. 停止旧服务 → 备份旧包
5. 发布新包 → 启动服务
6. 健康检查 + 日志输出

---

二、方案选型建议

方案	适用场景	难度
Shell+Git WebHook	单机、小型项目、个人 / 小团队	低
GitHub Actions / Gitee Go	代码托管在 GitHub/Gitee，云服务器	中
GitLab CI/CD	自建 GitLab 私有仓库、企业团队	中
Jenkins	多项目、集群、复杂流水线、多环境	高（企业首选）

---

三、方案 1：最简单 → WebHook + Shell 脚本（单机部署）

适合：单台 Linux 服务器、前后端同机、小型项目，依托 Git 仓库 WebHook 触发部署。

环境准备

• 服务器：CentOS / Ubuntu
• 已安装：git、项目运行环境（JDK/Node/Go/Nginx）
• 代码仓库：Gitee/GitHub/GitLab（开启 WebHook）

步骤 1：编写后端部署脚本（示例：Java SpringBoot）

新建 /home/deploy/deploy_backend.sh

#!/bin/bash
# 后端部署脚本
BACK_DIR="/home/project/backend"
GIT_URL="https://gitee.com/xxx/backend.git"
JAR_NAME="app.jar"

# 1. 进入项目目录，拉取代码
cd $BACK_DIR || exit
git pull origin main

# 2. Maven打包（后端编译）
mvn clean package -Dmaven.test.skip=true

# 3. 停止旧进程
PID=$(ps -ef | grep $JAR_NAME | grep -v grep | awk '{print $2}')
if [ -n "$PID" ]; then
  kill -9 $PID
fi

# 4. 启动新服务
nohup java -jar target/$JAR_NAME > app.log 2>&1 &
echo "后端部署完成"

步骤 2：编写前端部署脚本（Vue/React）

前端打包后丢到 Nginx 目录，新建 /home/deploy/deploy_frontend.sh

#!/bin/bash
# 前端部署脚本
FRONT_DIR="/home/project/frontend"
NGINX_WEB="/usr/share/nginx/html"

cd $FRONT_DIR || exit
git pull origin main

# 安装依赖+打包
npm install
npm run build

# 覆盖Nginx静态资源
rm -rf $NGINX_WEB/*
cp -r dist/* $NGINX_WEB/
echo "前端部署完成"

步骤 3：赋予脚本执行权限

chmod +x /home/deploy/deploy_backend.sh
chmod +x /home/deploy/deploy_frontend.sh

步骤 4：搭建 WebHook 监听服务（Python 极简服务）

作用：仓库代码推送后，回调服务器接口 ，执行部署脚本。 新建 /home/deploy/webhook.py

from flask import Flask, request
import subprocess

app = Flask(__name__)

# 后端触发接口
@app.route('/deploy/backend', methods=['POST'])
def deploy_back():
    subprocess.Popen("/home/deploy/deploy_backend.sh", shell=True)
    return "Backend Deploy Start", 200

# 前端触发接口
@app.route('/deploy/frontend', methods=['POST'])
def deploy_front():
    subprocess.Popen("/home/deploy/deploy_frontend.sh", shell=True)
    return "Frontend Deploy Start", 200

if __name__ == '__main__':
    # 监听0.0.0.0:8888
    app.run(host="0.0.0.0", port=8888)

后台常驻运行：

nohup python3 /home/deploy/webhook.py > webhook.log 2>&1 &

步骤 5：仓库配置 WebHook

1. 打开 Gitee/GitHub 项目 → 管理 → WebHook
2. 填写 URL：
   • 后端：http://服务器公网IP:8888/deploy/backend
   • 前端：http://服务器公网IP:8888/deploy/frontend
3. 触发事件：Push 事件，保存。

测试：本地 git push，服务器自动拉代码、打包、部署。

---

四、方案 2：GitHub Actions 自动部署（云上常用）

代码托管在 GitHub，无需服务器装额外服务，云端流水线打包 + 推送到服务器。

核心思路

1. GitHub Actions 拉取代码、前端 / 后端打包
2. 通过 ssh 连接云服务器，上传包、重启服务
3. 配置仓库密钥（服务器账号密码 / 密钥）

1. 配置仓库 Secrets

进入仓库 → Settings → Secrets and variables → Actions → New secret 添加两个密钥：

• SERVER_HOST：服务器公网 IP
• SERVER_SSH_KEY：服务器 SSH 私钥（免密登录）

2. 新建流水线配置文件

仓库根目录创建 .github/workflows/deploy.yml

示例 1：前端（Vue）+ Nginx 部署

name: Frontend Auto Deploy
on:
  push:
    branches: [ main ] # 推送main分支触发

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装Node
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: 安装依赖 & 打包
        run: |
          npm install
          npm run build

      - name: 部署到服务器
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "dist/"
          target: "/usr/share/nginx/html"
          rm: true # 先清空目录

示例 2：后端 Java (SpringBoot) 部署

name: Backend Auto Deploy
on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 配置JDK
        uses: actions/setup-java@v4
        with:
          java-version: 17
          distribution: 'temurin'
          cache: maven

      - name: Maven打包
        run: mvn clean package -DskipTests

      - name: 上传Jar包到服务器
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "target/*.jar"
          target: "/home/project/backend"

      - name: 远程执行重启命令
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            cd /home/project/backend
            pkill -f 'java -jar' || true
            nohup java -jar app.jar > app.log 2>&1 &

推送代码后，Actions 自动执行打包、上传、重启。

---

五、方案 3：Jenkins 自动部署（企业主流）

适合：多环境、多项目、权限管控、复杂流水线。

核心步骤

1. 服务器安装 Jenkins + 必要插件（Git、Maven、Node、Publish over SSH）
2. 全局配置：JDK、Maven、Node、SSH 服务器信息
3. 新建任务：
   • 源码管理：绑定 Git 仓库地址、分支
   • 构建触发器：勾选 轮询 SCM / 配置 Git WebHook 触发
   • 构建步骤：
     • 前端：npm install && npm run build
     • 后端：mvn clean package
   • 构建后操作：通过 SSH 把包传到业务服务器，执行重启脚本

关键配置要点

• 开启 WebHook 触发 ：Jenkins 地址 + 路径 http://JenkinsIP:8080/github-webhook/ 填到仓库 WebHook
• 区分测试 / 生产环境：Jenkins 多任务 + 不同服务器分组
• 配置构建保留日志、备份历史包，方便回滚

---

六、前端 / 后端部署特殊注意点

前端（静态资源）

1. 打包前设置环境变量（接口地址区分测试 / 生产）
2. Nginx 配置缓存策略，避免旧资源残留
3. 打包加 hash 文件名，解决浏览器缓存

后端（服务端）

1. 先停止再启动，避免端口占用
2. 打包跳过测试：-Dmaven.test.skip=true / --skip-tests
3. 日志重定向、进程守护（可搭配 systemd 托管服务，比 nohup 更稳定）
4. 重要项目增加版本备份、一键回滚脚本

---

七、推荐落地顺序

1. 个人 / 小型项目：优先 WebHook + Shell（最快上手）
2. 代码在 GitHub/Gitee：优先 GitHub Actions / Gitee Go（零运维）
3. 企业多项目、多环境、私有化仓库：使用 Jenkins / GitLab CI/CD