Clerk デプロイメント統合

概要

Clerk認証を使用したアプリケーションをさまざまなホスティングプラットフォームにデプロイします。

前提条件

• Clerk本番インスタンスの設定が完了していること
• 本番APIキーの準備ができていること
• ホスティングプラットフォームのアカウントを持っていること

手順

プラットフォーム1: Vercelデプロイメント

ステップ1: 環境変数の設定

# Vercel CLIを使用
vercel env add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY production
vercel env add CLERK_SECRET_KEY production
vercel env add CLERK_WEBHOOK_SECRET production

# またはvercel.json内で設定

// vercel.json
{
  "env": {
    "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY": "@clerk-publishable-key",
    "CLERK_SECRET_KEY": "@clerk-secret-key"
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ]
}

ステップ2: Clerkダッシュボードの設定

1. Vercelドメインを許可されたオリジンに追加する
2. Clerkダッシュボードで本番URLを設定する
3. Webhookエンドポイントを設定する

ステップ3: デプロイ

# 本番にデプロイ
vercel --prod

# またはGitにリンクして自動デプロイを設定
vercel link

プラットフォーム2: Netlifyデプロイメント

ステップ1: 環境変数の設定

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

[build.environment]
  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY = "pk_live_..."

# Netlifyダッシュボードでシークレットを追加
# Site settings > Environment variables > CLERK_SECRET_KEY

ステップ2: APIのためのNetlify Functionsを作成

// netlify/functions/clerk-webhook.ts
import { Handler } from '@netlify/functions'
import { Webhook } from 'svix'

export const handler: Handler = async (event) => {
  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET!

  const svix_id = event.headers['svix-id']
  const svix_timestamp = event.headers['svix-timestamp']
  const svix_signature = event.headers['svix-signature']

  const wh = new Webhook(WEBHOOK_SECRET)

  try {
    const evt = wh.verify(event.body!, {
      'svix-id': svix_id!,
      'svix-timestamp': svix_timestamp!,
      'svix-signature': svix_signature!
    })

    // イベントを処理
    return { statusCode: 200, body: JSON.stringify({ success: true }) }
  } catch (err) {
    return { statusCode: 400, body: 'Invalid signature' }
  }
}

プラットフォーム3: Railwayデプロイメント

ステップ1: Railwayの設定

# railway.json
{
  "build": {
    "builder": "NIXPACKS"
  },
  "deploy": {
    "startCommand": "npm start",
    "healthcheckPath": "/api/health"
  }
}

ステップ2: 環境変数の設定

# Railway CLIを使用
railway variables set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
railway variables set CLERK_SECRET_KEY=sk_live_...
railway variables set CLERK_WEBHOOK_SECRET=whsec_...

プラットフォーム4: Dockerデプロイメント

Dockerfile

FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

# NEXT_PUBLIC_変数のビルド時引数
ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

RUN npm run build

FROM node:20-alpine AS runner

WORKDIR /app

ENV NODE_ENV=production

COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

# ランタイム環境変数
ENV CLERK_SECRET_KEY=""
ENV PORT=3000

EXPOSE 3000

CMD ["node", "server.js"]

# ビルドと実行
docker build \
  --build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_... \
  -t myapp .

docker run -p 3000:3000 \
  -e CLERK_SECRET_KEY=sk_live_... \
  myapp

プラットフォーム5: AWS Amplify

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Clerkダッシュボード設定

本番ドメインのセットアップ

1. Clerkダッシュボード > Configure > Domainsに移動
2. 本番ドメインを追加
3. SSL設定（ほとんどのプラットフォームで自動）

Webhook設定

1. Clerkダッシュボード > Webhooksに移動
2. エンドポイントを追加: https://yourdomain.com/api/webhooks/clerk
3. 購読するイベントを選択
4. Webhookシークレットを環境変数にコピー

OAuthリダイレクトURL

1. 本番URLでOAuthプロバイダーを更新
2. https://yourdomain.com/sso-callbackを追加
3. セキュリティのため開発用URLを削除

出力

• プラットフォーム固有のデプロイメント設定
• 設定済みの環境変数
• Webhookエンドポイントの準備完了
• 設定済みの本番ドメイン

デプロイメントチェックリスト

• 本番Clerkキーが設定されている
• ドメインがClerkダッシュボードに追加されている
• Webhookエンドポイントが設定されている
• OAuthリダイレクトURLが更新されている
• SSL/HTTPSが有効になっている
• セキュリティヘッダーが設定されている
• ヘルスチェックエンドポイントが動作している

エラーハンドリング

エラー	原因	解決策
サインイン時に500エラー	シークレットキーが見つからない	CLERK_SECRET_KEYをプラットフォームに追加
Webhookが失敗	エンドポイントURLが間違っている	ClerkダッシュボードでURLを更新
CORSエラー	ドメインが許可されていない	Clerkの許可されたオリジンにドメインを追加
リダイレクトループ	サインインURLが間違っている	CLERK_SIGN_IN_URL設定を確認

リソース

• Vercelデプロイメント
• Netlifyデプロイメント
• Railwayガイド

次のステップ

Webhook設定についてはclerk-webhooks-eventsに進んでください。