For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/provider-keys.md (or send Accept: text/markdown).

残りのプロバイダーキーを集める

残りのサービスの短いウォークスルー:AI プロバイダー、Trigger.dev、S3 ストレージ、Sentry または PostHog、Turnstile、そして独自ドメイン。

このガイドについて質問

このページの使い方

以下の各セクションは 1 つの完全なセットアップウォークスルーです:アカウントを作り、キーを見つけ、env 名を設定し、確認します。製品が出荷するサービスのセクションだけを取り上げてください——AI 機能のないサイトには最初のセクションは不要で、ここにあるすべてのセクションをスキップしてもキットは動き続けます。

どこでも同じシークレットルールです:API キーと webhook シークレットはサーバー専用、NEXT_PUBLIC_/EXPO_PUBLIC_ プレフィックス付きの値だけがクライアントに届き、本番のシークレットはホストのシークレットストアに置き、開発サーバーは再起動時にのみ env を読み直します。

アカウントチェックリストに戻る

AI プロバイダーキー

キットの AI_PROVIDER は openai、anthropic、openai-compatible、openrouter を受け付けます——加えてデフォルトのローカル代替 fake も。1 つ選んでください。プロバイダーキーが唯一必要なアカウントです。モデル ID と価格は env 変数ではなくキットのデータベースカタログから来るためです。

OpenAI:platform.openai.com → API keys → Create new secret key → sk-… をコピー → OPENAI_API_KEY。Anthropic:console.anthropic.com → API Keys → Create Key → sk-ant-… → ANTHROPIC_API_KEY。両方ともトークン課金です——数ドルのクレジットで開発をカバーできます。

OpenRouter はすべてのカタログモデルを 1 つのキーでルーティングします: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 タスクを 1 つ実行し、決定論的な偽物の代わりに実際のモデル応答を期待します。キーを名指しする起動エラーは、プロバイダーフラグがキーなしでオンになっていることを意味します。実際の応答には、下の Trigger.dev セクションの JOB_PROVIDER=trigger とキットのカタログで有効な 1 つのモデルも必要です——AI のセットアップがそのセットアップを扱います。

# 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 → サインアップ → プロジェクトを作成します。

2. 2 つの値をコピーします:プロジェクトの settings またはダッシュボード URL からプロジェクト ref 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 コマンドが登録されたタスクをログに出します。アプリで 1 つキューに入れ、ダッシュボードの 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 → 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 → プロジェクトを作成 → Next.js プラットフォームを選択 → セットアップ画面に DSN https://…@….ingest.sentry.io/… が表示 → SENTRY_DSN。例外は相関 ID タグ付きで Sentry に届きます。無料枠で始めるのに十分です。

代わりに製品分析に PostHog:posthog.com → プロジェクトを作成 → プロジェクト API キー phc_… をコピー → NEXT_PUBLIC_POSTHOG_KEY と NEXT_PUBLIC_POSTHOG_HOST(https://us.i.posthog.com または EU ホスト)。この 2 つは設計上公開のブラウザ値です。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 → Turnstile → Add widget → 名前を付けてホスト名を列挙します:開発用の localhost と本物のドメイン → Create。

2. 両方の値をコピーします:Site Key——設計上公開で、ウィジェット内に描画されます → NEXT_PUBLIC_TURNSTILE_SITE_KEY——と、サーバーが検証に使う Secret Key → TURNSTILE_SECRET_KEY。

3. CAPTCHA_PROVIDER=turnstile でオンになります。どちらかのキーが欠けていると起動が失敗し、そのキーが名指しされます。captcha ガイドが、ウィジェットが保護する画面を正確に列挙しています。

確認:/auth またはお問い合わせフォームを開きます——ウィジェットが描画されます。チャレンジを解かない送信は拒否されます。ウィジェットが一切読み込まれない場合、閲覧中のホスト名がウィジェットの一覧にありません。

Turnstile が保護するフォームを見る

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

独自ドメイン

任意のレジストラでの 1 回の購入です——Cloudflare Registrar、Porkbun、Namecheap などどれでも使えます。ここで env にコピーするものは何もありません。ドメインは、これまでに設定した Services ID、Resend DNS、Turnstile ホスト名、OAuth リターン URL に登場します。

アプリに向ける方法は 2 つあります:Cloud Run にはデプロイガイドのドメインマッピングを使います——数回のコンソールクリックと Google が列挙する DNS レコードです。あるいは DNS を Cloudflare ネームサーバーに移します(レジストラが 2 つのレコードを入れ替えます)——オプションですが、R2 公開バケットと Turnstile ホスト名を 1 か所で管理する整った方法でもあります。

設定を続けるには、データベースのセットアップをご覧ください。