はじめに

本番環境で動いているアプリに新機能を追加したい。でも本番を壊したくない。

そんな時に必要なのが テスト環境 です。

この記事では、Next.js + Vercel + Supabase で構築したアプリの：

本番/テスト/開発環境の分離設計
Git Worktree を使った並行開発
Vercel のブランチ別デプロイ
OAuth 認証のトラブルシューティング

を解説します。

対象読者

Next.js + Vercel + Supabase でアプリを運用中
本番環境とは別にテスト環境を作りたい
Google OAuth の設定でハマっている
redirect_uri_mismatch エラーに悩んでいる

環境構成

環境	URL	ブランチ	用途
本番	app.example.com	main	本番運用
テスト	test.example.com	test	本番前の検証
DEV	dev.example.com	test	開発中の確認
ローカル	localhost:3000	-	開発

ポイント: 全環境で同じ Supabase プロジェクトを使用します。DB を分けると、テストデータの管理が煩雑になるためです。

Part 1: Git Worktree で並行開発

なぜ Worktree？

通常、ブランチを切り替えるには git checkout を使います。

git checkout test  # test ブランチに切り替え
# 作業...
git checkout main  # main に戻る

しかし、これだと 本番のコードを見ながらテスト環境を開発 するのが難しい。

Git Worktree を使うと、1つのリポジトリで複数ブランチを 別フォルダ で同時に開けます。

セットアップ

# メインリポジトリ（main ブランチ）
cd ~/project/myapp

# test ブランチを別フォルダで開く
git worktree add ../myapp-test test

# 確認
ls ~/project/
# myapp/      ← main ブランチ（本番用）
# myapp-test/ ← test ブランチ（開発用）

日常の開発フロー

# 1. test ブランチで開発
cd ~/project/myapp-test
git add -A && git commit -m "feat: 新機能"
git push origin test

# 2. テスト環境で確認
# → test.example.com で動作確認

# 3. 本番にマージ
cd ~/project/myapp
git fetch origin
git merge origin/test
git push origin main

Worktree の管理コマンド

# Worktree 一覧
git worktree list

# Worktree 削除
git worktree remove ../myapp-test

Part 2: Vercel 設定

ブランチとドメインの対応

ブランチ	環境	ドメイン
main	Production	app.example.com
test	Preview	test.example.com, dev.example.com

Preview ドメインの設定

Vercel の Preview デプロイは、デプロイごとに URL が変わります。
固定ドメインを使いたい場合は エイリアス を設定します。

# 最新の Preview デプロイを確認
vercel ls | grep Preview | head -1

# エイリアスを設定
vercel alias <deployment-url> test.example.com

注意: Preview デプロイは毎回 URL が変わるため、エイリアスも 毎回再設定が必要 です。

環境変数の設定

よくある間違い：`echo` で改行が入る

# ❌ NG: echo は末尾に改行が入る
echo "https://app.example.com/api/callback" | vercel env add REDIRECT_URI production

# ✅ OK: printf で改行なし
printf "https://app.example.com/api/callback" | vercel env add REDIRECT_URI production

環境別に設定

# Production
printf "https://app.example.com/api/callback" | vercel env add REDIRECT_URI production

# Preview
printf "https://test.example.com/api/callback" | vercel env add REDIRECT_URI preview

# Development
printf "http://localhost:3000/api/callback" | vercel env add REDIRECT_URI development

環境変数の確認・削除

# 一覧表示
vercel env ls

# 値を確認（ファイルに出力）
vercel env pull .env.check --environment=production
cat .env.check
rm .env.check

# 削除（--yes で確認スキップ）
vercel env rm REDIRECT_URI production --yes

Part 3: 認証設定

認証フローの全体像

[ユーザー] → [/login] → [Supabase PKCE] → [Google OAuth] → [Supabase Callback] → [/api/auth/callback] → [セッション作成]

Supabase の設定

Dashboard > Authentication > URL Configuration

Site URL: https://app.example.com

