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

前端CI/CD 流程

news 2025/11/16 5:34:36

企业级 Vue3 + Docker + GitHub Actions + PM2 + Nginx CI/CD 流程 完整落地模板化，包含：

项目骨架
Dockerfile + nginx.conf
PM2 ecosystem
GitHub Actions ci-cd.yml
ESLint + Prettier + commitlint
多环境配置（dev/test/prod）
敏感文件保护 + MR 审批

下面是详细文件结构和内容。

一、项目目录结构

vue3-project/
├── src/
│   ├── main.ts
│   ├── App.vue
│   └── components/
├── public/
├── Dockerfile
├── nginx.conf
├── ecosystem.config.js
├── .github/
│   └── workflows/
│       └── ci-cd.yml
├── package.json
├── tsconfig.json
├── .eslintrc.js
├── .prettierrc
├── .commitlintrc.js
├── .env.development
├── .env.test
├── .env.production
└── README.md

二、Dockerfile

# Stage 1: Build
FROM node:18 AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install -g pnpm
RUN pnpm install
COPY . .
RUN pnpm build# Stage 2: Production
FROM nginx:stable-alpine
RUN rm -rf /etc/nginx/conf.d/*
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

三、nginx.conf

server {listen 80;server_name localhost;root /usr/share/nginx/html;index index.html;location / {try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://127.0.0.1:3000/;proxy_set_header Host $host;}
}

四、PM2 ecosystem.config.js

module.exports = {apps: [{name: "vue3-client",script: "docker",args: "run -p 80:80 --name vue3-client --rm registry.com/vue3-client:latest",exec_mode: "fork",autorestart: true}]
};

五、GitHub Actions CI/CD `.github/workflows/ci-cd.yml`

name: Vue3 CI/CD Pipelineon:push:branches:- main- develop- release/*pull_request:env:REGISTRY: registry.comIMAGE_NAME: vue3-clientDOCKER_TAG: latestjobs:build:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v3- name: Setup Node.jsuses: actions/setup-node@v3with:node-version: 18- name: Install pnpmrun: npm install -g pnpm- name: Install dependenciesrun: pnpm install- name: Lint coderun: pnpm lint- name: Type checkrun: pnpm type-check- name: Build Vue projectrun: pnpm build- name: Login Docker registryrun: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin- name: Build Docker imagerun: docker build -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.DOCKER_TAG }} .- name: Push Docker imagerun: docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.DOCKER_TAG }}deploy:needs: buildruns-on: ubuntu-latestif: github.ref == 'refs/heads/main'steps:- name: SSH Deployuses: appleboy/ssh-action@v0.1.7with:host: ${{ secrets.SERVER_HOST }}username: ${{ secrets.SERVER_USER }}key: ${{ secrets.SERVER_KEY }}script: |docker pull registry.com/vue3-client:latestpm2 delete vue3-client || truepm2 start ecosystem.config.jspm2 save

develop → 自动部署测试环境
release/* → 自动部署预发
main → 手动触发生产部署

六、ESLint + Prettier + Commitlint

`.eslintrc.js`

module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/vue3-essential", "eslint:recommended", "prettier"],parserOptions: {ecmaVersion: 2020,},rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"},
};

`.prettierrc`

{"semi": true,"singleQuote": true,"printWidth": 100,"tabWidth": 2,"trailingComma": "es5"
}

`.commitlintrc.js`

module.exports = { extends: ["@commitlint/config-conventional"] };

七、多环境配置

.env.development

VITE_API_URL=https://dev.example.com/api

.env.test

VITE_API_URL=https://test.example.com/api

.env.production

VITE_API_URL=https://api.example.com

在 vite.config.ts 中根据 mode 动态加载。

八、敏感文件保护

.github/workflows/ci-cd.yml 中可以加校验敏感文件：

CHANGED=$(git diff --name-only origin/$GITHUB_BASE_REF)
PROTECTED="Dockerfile|nginx.conf|ecosystem.config.js"if echo "$CHANGED" | grep -E "$PROTECTED"; thenecho "❌ Protected files modified!"exit 1
fi

GitHub 分支保护：

main → Require pull request reviews → 必须审批
develop → Optional auto deploy

九、完整企业 CI/CD 流程

开发 push develop/release/main↓
GitHub Actions CI1. 安装依赖2. ESLint / TypeCheck3. 构建 Vue34. 检查是否修改敏感文件（保护机制）↓
MR 审核（CODEOWNERS 自动指派）↓
审核通过 → 合并到 develop↓5. Docker build + push↓
CD 自动部署- develop → 测试环境- release/* → 预发环境- main → 手动生产↓
服务器- 拉取 Docker 镜像- PM2 重启容器- Nginx 提供服务

特点：