recipes / deploy-vercel

Vercel CLI でデプロイしてドメインを割り当てる

monorepo の1 app を Vercel CLI で公開し、任意ドメイン（4s.link / zfilms.jp 等）を Cloudflare か Route53 で向ける

前提: new-event

Turborepo monorepo の 1 app を Vercel CLI だけで 公開する。GUI は不要。 この手順は event-manual.zfilms.jp を実際にこの流れでデプロイして検証済み。

0. 罠を先に理解する（monorepo × Vercel の 2 つ）

  1. Root Directory は CLI から設定できない。 そのため apps/<app> を root に指定できない。

→ repo root に vercel.json を置き、build/output を明示して回避する（下記 2）。

  1. ドメインはそれを所有する Vercel team にしか add できない。

zfilms.jp / 4s.link 等が個人 team 所有なら、その team の scope でプロジェクトを作る。 別 team だと vercel domains add が 403 domain_not_owned で落ちる。

1. ログインと scope 確認

vercel login
vercel teams ls          # ドメインを持つ team を確認（--scope に使う）

2. repo root に vercel.json（Root Directory の代替）

monorepo root に置く。<app> は公開したい app 名（例 manual）:

{
  "framework": "nextjs",
  "installCommand": "yarn install --frozen-lockfile",
  "buildCommand": "yarn turbo build --filter=<app>",
  "outputDirectory": "apps/<app>/.next"
}

これで root からビルドしても workspace 依存が解決し、.next が正しい場所から拾われる （.next not found エラーの根治）。

3. プロジェクト作成と env 投入（すべて CLI）

# ドメインを持つ team の scope で紐付け
vercel link --scope <team> --yes

# env（最低限 ADMIN_PASSWORD。機能に応じて追加）
printf '%s' "<value>" | vercel env add ADMIN_PASSWORD production --scope <team>
# 例: FOURS_EVENT_SLUG / FOURS_PUBLIC_READ / BLOB_READ_WRITE_TOKEN / DATABASE_URL / GITHUB_TOKEN

ストレージ（機能に応じて）: Blob（画像/サーベイ）・Upstash KV（ライブ投票）・Neon（DB）。 vercel env pull でローカルにも取り込める。

4. 本番デプロイ

vercel deploy --prod --scope <team>

5. ドメイン割当（Vercel CLI + DNS 1 レコード）

vercel domains add <your-domain> --scope <team>   # 例 event-manual.zfilms.jp

Vercel は A 76.76.21.21（anycast）を要求する。DNS 提供元で 1 レコード足すだけ:

まずは DNS only（グレー雲） で証明書発行を通す。発行後に Proxied（オレンジ）+ SSL Full(Strict) にすると WAF/analytics が乗る。

証明書は DNS 反映後に自動発行される（数分）。curl -I https://<your-domain> が HTTP/2 200 を返すまでポーリング。 （AWS を使うかは無関係 — 4s.link=Route53 / zfilms.jp=Cloudflare のように、そのドメインの DNS 提供元で A を足すだけ。）

6. セキュリティヘッダ確認

createNextConfig が CSP/HSTS/COOP/Permissions-Policy を自動付与する。 curl -I https://<your-domain> で content-security-policy 等が出ることを確認。 外部ホスト（分析・フォント等）を足したら next.config.ts の security.csp で許可する。

Git 連携（任意）

CLI デプロイ後に vercel git connect で GitHub を繋ぐと push→自動デプロイになる。 その場合 main への push = 本番反映。作業は必ずブランチ → PR。 Vercel は squash/rebase で author 保持が崩れると deploy blocked になることがある（merge commit 推奨）。

cron（定期同期がある場合）

vercel.json の crons[] に登録し、handler を withCronAuth で包む（CRON_SECRET 必須）。