JavaScript 项目的 CI/CD：GitHub Actions 完全指南

引言：为什么 JavaScript 项目需要 CI/CD

基于 Node.js 的现代 JavaScript 应用程序开发是一个复杂的过程，包括编写代码、测试、构建和部署。如果没有自动化，这些步骤将手动执行，从而导致错误、延迟和产品质量下降。CI/CD（持续集成 / 持续交付） 是一种 DevOps 实践，可自动执行代码的构建、测试和部署。

GitHub Actions 是 GitHub 的内置工具，允许您创建工作流来自动执行任务。它非常适合 JavaScript 项目，因为它支持 Node.js、npm、Yarn 以及许多流行的服务。在本文中，我们将介绍如何使用 GitHub Actions 为您的 JavaScript 项目设置一个完整的 CI/CD 管道。

您将了解到：如何运行测试、如何构建应用程序、如何部署到服务器或云平台，以及如何避免常见错误。

JavaScript 的 GitHub Actions 基础

什么是 GitHub Actions？

GitHub Actions 是一个用于自动化工作流的平台。您可以在 YAML 文件中描述一系列步骤，并将其放置在仓库中（通常是 .github/workflows/main.yml）。每当事件（例如 push、pull request）发生时，就会触发一个工作流。

工作流由在 runner（虚拟机）上执行的 jobs（任务）组成。对于 JavaScript 项目，通常使用预装了 Node.js 的 Ubuntu runner。

Node.js 的基本工作流

让我们从一个简单的工作流开始，它在每次 push 或 pull request 时运行测试。创建文件 .github/workflows/ci.yml：

name: CI для JavaScript

on:  push:    branches: [ main, develop ]  pull_request:    branches: [ main ]

jobs:  test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [16.x, 18.x, 20.x]

    steps:    - uses: actions/checkout@v4    - name: Использовать Node.js ${{ matrix.node-version }}      uses: actions/setup-node@v4      with:        node-version: ${{ matrix.node-version }}        cache: 'npm'    - run: npm ci    - run: npm test    - run: npm run build --if-present

这个工作流执行以下操作：

• 触发器： 在 push 到 main/develop 或向 main 发起 pull request 时触发。
• 版本矩阵： 在 Node.js 16、18、20 上进行测试——这保证了兼容性。
• 缓存： cache: 'npm' 加速依赖安装。
• 命令： npm ci（干净安装）、npm test（测试）、npm run build（构建，如果存在）。

设置完整的 CI/CD 管道

现在让我们增加难度：添加代码检查、安全验证以及在测试成功后自动部署。

步骤 1：代码检查和格式化

为 ESLint 和 Prettier 添加一个 job。这保证了统一的代码风格：

jobs:  lint:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v4    - uses: actions/setup-node@v4      with:        node-version: '18.x'        cache: 'npm'    - run: npm ci    - run: npm run lint    - run: npx prettier --check .

在 package.json 中应该有 "lint" 和 "format" 脚本。示例：

{  "scripts": {    "lint": "eslint src/",    "format": "prettier --write ."  }}

步骤 2：依赖安全性

使用 npm audit 检查漏洞：

  security:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v4    - run: npm audit --audit-level=high

如果