每天一个前端小知识 Day 19 - 前端 CI/CD 自动化部署体系全流程

前端 CI/CD 自动化部署体系全流程

---

CI/CD 是什么？

概念	解释
CI（持续集成）	自动构建 + 自动测试 + 合并提交
CD（持续部署）	自动部署到测试/生产服务器

目标是：让代码一提交，自动构建 → 测试 → 上线 → 通知，提高发布效率和质量。

---

一、完整的前端部署流程概览

1. 提交代码到 Git 仓库（如 GitHub）
       ↓
2. 触发 CI 流程（如 GitHub Actions）
       ↓
3. 安装依赖、构建产物（npm run build）
       ↓
4. 自动化测试（unit test / e2e）
       ↓
5. 构建通过后自动部署到：
   - 云服务（如 Vercel, Netlify）
   - 静态服务器（如 Nginx）
   - 云平台（如阿里云、腾讯云、Docker+K8s）

---

二、使用 GitHub Actions 实现 CI/CD（适合 Vue/React 项目）

✅ 示例：React 项目部署到 Vercel/静态服务器

.github/workflows/deploy.yml

name: CI/CD Frontend Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node
      uses: actions/setup-node@v3
      with:
        node-version: 18

    - name: Install dependencies
      run: npm ci

    - name: Run tests
      run: npm test

    - name: Build project
      run: npm run build

    - name: Deploy to Server (using SCP)
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        password: ${{ secrets.SERVER_PWD }}
        source: "dist/"
        target: "/var/www/your-project"

---

三、选择前端部署平台对比

方案	优势	适合场景
Vercel	免费、自动绑定 GitHub、支持 SSR	React/Next.js、文档项目
Netlify	免费、支持函数/构建 Hook	静态博客、VuePress 项目
自建服务器	灵活、可控性强	企业/大型系统
Docker+Nginx	标准化部署，环境一致性强	多人协作、集群部署

---

四、使用 Docker 容器部署前端项目

Docker 让构建 + 运行环境一致，可打包为镜像，部署到任何云平台。

✅ 示例 Dockerfile

# 构建阶段
FROM node:18 AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build

# 部署阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

docker build -t my-frontend-app .
docker run -p 80:80 my-frontend-app

---

五、处理多环境构建（开发 / 测试 / 生产）

在项目中通常会有 .env.development, .env.production 等环境配置：

# .env.production
VITE_API_URL=https://api.prod.com

配合 Vite/Webpack 自动注入：

const api = import.meta.env.VITE_API_URL

在 CI 流程中动态切换：

run: npm run build -- --mode=production

---

六、上线通知机制（可选但加分）

可通过 GitHub Actions + 企业微信 / 飞书 / Slack 机器人通知：

- name: Notify WeChat
  uses: tim-actions/notify-wecom@v1
  with:
    webhook: ${{ secrets.WECOM_HOOK }}
    content: '✅ 项目构建部署成功：${{ github.repository }}'

---

面试高频问题拆解

Q1：你们前端项目是如何部署上线的？

答：

使用 GitHub Actions 实现 CI/CD，包括自动安装依赖、单元测试、构建产物，构建成功后通过 SCP/Docker 推送到服务器，或集成到 Vercel/Netlify 上线。

---

Q2：如何处理多环境构建与部署？

答：

使用多套 .env 文件，构建命令中带 --mode 控制；部署脚本中根据分支或 tag 区分部署目标服务器。

---

Q3：前端为什么需要 Docker？

• 避免构建环境差异；
• 支持一键部署上线；
• 能与后端统一部署策略（如 Kubernetes、CI/CD 流水线）；

---

✅ 总结

掌握前端 CI/CD 流程，不只是构建自动化，更是工程化能力的体现。会配置 GitHub Actions、Docker、Vercel、测试部署流程，在面试中能体现出你有实际项目管理和团队协作意识，这是迈向高级前端的重要一步。