Redirect URLs（ワイルドカード使用）:
  - https://app.example.com/**
  - https://test.example.com/**
  - https://dev.example.com/**
  - http://localhost:3000/**

ポイント: ワイルドカード /** を使うことで、サブパスも許可されます。

Google Cloud Console の設定

APIs & Services > Credentials > OAuth 2.0 Client IDs > Authorized redirect URIs

環境	URI
Supabase	https://[project-ref].supabase.co/auth/v1/callback
本番	https://app.example.com/api/auth/callback
テスト	https://test.example.com/api/auth/callback
ローカル	http://localhost:3000/api/auth/callback

重要: Google Console に登録されていない URI にリダイレクトしようとすると、redirect_uri_mismatch エラーが発生します。

Part 4: トラブルシューティング

1. redirect_uri_mismatch エラー

原因: Google Console に登録された URI と、実際のリクエストの URI が一致しない

確認方法:

ブラウザの開発者ツール → Network タブ
Google へのリクエスト（accounts.google.com）を選択
redirect_uri パラメータを確認
URL デコードして実際の URI を確認

解決策: Google Console に該当の URI を追加

2. DNS_PROBE_FINISHED_NXDOMAIN

原因: カスタムドメインの DNS 設定が間違っている

確認方法:

dig test.example.com CNAME

解決策: DNS レコードを正しく設定

# Vercel の DNS 管理を使っている場合
vercel dns add example.com test CNAME cname.vercel-dns.com

3. 環境変数に改行が入っている

症状: ログインは成功するが、API 連携でエラー

確認方法:

vercel env pull .env.check --environment=production
cat .env.check | grep REDIRECT | xxd | head
# 末尾に 0a (改行) があったら問題
rm .env.check

解決策:

vercel env rm REDIRECT_URI production --yes
printf "https://app.example.com/api/callback" | vercel env add REDIRECT_URI production

4. React Error #130 / export not found

原因: ファイル重複問題（index.ts と index.tsx の両方が存在）

確認方法:

find app components -name "index.ts" | while read f; do
  tsx="${f%.ts}.tsx"
  if [ -f "$tsx" ]; then
    echo "重複: $f と $tsx"
  fi
done

解決策: 重複ファイルのどちらかを削除

5. useXxx must be used within XxxProvider

原因: Component.tsx と Component/index.tsx の重複

確認方法:

find app components -name "*.tsx" | while read f; do
  dir="${f%.tsx}"
  if [ -d "$dir" ] && [ -f "$dir/index.tsx" ]; then
    echo "重複: $f と $dir/index.tsx"
  fi
done

6. Preview デプロイが 404

原因: Preview デプロイにエイリアスが設定されていない

解決策:

vercel ls | grep Preview | head -1
vercel alias <deployment-url> test.example.com

Part 5: CLI コマンドまとめ

Vercel

# デプロイ一覧
vercel ls

# 環境変数一覧
vercel env ls

# 環境変数の値を確認
vercel env pull .env.check --environment=production

# 環境変数の削除
vercel env rm VAR_NAME production --yes

# 環境変数の追加（printf で改行防止）
printf "value" | vercel env add VAR_NAME production

# エイリアス設定
vercel alias <deployment-url> <domain>

# DNS レコード一覧
vercel dns ls example.com

# DNS レコード追加
vercel dns add example.com subdomain CNAME value

Git Worktree

# Worktree 作成
git worktree add ../myapp-test test

# Worktree 一覧
git worktree list

# Worktree 削除
git worktree remove ../myapp-test

Supabase

# プロジェクト一覧
npx supabase projects list

# 設定をリモートにプッシュ
yes | npx supabase config push --project-ref <ref>

まとめ

やりたいこと	方法
本番/テスト環境の分離	Git Worktree + Vercel Preview
環境変数の設定	`printf` で改行防止
OAuth 認証のデバッグ	Network タブで redirect_uri 確認
Preview に固定ドメイン	`vercel alias`

テスト環境を正しく構築すれば、本番を壊す心配なく開発できます。
OAuth の設定は特にハマりポイントが多いので、この記事を参考にデバッグしてください。

参考リンク