> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 收集其餘提供商金鑰

剩下這些服務的短演練：AI 提供商、Trigger.dev、S3 儲存、Sentry 或 PostHog、Turnstile，以及你的域名。

## 如何使用本頁

下面每一節都是一套完整的設定演練：建賬戶、找金鑰、設 env 名、驗證。只取你產品要上線的服務對應的節——沒有 AI 功能的站點永遠不需要第一節；這裡的每一節都跳過，套件也照常執行。

與其他地方相同的金鑰規則：API 金鑰和 webhook 金鑰只在服務端；只有帶 `NEXT_PUBLIC_`/`EXPO_PUBLIC_` 字首的值能到客戶端；生產金鑰放在託管方的金鑰儲存中；開發伺服器只在重啟時重新讀取 env。

[回到賬戶清單](https://supastack.dev/zh-tw/docs/web/external-accounts.md)


## AI 提供商金鑰

套件的 `AI_PROVIDER` 接受 `openai`、`anthropic`、`openai-compatible` 和 `openrouter`——外加預設的本地替身 `fake`。選一個；提供商金鑰是唯一要開的賬戶，因為模型 ID 和定價來自套件的資料庫目錄，而不是 env 變數。

OpenAI：[platform.openai.com](https://platform.openai.com) → API keys → Create new secret key → 複製 `sk-…` → `OPENAI_API_KEY`。Anthropic：[console.anthropic.com](https://console.anthropic.com) → API Keys → Create Key → `sk-ant-…` → `ANTHROPIC_API_KEY`。兩家都按 token 計費——幾美元額度就夠開發用了。

OpenRouter 用一把金鑰路由目錄裡的所有模型：[openrouter.ai](https://openrouter.ai) → Keys → Create Key → `sk-or-…` → `AI_PROVIDER=openrouter` 加 `OPENROUTER_API_KEY`；可選的 `OPENROUTER_APP_NAME`/`OPENROUTER_SITE_URL` 傳送歸屬標頭。`openai-compatible` 覆蓋任何 OpenAI 形態的端點：`OPENAI_COMPATIBLE_API_KEY` 加 `OPENAI_COMPATIBLE_BASE_URL`。

驗證：重啟，跑一個 AI 任務，應得到真實模型回答而不是確定性的假響應。啟動報錯點名金鑰，表示提供商開關開著卻沒有金鑰。真實回答還需要下面 Trigger.dev 一節的 `JOB_PROVIDER=trigger`，以及套件目錄中啟用的一個模型——[設定 AI](https://supastack.dev/zh-tw/docs/web/setup-ai.md) 講了那部分配置。

```
# apps/web/.env.local — pick ONE provider
AI_PROVIDER=openai
OPENAI_API_KEY=sk-…

# or AI_PROVIDER=anthropic
# ANTHROPIC_API_KEY=sk-ant-…

# or AI_PROVIDER=openrouter
# OPENROUTER_API_KEY=sk-or-…

# or AI_PROVIDER=openai-compatible
# OPENAI_COMPATIBLE_API_KEY=…
# OPENAI_COMPATIBLE_BASE_URL=https://your-endpoint/v1
```


## Trigger.dev

除非產品需要真實的後臺任務執行，否則跳過——`JOB_PROVIDER=local` 把任務排進記憶體佇列而不執行，開發時這就夠了。

1. 開啟 [app.trigger.dev](https://app.trigger.dev) → 註冊 → 建立專案。

2. 複製兩個值：專案 settings 或儀錶板 URL 裡的專案引用 `proj_…` → `TRIGGER_PROJECT_REF`，以及專案 API keys 頁上的金鑰（開發環境是 `tr_dev_…`，生產是 `tr_prod_…`）→ `TRIGGER_SECRET_KEY`。兩者都僅限服務端。

3. 套件的任務已在 `apps/web/trigger` 中，`apps/web/trigger.config.ts` 讀取 `TRIGGER_PROJECT_REF`。在 `apps/web` 下執行 `npx trigger.dev@latest dev`——它把任務註冊到你的專案，並用開發金鑰在本地執行。

驗證：dev 命令會記錄註冊的任務；在應用中排一個任務，看它在儀錶板 Runs 列表裡跑起來。已部署環境執行 `corepack pnpm --filter @supastack/web trigger:deploy` 來發布任務集。

```
# apps/web/.env.local
JOB_PROVIDER=trigger
TRIGGER_PROJECT_REF=proj_…
TRIGGER_SECRET_KEY=tr_dev_…   # tr_prod_… in production

# run the worker alongside the app, from apps/web:
cd apps/web
npx trigger.dev@latest dev
```


## S3 相容儲存（Cloudflare R2）

除非產品要存檔案，否則跳過——`STORAGE_PROVIDER=memory` 把上傳留在程式內，供開發使用。

任何 S3 相容桶都行；Cloudflare R2 是對免費檔友好的選擇。1. 開啟 [dash.cloudflare.com](https://dash.cloudflare.com) → R2 Object Storage → Create bucket，命名並保留預設位置提示。

2. 回到 R2 概覽，開啟 Manage R2 API Tokens → Create API token → 許可權選 Object Read & Write，範圍限定到那個桶 → Create。複製 Access Key ID、Secret Access Key，以及顯示的 S3 端點——`https://<account-id>.r2.cloudflarestorage.com`。

3. 設定下面的 env 名。`STORAGE_REGION=auto` 是 R2 慣例——套件預設 `us-east-1`，R2 也接受。`STORAGE_FORCE_PATH_STYLE` 對自定義端點本來就預設開啟，正是 R2 要的。對外提供公開檔案還需要 `STORAGE_PUBLIC_BASE_URL` 或 CDN 接線；私有檔案不需要更多。

驗證：重啟並通過應用上傳——物件會出現在 R2 桶瀏覽器裡。簽名或 403 錯誤表示令牌沒有該桶的物件讀寫許可權；建一個範圍正確的新令牌。

```
# apps/web/.env.local
STORAGE_PROVIDER=s3
STORAGE_ENDPOINT=https://<account-id>.r2.cloudflarestorage.com
STORAGE_REGION=auto
STORAGE_BUCKET=your-bucket
STORAGE_ACCESS_KEY_ID=…          # server-only
STORAGE_SECRET_ACCESS_KEY=…      # server-only
# STORAGE_PUBLIC_BASE_URL=       # optional public-URL base
```


## Sentry 或 PostHog（可選）

完全可選：所有可觀測性值預設不設定，套件沒有它們也執行良好——等你想在生產裡要錯誤報告和分析時再配。

錯誤用 Sentry：[sentry.io](https://sentry.io) → 建專案 → 選 Next.js 平臺 → 設定頁顯示 DSN `https://…@….ingest.sentry.io/…` → `SENTRY_DSN`。之後異常會帶著 correlation-id 標籤到達 Sentry；免費檔夠起步。

產品分析改用 PostHog：[posthog.com](https://posthog.com) → 建專案 → 複製專案 API 金鑰 `phc_…` → `NEXT_PUBLIC_POSTHOG_KEY` 加 `NEXT_PUBLIC_POSTHOG_HOST`（`https://us.i.posthog.com`，或你的 EU 主機）。這兩個是刻意公開的瀏覽器值；`SENTRY_DSN` 留在服務端。`ALERT_WEBHOOK_URL` 可選地把失敗告警發到 Slack 相容端點。

驗證：重啟，製造一個測試異常（或回放 Sentry 的示例事件），確認它落到專案的 Issues 列表裡。

```
# apps/web/.env.local — all optional
SENTRY_DSN=https://…@….ingest.sentry.io/…

NEXT_PUBLIC_POSTHOG_KEY=phc_…
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

# ALERT_WEBHOOK_URL=https://hooks.slack.com/services/…
```


## Cloudflare Turnstile

給公開表單和憑據端點的機器人防護——`CAPTCHA_PROVIDER=off` 是預設，所以在對陌生人開放註冊前加上它。免費。

1. 開啟 [dash.cloudflare.com](https://dash.cloudflare.com) → Turnstile → Add widget → 命名並列出主機名：開發用 `localhost` 加你的真實域名 → Create。

2. 複製兩個值：Site Key——本來就公開，渲染在小元件裡 → `NEXT_PUBLIC_TURNSTILE_SITE_KEY`——和伺服器用來校驗的 Secret Key → `TURNSTILE_SECRET_KEY`。

3. `CAPTCHA_PROVIDER=turnstile` 開啟它；啟動會失敗並點名缺了哪個金鑰。驗證碼指南列出了小元件具體保護哪些面。

驗證：開啟 `/auth` 或聯絡表單——小元件渲染出來；未完成挑戰的提交被拒絕。小元件一直不載入，說明你瀏覽的主機名不在小元件名單裡。

[看看 Turnstile 保護哪些表單](https://supastack.dev/zh-tw/docs/web/captcha.md)

```
# apps/web/.env.local
CAPTCHA_PROVIDER=turnstile
NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x…   # public by design
TURNSTILE_SECRET_KEY=0x…             # server-only
```


## 你自己的域名

在任意註冊商買一次就行——Cloudflare Registrar、Porkbun、Namecheap 都可以。這裡沒有要複製進 env 的東西；域名出現在你一路配置的 Services ID、Resend DNS、Turnstile 主機名和 OAuth return URL 裡。

指向應用的兩種方式：Cloud Run 用部署指南里的域名對映——控制台點幾下，加上 Google 列出的 DNS 記錄。或者把 DNS 遷到 Cloudflare nameserver（註冊商改兩條記錄）——可選，但也是把 R2 公開桶和 Turnstile 主機名放到一處管理的整潔辦法。

[在 Cloud Run 上對映域名](https://supastack.dev/zh-tw/docs/web/deploy-google-cloud.md)

[接下來設定資料庫](https://supastack.dev/zh-tw/docs/web/setup-database.md)


如果你想繼續完成設定，可以閱讀《[設定資料庫](https://supastack.dev/zh-tw/docs/web/setup-database.md)》。


## 下一篇

[設定資料庫](https://supastack.dev/zh-tw/docs/web/setup-database.md)