在持续集成中使用 Direct Upload

Cloudflare Pages 支持直接上传预构建资源，允许你为应用使用自定义构建步骤，并通过 Wrangler 部署到 Pages。本指南将教你如何使用持续集成将应用部署到 Pages。

使用 Wrangler 部署

在项目目录中，安装 Wrangler，以便通过运行以下命令部署预构建资源文件夹：

# Publish created project
$ CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>

从 Cloudflare 获取凭据

生成 API 令牌

要生成 API 令牌：

在 Cloudflare 仪表板中，前往 API Tokens（API 令牌） 页面。
Go to Account API tokens ↗
选择 Create Token（创建令牌）。
在 Custom Token（自定义令牌） 下，选择 Get started（开始使用）。
在 Token name（令牌名称） 字段中为 API 令牌命名。
在 Permissions（权限） 下，选择 Account、Cloudflare Pages 和 Edit：
选择 Continue to summary（继续到摘要） > Create Token（创建令牌）。

创建 API 令牌后，你可以使用它从持续集成平台推送项目。

获取项目账户 ID

要查找账户 ID，请前往 Cloudflare 仪表板中的 Zone Overview 页面。

Go to Overview ↗

在右侧菜单的 API 部分找到账户 ID。

若尚未添加 zone，通过选择 Add（添加） > Connect a domain（连接域名） 添加。你可以从 Cloudflare 注册商购买域名。

使用 GitHub Actions

GitHub Actions ↗ 是一个持续集成和持续交付 (CI/CD) 平台，允许你在使用 GitHub 时自动化构建、测试和部署流水线。你可以创建工作流，对仓库的每个 pull request 进行构建和测试，或将合并的 pull request 部署到生产环境。

设置项目后，你可以设置 GitHub Action 以使用 Wrangler 自动化后续部署。

将 Cloudflare 凭据添加到 GitHub secrets

在你设置的 GitHub Action 中，需要环境变量将项目推送到 Cloudflare Pages。要在项目 GitHub 仓库中添加这些环境变量的值：

前往 GitHub 中的项目仓库。
在仓库名称下，选择 Settings（设置）。
选择 Secrets（密钥） > Actions（操作） > New repository secret（新建仓库密钥）。
创建一个 secret，名称为 CLOUDFLARE_ACCOUNT_ID，值为 Cloudflare 账户 ID。
创建另一个 secret，名称为 CLOUDFLARE_API_TOKEN，值为 Cloudflare API 令牌。

将 Cloudflare 账户 ID 和 Cloudflare API 令牌的值分别添加为 CLOUDFLARE_ACCOUNT_ID 和 CLOUDFLARE_API_TOKEN。这确保这些 secret 安全，每次 Action 运行时都会访问它们。

设置工作流

在项目根目录创建 .github/workflows/pages-deployment.yaml 文件。.github/workflows/pages-deployment.yaml 文件将包含你在请求时指定的作业，即此处的 on: [push]。也可以是 pull request。有关 GitHub Actions 语法的详细说明，请参阅官方文档 ↗。

在 pages-deployment.yaml 文件中，复制以下内容：

on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Deploy to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      # Run your project's build step
      # - name: Build
      #   run: npm install && npm run build
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy YOUR_DIRECTORY_OF_STATIC_ASSETS --project-name=YOUR_PROJECT_NAME
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

在上面的代码块中，你设置了在推送代码到仓库时运行的 Action。将 YOUR_PROJECT_NAME 替换为 Cloudflare Pages 项目名称，将 YOUR_DIRECTORY_OF_STATIC_ASSETS 替换为项目输出目录。

${{ secrets.GITHUB_TOKEN }} 将由 GitHub Actions 自动提供，具有 contents: read 和 deployments: write 权限。这使 Cloudflare Pages action 能够代表你创建 Deployment。

使用 CircleCI 进行 CI/CD

