当前位置： 首页 > news >正文

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

news 2026/5/7 0:59:54

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. 安装依赖

npminstallhusky lint-staged eslint prettier @commitlint/cli @commitlint/config-conventional-D

2. 配置 Git Hooks

npx huskyinstallnpx huskyadd.husky/pre-commit"npx lint-staged"npx huskyadd.husky/commit-msg"npx commitlint --edit$1"

3. package.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 轻量化测试

name:PR Checkon:pull_request:branches:[main]types:[opened,synchronize,reopened]jobs:lint-and-test:runs-on:ubuntu-lateststrategy:matrix:dir:[frontend,backend]steps:-uses:actions/checkout@v4-name:Setup Nodeuses:actions/setup-node@v4with:node-version:20cache:'npm'cache-dependency-path:${{matrix.dir}}/package-lock.json-name:Install Depsworking-directory:./${{matrix.dir}}run:npm ci-name:Lint Codeworking-directory:./${{matrix.dir}}run:npm run lint-name:Unit Testworking-directory:./${{matrix.dir}}run:npm run test:unit

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

文件：.github/workflows/ci-build.yml
触发：合并到 main 分支自动执行
流程：前端构建产物 → 前后端 Docker 多阶段构建 → 推送镜像到 GitHub 容器仓库

name:CI Build & Push Imageon:push:branches:[main]jobs:build-and-push:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-name:Setup Docker Buildxuses:docker/setup-buildx-action@v3-name:Login to GHCRuses:docker/login-action@v3with:registry:ghcr.iousername:${{github.actor}}password:${{secrets.GITHUB_TOKEN}}# 后端镜像构建-name:Build Backend Imageuses:docker/build-push-action@v5with:context:./backendfile:./docker/Dockerfile.backendpush:truetags:ghcr.io/${{github.repository_owner}}/ai-chat-backend:${{github.sha}}cache-from:type=ghacache-to:type=gha,mode=max# 前端镜像构建-name:Build Frontend Imageuses:docker/build-push-action@v5with:context:./frontendfile:./docker/Dockerfile.frontendpush:truetags:ghcr.io/${{github.repository_owner}}/ai-chat-frontend:${{github.sha}}cache-from:type=ghacache-to:type=gha,mode=max

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

后端 docker/Dockerfile.backend

# 构建阶段 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

# 构建阶段 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

version:'3.8'services:frontend:build:context:./frontenddockerfile:../docker/Dockerfile.frontendports:-"80:80"depends_on:-backendbackend:build:context:./backenddockerfile:../docker/Dockerfile.backendports:-"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 镜像更新服务

部署工作流核心片段

name:Deployon:workflow_run:workflows:["CI Build & Push Image"]branches:[main]types:[completed]jobs:deploy-test:runs-on:ubuntu-latestenvironment:teststeps:-name:拉取镜像更新测试环境服务run:|docker-compose pull docker-compose up -ddeploy-prod:runs-on:ubuntu-latestenvironment:production# 配置人工审批needs:deploy-teststeps:-name:生产环境部署run:./deploy-prod.sh

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

能力

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

极简 MCP 接入 Action 配置

name:AI Code Reviewon:[pull_request]jobs:ai-review:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-name:MCP AI 代码评审uses:./your-mcp-actionwith:model:claude-3.5github-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 能力
http://www.jsqmd.com/news/766972/

相关文章：

  • 2026版AI产品经理速成图：6周逆袭大厂岗，掌握核心能力+实战项目！
  • 3分钟搞定TranslucentTB：Windows任务栏透明美化终极指南
  • 终极解决方案：用easy-topo免费创建专业级网络拓扑图
  • 2026年5月浙江微调平开锁厂家盘点：如何甄选可靠的合作伙伴 - 2026年企业推荐榜
  • 告别静态图！用R包networkD3把WGCNA基因网络做成可拖拽的交互网页
  • 基于MCP协议的智能邮件营销自动化：从协议解析到实战部署
  • 别再死记公式了！用MATLAB仿真带你直观理解BUCK电路的电感与电容选型
  • VTC-R1视觉化压缩技术解决长文本理解瓶颈
  • 终极解决方案：Defender Control——开源免费的Windows Defender控制工具
  • 告别电脑格式化：在STM32F407上深度玩转FATFS的f_mkfs，实现SD卡自定义格式化
  • NBTExplorer终极指南：如何快速掌握Minecraft数据可视化编辑工具
  • Flutter 三方库 Firebase Messaging 鸿蒙化适配与实战指南（权限检查+设备Token获取全覆盖）
  • 边缘设备Docker守护进程崩溃频发？20年SRE总结的4类硬件感知型配置陷阱，第3类99%工程师从未排查过
  • 2026年安卓核心代码保护应用加固公司怎么选？技术负责人深度拆解5家服务商能力差异
  • Agent 一接导出中心就开始把旧报表当新结果：从 Export Job Claim 到 Artifact Freshness Fence 的工程实战
  • Weaviate向量数据库实战：从核心原理到部署调优全解析
  • 深度解析内核级硬件伪装技术：EASY-HWID-SPOOFER的底层实现与应用策略
  • Anolis OS 8.8 服务器环境搭建：从零搞定Nginx、Redis、JDK8和Tomcat9（附依赖包安装避坑指南）
  • 仅限持牌机构获取：Docker金融调试私有镜像仓库调试协议（含FIPS 140-2加密组件验证流程、国密SM4容器化调试实录）
  • 告别鼠标手！用AxGlyph画示意图，我只用键盘和滚轮（附图形微调秘籍）
  • KL散度近似计算与Dropout扰动优化实践
  • 隐私计算技术图谱：数据“可用不可见”的实现路径
  • 电气工程论文降AI工具免费推荐：2026年电力系统自动化研究4.8元降AI一次过完整方案
  • 2026年安卓运行时保护应用加固服务商怎么选？RASP与VMP技术实战效果实测
  • ScintillaNET架构深度解析：构建企业级.NET代码编辑解决方案
  • 3步搞定Windows安卓应用安装：轻量级APK安装器的技术解析与实践指南
  • i茅台智能预约系统：从微服务架构到容器化部署的完整解决方案
  • 当音乐被锁在数字牢笼里：用qmc-decoder重获音频自由
  • 5分钟极速指南：如何用开源工具快速恢复加密压缩包密码
  • 10分钟创建专属AI音色：Retrieval-based-Voice-Conversion-WebUI终极指南