跳转至

Gitlab、React Vite、Cloudflare Pages CICD

進入 Cloudflare Pages 的路徑

  1. 打開 https://dash.cloudflare.com/
  2. 登入你的帳號
  3. 左上角會看到一個 「Workers & Pages」 分類（不是在網站列表那邊）
  4. 點進去後 → 頁籤選「Pages」
  5. 點右上角 「Create a project」

Create a project

  1. 選擇 Connect to Git
  2. 授權 Cloudflare 存取你的 GitHub/Gitlab 帳號
  3. 設定
Framework preset: React Vite
Build command: npm run build
Output directory: dist
  1. 按 Deploy → Cloudflare 自動 clone 你的 repo → install → build → 部署

部署完後它會給你：

預設網址：https://project.pages.dev 可以再加自己的 domain（在 Settings > Custom Domains）

bun install --frozen-lockfile

22:06:30.408    Using v2 root directory strategy
22:06:30.432    Success: Finished cloning repository files
22:06:32.721    Checking for configuration in a Wrangler configuration file (BETA)
22:06:32.722    
22:06:33.836    No wrangler.toml file found. Continuing.
22:06:33.904    Detected the following tools from environment: npm@10.9.2, bun@1.2.15, nodejs@22.16.0
22:06:33.905    Installing project dependencies: bun install --frozen-lockfile
22:06:34.186    bun install v1.2.15 (df017990)
22:06:34.204    Outdated lockfile version: failed to parse lockfile: 'bun.lockb'
22:06:34.204    
22:06:34.204    warn: Ignoring lockfile
22:06:34.210    error: lockfile had changes, but lockfile is frozen
22:06:34.218    Error: Exit with error code: 1
22:06:34.218        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
22:06:34.218        at Object.onceWrapper (node:events:652:26)
22:06:34.218        at ChildProcess.emit (node:events:537:28)
22:06:34.218        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
22:06:34.226    Failed: build command exited with code: 1
22:06:35.416    Failed: error occurred while running build command

Cloudflare Pages 在執行你的 Build command 之前就自動運行了 bun install --frozen-lockfile。這是 Cloudflare Pages 的自動依賴安裝機制。

Installing project dependencies: bun install --frozen-lockfile
這發生在你的 npm ci && npm run build 執行之前

需要在 Cloudflare Pages Variables and Secrets 設定這個環境變數: 

SKIP_DEPENDENCY_INSTALL=true

然後 Build command 改成:

Build command:
npm ci && npm run build

Cloudflare 獲取到最新的 Gitlab Group 列表

  1. 登入您的 GitLab 帳戶。
  2. 在介面的 最右上角，您會看到您的 使用者頭像 (Avatar) 或 個人資料圖片。
  3. 點擊您的 頭像。
  4. 在彈出的選單中，選擇Edit profile

Settings 頁面後，您需要尋找與 授權 (Authorization) 或 應用程式 (Applications) 相關的選項。

在這個列表中，您應該能看到 Cloudflare Pages 的授權條目。在那裡，您可以選擇 "Revoke" (撤銷) 現有的授權，然後回到 Cloudflare Pages 重新執行連接流程，以確保 Cloudflare 獲取到最新的 Group 列表。