選用服務

了解 Saavo 在本機開發和首次部署時需要哪些外部服務,再依產品需求串接付款、登入、分析和通知功能。

Saavo 範本預留了不少第三方服務的串接設定,但不需要在建立專案前全部註冊。本章會集中整理這些服務的註冊與串接方式,目前先說明何時需要設定,以及設定應放在哪裡。

各階段需要準備什麼

階段需要處理的外部服務
建立專案不需要新增第三方帳號,使用範本內附的 Turnstile 測試金鑰
本機開發只串接正在開發的功能,Stripe、OAuth、分析和通知設定都可以先留白
首次部署依 deploy:init 提示準備 Turnstile 和目前郵件服務需要的設定。如果還沒有正式網域,可以使用 Turnstile 測試金鑰,Stripe 也可以先略過
上線前將 Turnstile 換成正式網域對應的實際金鑰,並檢查 OAuth 回呼、付款 Webhook,以及其他已啟用服務的正式環境設定

建立專案時不用準備正式環境設定

使用 Saavo CLI 建立專案:

npx saavo-cli@latest create my-project

同意初始化本機環境後,CLI 會安裝相依套件,並呼叫範本自己的 saavo:init。這個流程會建立 .env、產生本機的 SAAS_SECRET、保留 Turnstile 測試金鑰,並初始化本機資料庫。

如果建立專案時略過了本機初始化,請進入專案目錄後執行:

npm install
npm run saavo:init

這時不需要準備 Resend、Stripe、GitHub 或 Google 等服務在正式環境使用的金鑰。先執行 npm run dev,確認專案能正常啟動,再決定要串接哪些服務。

本機開發依功能需求串接

本機的 .env 只用於開發環境。暫時用不到的變數請保持空字串,不要為了填滿檔案而隨意填入占位值。

正在開發的功能需要準備的項目未設定時的影響
在正式環境寄送郵件Resend API Key,或改用 Cloudflare Email註冊郵件、驗證碼和密碼重設郵件無法送達
Stripe 購買流程Stripe 測試金鑰、連線識別碼、Webhook Secret 和實際的測試 Price ID可以顯示定價內容,但無法完成 Checkout
GitHub 登入GitHub OAuth App 的 Client ID 和 Client Secret不會啟用 GitHub 登入入口
Google 登入Google OAuth 用戶端的 Client ID 和 Client Secret不會啟用 Google 登入和 One Tap
第三方分析或廣告所選平台提供的網站 ID、Token 等設定不會載入對應的指令碼
外部通知Webhook、Bot Token 或簽章金鑰不會將事件傳送到外部管道

一般檔案上傳不需要 R2_ACCOUNT_ID、R2_ACCESS_KEY_ID 和 R2_SECRET_ACCESS_KEY。範本透過 Worker 的 MAIN_R2 繫結存取儲存貯體。只有自行串接 R2 S3 API,或透過簽署函式產生臨時上傳、下載連結等情境,才需要準備這組驗證資訊,詳見檔案儲存。

首次部署時統一收集設定

準備第一次部署到 Cloudflare 時,執行:

npx wrangler login
npm run deploy:init

deploy:init 會選擇 Cloudflare 帳戶、確認 Worker 和資源名稱、收集正式環境設定,並建立 .env.production。依範本目前的預設設定,主要需要處理以下項目:

  • Turnstile:預設啟用,Site Key 和 Secret Key 都不能留白。首次部署到 workers.dev 時,可以輸入 Cloudflare 官方測試金鑰。
  • 郵件:預設使用 Resend,因此需要 RESEND_API_KEY。如果已改用 Cloudflare Email,部署指令碼會設定 EMAIL 繫結。
  • Stripe:部署時會詢問是否現在設定,可以先略過。
  • OAuth、分析和通知:尚未啟用的項目繼續留白,之後再寫入 .env.production,並執行 npm run deploy:update。

本機的 .env 和正式環境的 .env.production 各自管理一個環境,不要互相覆寫:

檔案用途Turnstile
.env本機開發保留 Cloudflare 測試金鑰
.env.production遠端部署首次驗證可暫用測試金鑰,正式開放前換成實際 Widget 的金鑰

.env.production 已列入 Git 忽略清單。Saavo 部署指令碼會將其中的公開值同步為 Worker Variables,機密值則同步為 Secrets,不要繞過這個流程,另外維護一組遠端設定。

常用設定位置

第三方服務通常同時需要功能設定和環境變數。只填金鑰不一定會自動切換服務,只修改設定也無法憑空取得存取權。

服務功能設定本機與正式環境設定
Turnstileconfig/deploy.ts → auth.useTurnstileCLOUDFLARE_TURNSTILE_*
郵件config/deploy.ts → emailProviderRESEND_API_KEY 或 EMAIL 繫結
付款config/payment.ts、config/products.tsSTRIPE_*
OAuth 登入config/deploy.ts → auth / uiGITHUB_*、GOOGLE_*
第三方分析config/analytics.ts各平台提供的 ID、Token 或網站識別碼
廣告config/ads.ts廣告平台提供的網站 ID
通知config/notifications.tsWebhook、Bot Token 或簽章金鑰

修改 .env 後,需重新啟動 npm run dev。修改 .env.production 後,已完成首次部署的專案請執行:

npm run deploy:update

現有教學

  • 設定 Turnstile:先完成首次部署,再為正式網域建立 Widget、替換金鑰,並驗證用戶端與伺服器端的流程。
  • 網域設定:直接在 Cloudflare 註冊網域,或將第三方註冊商購買的網域加入 Cloudflare,再設定網站、郵件和 R2 自訂網域。
  • 設定 Resend:完成網域驗證、建立權限受限的 API Key,並啟用 Saavo 的註冊、密碼重設和安全通知郵件。
  • 設定 GitHub OAuth:建立 OAuth App,登記本機與正式環境的回呼網址,並設定 Client ID 和 Client Secret。
  • 設定 Google OAuth:設定 Google Auth Platform 和 Web application 用戶端,啟用一般 Google 登入,以及選用的 One Tap。

後續教學規劃

後續會依以下分類持續新增獨立頁面。沒有連結的項目表示尚未補上教學,不代表範本不支援。

  • 郵件:Cloudflare Email
  • 付款:Stripe
  • Cloudflare 功能:R2 API Token 與簽章下載
  • 分析與廣告:Google Analytics、Microsoft Clarity、Cloudflare Web Analytics、Umami、Plausible、PostHog、Google AdSense 等
  • 通知管道:Slack、Discord、Telegram、Microsoft Teams、飛書、釘釘、企業微信和通用 Webhook

example.vars 中仍保留 PADDLE_* 變數,但目前的 config/payment.ts 只允許使用 Stripe。現階段不需要因為看到這些變數就註冊 Paddle,等範本正式支援後,再補上對應教學。

如果現在只是準備開發環境,可以繼續閱讀建立專案。等需要部署時,再回到本章設定正式服務。