github 网站 CI-CD到 cloudflare pages

利用 github workflows 能够非常方便的帮我们完成自动测试自动部署的操作。以下为将github 的 vue 网站部署到 cloudflare pages

CI-CD配置

项目里有俩文件的配置如下：

1. workflow.yml

   name: 🪧代码打包并部署到 Cloudflare Pages（works）
   
   # 触发条件
   on:
    push:
      tags:  [ 'v*.*.*' ]
   
   # 添加权限授权
   permissions:
    contents: write  # 允许创建 Release
   
   jobs:
    release:
      runs-on: ubuntu-latest
      steps:
        - name: ▶️签出代码
          uses: actions/checkout@v6
   
        - name: 🔧配置Node.js
          uses: actions/setup-node@v6
          with:
            node-version: 24.10.0
   
        - name: 🔧安装依赖
          run: npm install
   
        - name: 📦构建
          run: npm run build
   
        # - name: ✈️发布
        #   uses: softprops/action-gh-release@v2
        #   if: github.ref_type == 'tag'
        #   with:
        #     files: ./dist/**
   
        - name: ✈️上传到cf平台
          uses: cloudflare/wrangler-action@v3
          with:
            apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
            accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
            command: pages deploy ./dist --project-name=project-name --commit-dirty=true --branch=main
            gitHubToken: ${{ secrets.GITHUB_TOKEN }}
              # GITHUB_TOKEN 为自动创建，用于workflow跟踪cf pages 的创建状态
              # 需要前面设置write权限（如上写的）

   这里需要在项目文件内安装 wrangler（cloudflare 开发的CLI）

   npm install wrangler

   使用 wrangler-action 的时候需要有 cloudflare 的 账户ID 和 API token（使用项目机密创建变量使用）

   应用的命令解析：

   pages deploy ./dist --project-name=project-name --commit-dirty=true --branch=main

   • --project-name= 项目名称

     需要与 cloudflare 账户里 pages 创建的名字一模一样

   • --commit-dirty=true

     强制提交所有未跟踪的文件

     在构建完成后，确保项目中未跟踪的 /dist 文件能够被提交

   • --branch=main

     设定提交到 pages 的 main 分支中

     pages 创建的时候会默认生成 main 为生产分支

2. wrangler.toml （在项目根目录下创建）

   # 项目类型，根据你实际使用的框架更改
   type = "vue"
   
   account_id = "${CLOUDFLARE_ACCOUNT_ID}"
   zone_id = "${CLOUDFLARE_ZONE_ID}"
   
   [build]
   command = "npm run build"
   publish = "./dist"
   pages_build_output_dir = "./dist"
   
   [env.production]
   name = "project-name"
   
   # 可选：自定义域名（无需 zone_id）
   [[env.production.routes]]
   pattern = "example.com/*"
   zone_name = "example.com"

   字段解析：

   • name = "project-name"

     项目的名字，需要与 pages 创建的名称相同

   • publish = "./dist"

     构建产物的输出目录

   • pages_build_output_dir = "./dist"

     pages 依据这个目录读取构建完成后的文件

   • pattern = "example.com/*"

     配置要绑定的域名

     绑定的域名推荐 DNS需要在cf（例如在cf注册的域名或者其他注册商注册的域名，更改DNS到 cloudflare 的服务器）

     如果直接用 CNAME 解析那么无法利用到 cloudflare 的 HTTPS 支持

   • zone_name = "example.com"

     cloudflare 可以根据域名自动判断域名所属的区域，由此可以省略上面 zone_id 字段（zone_id字段比较复杂难以记忆）