基于 GitHub Actions 端到端工程化落地——AI全栈项目实战案例

GISer_Jing2026-05-07 8:10

AI全栈项目实战案例一：基于 GitHub Actions 端到端工程化落地

案例定位

项目名称 ：AI Chat 全栈应用（前端 Vite+Vue3 + 后端 Node.js + AI 大模型接口调用 + Docker 容器化 + GitHub CI/CD 全自动流水线）
项目架构 ：前后端分离 + 容器化部署 + 自动化测试/构建/镜像打包/多环境部署 + MCP AI 流水线赋能
适用场景 ：个人/团队 AI 产品、企业内部 AI 问答助手、大模型私有化部署前端控制台
整条链路覆盖：代码管理 → 本地校验 → PR 门禁 → 自动化测试 → 构建打包 → Docker 镜像构建 → GHCR 制品仓库 → 测试环境自动部署 → 生产环境人工审批部署 → AI 代码审查（MCP）

一、项目整体架构（ASCII 拓扑图）

技术栈明细

前端

  • 框架：Vue3 + Vite
  • UI：Element Plus
  • AI 能力：对接 OpenAI / 私有大模型 HTTP 接口
  • 测试：Vitest 单元测试 + Playwright E2E

后端

  • 框架：Node.js + Express
  • AI 服务：大模型请求转发、会话上下文管理、权限校验
  • 测试：Vitest 集成测试

工程化&部署

  • 代码管理：GitHub Flow 分支策略
  • CI/CD：GitHub Actions
  • 容器：Docker + Docker Compose
  • 制品仓库：GitHub Container Registry（GHCR）
  • 部署：前端 Vercel、后端 云服务器/Docker/K8s
  • AI 增强：MCP 协议接入 AI 做自动代码评审

二、项目目录结构

复制代码 
ai-fullstack-chat/
├── frontend/                # 前端 Vite+Vue3
├── backend/                 # 后端 Node.js
├── docker/                  # 各环境 Dockerfile
│   ├── Dockerfile.frontend
│   └── Dockerfile.backend
├── docker-compose.yml       # 本地开发编排
├── .github/
│   └── workflows/
│       ├── pr-check.yml     # PR 代码检查+测试门禁
│       ├── ci-build.yml     # 构建+镜像打包+推送
│       └── deploy.yml       # 多环境部署流水线
├── playwright/              # E2E 测试用例
└── README.md

三、代码管理规范（GitHub Flow 落地）

分支规则

  1. main：主干永远可部署，保护分支，禁止直接 Push
  2. 功能分支：feature/xxx、fix/xxx
  3. 所有变更必须提 PR → 代码审查 → CI 通过 → 合并 main

PR 强制门禁

  • 必须通过 ESLint 代码规范校验
  • 单元测试覆盖率 ≥75%
  • Playwright 核心 E2E 用例全过
  • 至少 1 人 Code Review 通过
  • MCP AI 自动评审无高危问题

四、第一步：本地提交校验（Husky + Lint-Staged）

1. 安装依赖

bash 复制代码 
npm install husky lint-staged eslint prettier @commitlint/cli @commitlint/config-conventional -D

2. 配置 Git Hooks

bash 复制代码 
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx commitlint --edit $1"

3. package.json 配置

json 复制代码 
{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  },
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

作用：本地拦截不规范代码、不合规提交信息，从源头降低 CI 失败率。

五、第二步：PR 自动化检查流水线 .github/workflows/pr-check.yml

触发：新建 PR、推送代码到 PR 自动执行

包含：代码格式化检查、类型检查、单元测试、E2E 轻量化测试

yaml 复制代码 
name: PR Check

on:
  pull_request:
    branches: [ main ]
    types: [opened, synchronize, reopened]

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        dir: [frontend, backend]
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: ${{ matrix.dir }}/package-lock.json

      - name: Install Deps
        working-directory: ./${{ matrix.dir }}
        run: npm ci

      - name: Lint Code
        working-directory: ./${{ matrix.dir }}
        run: npm run lint

      - name: Unit Test
        working-directory: ./${{ matrix.dir }}
        run: npm run test:unit

六、第三步：CI 构建 + Docker 镜像打包 + 推送 GHCR

文件：.github/workflows/ci-build.yml

触发：合并到 main 分支自动执行

流程：前端构建产物 → 前后端 Docker 多阶段构建 → 推送镜像到 GitHub 容器仓库

yaml 复制代码 
name: CI Build & Push Image