CircleCI ↗ 是另一个持续集成和持续交付 (CI/CD) 平台，允许你自动化构建、测试和部署流水线。它可以配置为通过缓存、docker layer caching 和资源类高效运行复杂流水线。

与 GitHub Actions 类似，CircleCI 可以使用 Wrangler 在每次推送代码时持续部署项目。

将 Cloudflare 凭据添加到 CircleCI

从仪表板生成 Cloudflare API 令牌并找到账户 ID 后，你需要将它们添加到 CircleCI 仪表板，以便在项目中使用环境变量。

要添加环境变量，在 CircleCI Web 应用中：

前往 Pages 项目 > Settings（设置）。
在侧边菜单中选择 Projects（项目）。
选择项目行的省略号 (...) 按钮。你将看到添加环境变量的选项。
选择 Environment Variables（环境变量） > Add Environment Variable（添加环境变量）。
输入新环境变量的名称和值，即 Cloudflare 凭据（CLOUDFLARE_ACCOUNT_ID 和 CLOUDFLARE_API_TOKEN）。

设置工作流

在项目根目录创建 .circleci/config.yml 文件。此文件包含根据工作流顺序执行的作业。在 config.yml 文件中，复制以下内容：

version: 2.1
jobs:
  Publish-to-Pages:
    docker:
      - image: cimg/node:18.7.0

    steps:
      - checkout
      # Run your project's build step
      - run: npm install && npm run build
      # Publish with wrangler
      - run: npx wrangler pages deploy dist --project-name=<PROJECT NAME> # Replace dist with the name of your build folder and input your project name

workflows:
  Publish-to-Pages-workflow:
    jobs:
      - Publish-to-Pages

使用 CircleCI 时，持续集成工作流分解为作业。从上面的代码块可以看到，你首先定义每次提交时运行的作业列表。例如，仓库将在预构建 docker 镜像 cimg/node:18.7.0 上运行。它首先使用镜像中指定的 Node 版本 checkout 仓库。

你可以使用任何 wrangler pages deploy 选项修改 Wrangler 命令。

定义所有指定步骤后，在文件末尾定义 workflow。你可以从官方文档 ↗ 了解如何使用 CircleCI 创建自定义流程。

使用 Travis CI 进行 CI/CD

Travis CI 是一个开源持续集成工具，处理项目工作流的特定任务，如 pull request 和代码推送。Travis CI 可集成到 GitHub 项目、数据库和构建配置中启用的其他预安装服务。要使用 Travis CI，你需要 GitHub、Bitbucket、GitLab 或 Assembla 账户。

将 Cloudflare 凭据添加到 TravisCI

在 Travis 项目中，添加从 Cloudflare 仪表板生成的 Cloudflare 凭据，以便在 travis.yml 文件中访问。前往 Travis CI 仪表板，选择当前项目 > More options > Settings（设置） > Environment Variables。

设置环境变量的名称和值以及要附加的分支。你还可以设置值的隐私。

设置

前往 Travis-ci.com ↗ 并使用首选提供商登录以启用仓库。本指南使用 GitHub。然后创建 .travis.yml 文件并将以下内容复制到文件中：

language: node_js
node_js:
  - "18.0.0" # You can specify more versions of Node you want your CI process to support
branches:
  only:
    - travis-ci-test # Specify what branch you want your CI process to run on
install:
  - npm install

script:
  - npm run build # Switch this out with your build command or remove it if you don't have a build step
  - npx wrangler pages deploy dist --project-name=<PROJECT NAME>

env:
  - CLOUDFLARE_ACCOUNT_ID: { $CLOUDFLARE_ACCOUNT_ID }
  - CLOUDFLARE_API_TOKEN: { $CLOUDFLARE_API_TOKEN }

这将 Node.js 版本设置为 18。你还设置了持续集成运行的分支。最后，在 script 部分输入 PROJECT NAME，CI 流程应按预期工作。

你还可以使用任何 wrangler pages deploy 选项修改 Wrangler 命令。