【前端 DevOps】GitHub Actions 与 GitLab CI 实战：实现前端项目的自动化测试与部署

网罗开发 （小红书、快手、视频号同名）

  大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：极星会首批签约作者

摘要

本文将详细介绍如何为前端项目配置 CI/CD 流程，结合 GitHub Actions 或 GitLab CI 实现代码质量检查、单元测试、打包优化和自动化部署。通过实际代码示例，帮助开发者快速掌握前端 CI/CD 的最佳实践，提升开发效率和代码质量。

引言

在现代前端开发中，持续集成和持续部署（CI/CD）已成为不可或缺的环节。通过自动化流程，开发者可以快速发现代码问题、优化构建性能，并高效部署到生产环境。本文将基于 GitHub Actions 和 GitLab CI，提供一套完整的前端 CI/CD 解决方案，涵盖代码质量检查、单元测试、打包优化和部署到 Vercel 或 Netlify。

CI/CD 简介

CI/CD 是持续集成（Continuous Integration）和持续部署（Continuous Deployment）的缩写，旨在通过自动化流程提高开发效率和代码质量。对于前端项目，CI/CD 可以：

• 自动运行代码质量检查（如 ESLint、Prettier）。
• 执行单元测试和集成测试。
• 优化构建流程（如使用 Vite 或 Webpack）。
• 自动部署到云平台（如 Vercel、Netlify）。

配置 GitHub Actions 实现 CI/CD

GitHub Actions 是 GitHub 提供的 CI/CD 工具，支持通过 YAML 文件定义工作流。

创建 GitHub Actions 工作流

在项目根目录下创建 .github/workflows/ci-cd.yml 文件，定义 CI/CD 流程。

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run Prettier
        run: npm run format

      - name: Run unit tests
        run: npm test

  build-and-deploy:
    runs-on: ubuntu-latest
    needs: lint-and-test
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

配置 Vercel 部署

1. 在 Vercel 官网创建项目并获取 VERCEL_TOKEN、VERCEL_ORG_ID 和 VERCEL_PROJECT_ID。
2. 将这些值添加到 GitHub 仓库的 Secrets 中。

配置 GitLab CI 实现 CI/CD

GitLab CI 是 GitLab 提供的 CI/CD 工具，通过 .gitlab-ci.yml 文件定义流程。

创建 GitLab CI 配置文件

在项目根目录下创建 .gitlab-ci.yml 文件。

stages:
  - lint
  - test
  - build
  - deploy

lint:
  stage: lint
  image: node:18
  script:
    - npm install
    - npm run lint
    - npm run format

test:
  stage: test
  image: node:18
  script:
    - npm install
    - npm test

build:
  stage: build
  image: node:18
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: node:18
  script:
    - npm install -g vercel
    - vercel --token $VERCEL_TOKEN --prod
  only:
    - main

配置 Vercel 部署

1. 在 Vercel 官网创建项目并获取 VERCEL_TOKEN。
2. 将 VERCEL_TOKEN 添加到 GitLab 仓库的 CI/CD 变量中。

---

代码示例：前端项目配置

以下是一个简单的前端项目配置示例，包含 ESLint、Prettier、Jest 和 Vite。

package.json 配置

{
  "name": "frontend-ci-cd-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write src",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^4.0.0",
    "eslint": "^8.0.0",
    "prettier": "^2.0.0",
    "jest": "^29.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0"
  }
}

ESLint 配置文件（.eslintrc.js）

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {},
};

4.3 Jest 配置文件（jest.config.js）

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};

QA 环节

Q: 如何优化构建性能？
A: 可以使用 Vite 或 Webpack 的代码分割、Tree Shaking 和缓存优化功能。

Q: 如何确保单元测试覆盖率？
A: 在 Jest 配置中添加 coverage 选项，并在 CI 流程中设置覆盖率阈值。

Q: 如何部署到 Netlify？
A: 使用 Netlify 提供的 GitHub Actions 或 GitLab CI 插件，配置 NETLIFY_AUTH_TOKEN 和 NETLIFY_SITE_ID。

总结

通过 GitHub Actions 或 GitLab CI，前端开发者可以轻松实现代码质量检查、单元测试、打包优化和自动化部署。本文提供的代码示例和配置方案，帮助开发者快速搭建 CI/CD 流程，提升开发效率和代码质量。

未来，前端 CI/CD 可以进一步结合以下技术：

• 容器化部署：使用 Docker 和 Kubernetes 实现更灵活的部署。
• 性能监控：集成 Lighthouse 或 Sentry，实时监控应用性能。
• AI 辅助优化：利用 AI 工具自动优化构建配置和测试用例。

参考资料

• GitHub Actions 官方文档：https://docs.github.com/en/actions
• GitLab CI 官方文档：https://docs.gitlab.com/ee/ci/
• Vite 官方文档：https://vitejs.dev/
• Jest 官方文档：https://jestjs.io/
• Vercel 官方文档：https://vercel.com/docs