on:
  push:
    branches: [ main ]

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Login to GHCR
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      # 后端镜像构建
      - name: Build Backend Image
        uses: docker/build-push-action@v5
        with:
          context: ./backend
          file: ./docker/Dockerfile.backend
          push: true
          tags: ghcr.io/${{ github.repository_owner }}/ai-chat-backend:${{ github.sha }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

      # 前端镜像构建
      - name: Build Frontend Image
        uses: docker/build-push-action@v5
        with:
          context: ./frontend
          file: ./docker/Dockerfile.frontend
          push: true
          tags: ghcr.io/${{ github.repository_owner }}/ai-chat-frontend:${{ github.sha }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

七、第四步：Dockerfile 多阶段构建最佳实践

后端 docker/Dockerfile.backend

dockerfile 复制代码 
# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段
FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package*.json ./
RUN npm ci --only=production

EXPOSE 3000
CMD ["node", "dist/main.js"]

前端 docker/Dockerfile.frontend

dockerfile 复制代码 
# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段 Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

八、第五步：本地开发 Docker Compose

docker-compose.yml

yaml 复制代码 
version: '3.8'
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: ../docker/Dockerfile.frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
      dockerfile: ../docker/Dockerfile.backend
    ports:
      - "3000:3000"
    environment:
      - AI_MODEL_URL=https://api.openai.com/v1
      - AI_API_KEY=${AI_API_KEY}

本地一键启动：docker-compose up -d

九、第六步：多环境自动部署流水线

逻辑

  1. 合并 main → 自动部署测试环境（无需人工审批）
  2. 生产环境需在 GitHub Environments 设置人工审批后部署
  3. 前端自动部署到 Vercel，后端拉取 GHCR 镜像更新服务

部署工作流核心片段

yaml 复制代码 
name: Deploy

on:
  workflow_run:
    workflows: ["CI Build & Push Image"]
    branches: [main]
    types: [completed]

jobs:
  deploy-test:
    runs-on: ubuntu-latest
    environment: test
    steps:
      - name: 拉取镜像更新测试环境服务
        run: |
          docker-compose pull
          docker-compose up -d

  deploy-prod:
    runs-on: ubuntu-latest
    environment: production  # 配置人工审批
    needs: deploy-test
    steps:
      - name: 生产环境部署
        run: ./deploy-prod.sh

十、第七步：MCP 协议 AI 赋能流水线（自动代码评审）

能力

  • 自动读取 PR 变更代码
  • 基于 MCP 调用大模型
  • 自动输出代码漏洞、性能问题、AI 接口调用规范检查
  • 自动评论到 PR 评论区

极简 MCP 接入 Action 配置

yaml 复制代码 
name: AI Code Review
on: [pull_request]

jobs:
  ai-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: MCP AI 代码评审
        uses: ./your-mcp-action
        with:
          model: claude-3.5
          github-token: ${{ secrets.GITHUB_TOKEN }}
        env:
          MCP_API_KEY: ${{ secrets.MCP_API_KEY }}

十一、整条链路运行闭环总结

  1. 开发者拉分支写 AI 前后端代码、本地 Git Hooks 自动校验
  2. 提 PR → 自动触发 Lint/单元测试/E2E 测试
  3. CI 校验不通过直接阻止合并，MCP AI 自动评审代码
  4. 评审通过合并 main → 自动构建前后端 Docker 镜像
  5. 镜像自动推送到 GHCR 制品仓库
  6. 自动部署测试环境，验证 AI 问答功能
  7. 人工审批后部署生产，前端 Vercel、后端容器服务更新
  8. 全程无人工打包、无手动服务器登录发布

十二、可直接复用价值

你可以把这个案例直接作为：

  • AI 全栈项目工程化模板
  • 团队 GitHub CI/CD 标准流水线范本
  • 教学演示：从代码到部署的完整 DevOps 流程
  • 后续扩展：接入 K8s、监控告警、日志聚合、更多 AI MCP 能力
相关推荐
weixin_553654481 小时前
有没有一种可能，现在的大语言模型已经发展得接近极限了？
人工智能·语言模型·大模型
图灵农场1 小时前
SpringAI实用-RAG
人工智能
LienJack1 小时前
AI 架构设计有点菜，我写了个 Skill 给它补课
人工智能·架构
人工智能AI技术2 小时前
循环结构基础：for、while、递归性能对比
人工智能
盼小辉丶2 小时前
PyTorch强化学习实战（5）——PyTorch Ignite 事件驱动机制与实践
人工智能·pytorch·python·强化学习
eastyuxiao10 小时前
思维导图拆解项目范围 3 个真实落地案例
大数据·运维·人工智能·流程图
风落无尘10 小时前
《智能重生：从垃圾堆到AI工程师》——第五章 代码与灵魂
服务器·网络·人工智能
冬奇Lab10 小时前
RAG 系列（八）：RAG 评估体系——用数据说话
人工智能·llm
landyjzlai11 小时前
蓝迪哥玩转Ai(8)---端侧AI:RK3588 端侧大语言模型（LLM）开发实战指南
人工智能·python
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03Codex 接入 DeepSeek API 完整配置文档04零基础教你claude code 接入 deepseek V405Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南06CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录07【AI】2026 年具身智能模型和世界模型总结08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09CC-Switch & Claude 基于 Linux 服务器安装使用指南10几个好用的ip纯净度检测网站