はじめに
本番環境で動いているアプリに新機能を追加したい。でも本番を壊したくない。
そんな時に必要なのが テスト環境 です。
この記事では、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 の設定は特にハマりポイントが多いので、この記事を参考にデバッグしてください。