註冊 Cloudflare

建立並驗證 Cloudflare 帳號,確認資源所屬帳戶,啟用 R2,並準備好 Wrangler 授權。

Saavo 部署在 Cloudflare Workers 上。本機開發可以先用 Wrangler 模擬 D1、KV、R2、Queue 和 Durable Objects,等到部署預覽版本或正式上線時,才會用到 Cloudflare 上的實際資源。

暫時不用建立 Cloudflare 資源

這一頁會帶你註冊帳號並啟用 R2 服務,但不需要加入網域,也不用建立 D1、KV、R2 Bucket 或 Queue。首次部署時,deploy:init 會統一建立並繫結專案需要的資源。

先分清楚使用者和帳戶

Cloudflare 的「使用者」和「帳戶」是不同概念:

名稱包含的項目與 Saavo 的關係
Cloudflare 使用者登入用的電子郵件地址、密碼、語言和雙重驗證設定決定誰登入 Dashboard、授權 Wrangler
Cloudflare 帳戶Workers、D1、KV、R2、網域、成員和帳單設定決定 Saavo 實際部署到哪裡

一位使用者可以加入多個 Cloudflare 帳戶。之後建立 Worker 和各項資源時,務必選擇同一個帳戶。Cloudflare 官方文件有更完整的說明。

建立 Cloudflare 帳號

註冊前先選好電子郵件地址。這個地址除了用來登入,也會收到用量提醒、安全通知和帳號復原郵件,最好使用平常經常查看的電子信箱。如果專案屬於公司或團隊,應使用組織能夠持續管理的電子信箱,並在註冊後邀請其他成員加入,避免多人共用同一組密碼。

  1. 開啟 Cloudflare 註冊頁面。
  2. 填寫電子郵件地址和密碼。
  3. 閱讀頁面上的條款與提示,確認後按下 Create account。
  4. 註冊成功後,瀏覽器會進入 Cloudflare Dashboard。

Cloudflare 註冊頁面

新帳戶預設會使用類似 <你的電子郵件地址>'s Account 的名稱。個人專案可以暫時保留這個名稱,如果同時管理多個專案,建議及早改成容易辨識的專案或團隊名稱,避免部署時選錯。

驗證電子郵件地址

建立帳號後,Cloudflare 會自動寄出驗證郵件。開啟郵件中的驗證連結,再登入一次 Cloudflare,就能完成驗證。

如果一直沒有收到郵件:

  1. 先檢查垃圾郵件資料夾和郵件攔截規則。
  2. 登入 Cloudflare Dashboard,按下右上角的使用者圖示,在使用者選單中開啟 Profile。
  3. 找到 Email Address,按下 Send verification email 重新寄送。

驗證完成後,電子郵件地址旁會顯示 verified。如果已經開啟驗證連結,但狀態沒有改變,可以換一個瀏覽器或無痕視窗再試一次,再重新寄送驗證郵件。

Cloudflare 電子郵件驗證頁面

請勿略過電子郵件驗證

尚未驗證電子郵件地址時,部分帳戶管理功能無法使用,也可能無法正常設定雙重驗證。建議現在就完成,避免部署前還得回頭處理。

確認資源所屬帳戶

進入 Dashboard 後,先確認目前選取的 Cloudflare 帳戶。如果只有一個以電子郵件地址命名的帳戶,後續可以直接使用。如果已經加入多個帳戶,請先決定 Saavo 要部署到哪一個,並記住帳戶名稱。

如需修改帳戶名稱,進入該帳戶的 Configurations 頁面,在 Account Name 欄位按下 Change Name。名稱只用來識別帳戶,不會改變 Account ID,也不會影響既有資源。

免費方案足以完成本機開發和 workers.dev 預覽。這時如果看到加入網域、選擇其他產品或填寫帳單資料的引導,可以先略過,等正式上線後,再依實際用量決定是否升級。

團隊專案請勿共用登入帳號

每位成員應使用自己的 Cloudflare 使用者身分加入同一個帳戶。這樣就能個別分配權限,也能在成員離開時撤銷存取權,不必更換所有人的密碼。Worker、D1、KV、R2 和 Queue 仍然屬於團隊選定的 Cloudflare 帳戶。

如果 Cloudflare 使用者帳號遭到盜用,網域、正式環境的資料和部署權限都可能受到影響。完成電子郵件驗證後,建議立即啟用雙重驗證(2FA):

  1. 開啟 My Profile → Authentication。
  2. 在 Two-Factor Authentication 中加入驗證器 App 或安全金鑰。
  3. 依頁面提示儲存備用復原碼,並放在密碼管理工具等安全位置。

