AI全栈项目实战案例一基于 GitHub Actions 端到端工程化落地案例定位项目名称AI Chat 全栈应用前端 ViteVue3 后端 Node.js AI 大模型接口调用 Docker 容器化 GitHub CI/CD 全自动流水线项目架构前后端分离 容器化部署 自动化测试/构建/镜像打包/多环境部署 MCP AI 流水线赋能适用场景个人/团队 AI 产品、企业内部 AI 问答助手、大模型私有化部署前端控制台整条链路覆盖代码管理 → 本地校验 → PR 门禁 → 自动化测试 → 构建打包 → Docker 镜像构建 → GHCR 制品仓库 → 测试环境自动部署 → 生产环境人工审批部署 → AI 代码审查MCP一、项目整体架构ASCII 拓扑图技术栈明细前端框架Vue3 ViteUIElement PlusAI 能力对接 OpenAI / 私有大模型 HTTP 接口测试Vitest 单元测试 Playwright E2E后端框架Node.js ExpressAI 服务大模型请求转发、会话上下文管理、权限校验测试Vitest 集成测试工程化部署代码管理GitHub Flow 分支策略CI/CDGitHub Actions容器Docker Docker Compose制品仓库GitHub Container RegistryGHCR部署前端 Vercel、后端 云服务器/Docker/K8sAI 增强MCP 协议接入 AI 做自动代码评审二、项目目录结构ai-fullstack-chat/ ├── frontend/ # 前端 ViteVue3 ├── 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 落地分支规则main主干永远可部署保护分支禁止直接 Push功能分支feature/xxx、fix/xxx所有变更必须提PR → 代码审查 → CI 通过 → 合并 mainPR 强制门禁必须通过 ESLint 代码规范校验单元测试覆盖率 ≥75%Playwright 核心 E2E 用例全过至少 1 人 Code Review 通过MCP AI 自动评审无高危问题四、第一步本地提交校验Husky Lint-Staged1. 安装依赖npminstallhusky lint-staged eslint prettier commitlint/cli commitlint/config-conventional-D2. 配置 Git Hooksnpx huskyinstallnpx huskyadd.husky/pre-commitnpx lint-stagednpx huskyadd.husky/commit-msgnpx commitlint --edit$13. 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/checkoutv4-name:Setup Nodeuses:actions/setup-nodev4with:node-version:20cache:npmcache-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/checkoutv4-name:Setup Docker Buildxuses:docker/setup-buildx-actionv3-name:Login to GHCRuses:docker/login-actionv3with:registry:ghcr.iousername:${{github.actor}}password:${{secrets.GITHUB_TOKEN}}# 后端镜像构建-name:Build Backend Imageuses:docker/build-push-actionv5with:context:./backendfile:./docker/Dockerfile.backendpush:truetags:ghcr.io/${{github.repository_owner}}/ai-chat-backend:${{github.sha}}cache-from:typeghacache-to:typegha,modemax# 前端镜像构建-name:Build Frontend Imageuses:docker/build-push-actionv5with:context:./frontendfile:./docker/Dockerfile.frontendpush:truetags:ghcr.io/${{github.repository_owner}}/ai-chat-frontend:${{github.sha}}cache-from:typeghacache-to:typegha,modemax七、第四步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 --frombuilder /app/dist ./dist COPY --frombuilder /app/package*.json ./ RUN npm ci --onlyproduction 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 --frombuilder /app/dist /usr/share/nginx/html COPY docker/nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]八、第五步本地开发 Docker Composedocker-compose.ymlversion:3.8services:frontend:build:context:./frontenddockerfile:../docker/Dockerfile.frontendports:-80:80depends_on:-backendbackend:build:context:./backenddockerfile:../docker/Dockerfile.backendports:-3000:3000environment:-AI_MODEL_URLhttps://api.openai.com/v1-AI_API_KEY${AI_API_KEY}本地一键启动docker-compose up -d九、第六步多环境自动部署流水线逻辑合并 main → 自动部署测试环境无需人工审批生产环境需在 GitHub Environments 设置人工审批后部署前端自动部署到 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/checkoutv4-name:MCP AI 代码评审uses:./your-mcp-actionwith:model:claude-3.5github-token:${{secrets.GITHUB_TOKEN}}env:MCP_API_KEY:${{secrets.MCP_API_KEY}}十一、整条链路运行闭环总结开发者拉分支写 AI 前后端代码、本地 Git Hooks 自动校验提 PR → 自动触发 Lint/单元测试/E2E 测试CI 校验不通过直接阻止合并MCP AI 自动评审代码评审通过合并 main → 自动构建前后端 Docker 镜像镜像自动推送到 GHCR 制品仓库自动部署测试环境验证 AI 问答功能人工审批后部署生产前端 Vercel、后端容器服务更新全程无人工打包、无手动服务器登录发布十二、可直接复用价值你可以把这个案例直接作为AI 全栈项目工程化模板团队 GitHub CI/CD 标准流水线范本教学演示从代码到部署的完整 DevOps 流程后续扩展接入 K8s、监控告警、日志聚合、更多 AI MCP 能力