復原碼是在無法使用驗證器時使用的備用方式,請勿與帳號密碼一起存放在未加密的檔案中。設定方法請參閱 Cloudflare 雙重驗證文件。

啟用 R2 存取權限

Cloudflare R2 是物件儲存服務,Saavo 預設用它儲存頭像、客服案件圖片、通知配圖等上傳檔案。正式建立 R2 Bucket 前,必須先在準備部署 Saavo 的 Cloudflare 帳戶中啟用 R2。

這裡的「啟用」是替目前的帳戶新增 R2 訂閱,並不是建立 Bucket,也不是產生 API Token 或 Access Key。請依照以下步驟操作:

  1. 進入 Cloudflare Dashboard,切換到準備部署 Saavo 的帳戶。
  2. 在側邊欄開啟 Storage & databases → R2 → Overview。
  3. 如果頁面已顯示 Bucket 清單或 Create bucket 按鈕,代表這個帳戶已啟用 R2,可以直接前往下一節。
  4. 如果頁面提示啟用 R2,按下啟用按鈕,並依提示完成結帳流程(Checkout)。Cloudflare 可能會要求先補齊帳單資料和付款方式。
  5. 完成後回到 R2 的 Overview 頁面。看到 Create bucket 按鈕,就代表 R2 已可使用。

尚未啟用 R2 時的 Overview 頁面

現在不用建立 Bucket

這一節只需要確認 R2 已啟用。Bucket 名稱和 Worker 繫結(Binding)必須與專案設定對應,請等到 deploy:init 依 Worker 名稱統一建立,避免留下名稱不一致的閒置資源。

啟用 R2 需要另外綁定付款方式。如果目前的帳戶尚未綁定,Cloudflare 會要求先補上。

啟用 R2 需要另外綁定付款方式

過程中還會出現一個中間頁面,應該是先綁定付款方式、再啟用 R2 的預設流程。按下 Continue to R2 繼續即可。

繼續啟用 R2 的流程

如果付款卡片沒有問題,通常就能順利啟用。完成後會自動前往 R2 的 Overview 頁面,看到 Create bucket 按鈕,就代表 R2 已可使用。

啟用 R2 後的 Overview 頁面

R2 依儲存量和操作次數計費,每月提供免費用量,超過後才會產生費用。免費用量只適用於 Standard 儲存類型,不適用於 Infrequent Access。額度和價格可能調整,請以 R2 官方價格說明為準。

不需要建立 R2 API Token

Saavo 一般的檔案上傳透過 Worker 的 MAIN_R2 繫結讀寫 Bucket,Wrangler 則使用後面介紹的 OAuth 登入。只有自行串接 S3 API,或簽發暫時性的上傳、下載連結時,才需要另外建立 R2 API Token。這一節不需要預先產生長期有效的驗證資訊。

如果團隊成員看不到啟用按鈕,或無法完成 Checkout,通常是目前的角色沒有同時管理訂閱和付款方式的權限。請由該帳戶的 Super Administrator 完成啟用,不要切換到另一個帳戶繼續操作。

安裝專案後登入 Wrangler(選用)

Wrangler 會隨 Saavo 專案的相依套件一起安裝,不需要另外全域安裝。如果你正在依文件順序準備環境,可以先略過這一步。下載專案並執行 npm install 後,再回到專案根目錄執行:

npx wrangler login

Wrangler 會開啟瀏覽器,透過 OAuth 請求存取 Cloudflare。確認瀏覽器登入的是剛才準備好的使用者,檢查授權頁面後允許存取。終端機顯示登入成功後,再執行:

npx wrangler whoami

輸出內容應包含登入用的電子郵件地址,以及這位使用者能存取的 Cloudflare 帳戶和 Account ID。後續設定資源時,請用 Account ID 核對目標帳戶,不能只看帳戶名稱。

瀏覽器沒有自動開啟

保持終端機中的登入指令繼續執行,將終端機顯示的授權 URL 複製到瀏覽器開啟。完成授權後,還要回到終端機確認是否顯示登入成功。

登入使用者不代表已確定部署帳戶

Wrangler 的 OAuth 授權對應的是 Cloudflare 使用者。如果這位使用者能存取多個帳戶,最終部署位置仍取決於專案設定中的 Account ID 和各項資源 ID。之後建立資源前,請再次執行 npx wrangler whoami 核對。

到這裡,先確認三件事:電子郵件地址已完成驗證、可以進入準備部署 Saavo 的 Cloudflare 帳戶,而且該帳戶已啟用 R2。安裝專案後,再用 Wrangler 做最後一次授權檢查。

下一頁:安裝 Git。