はじめに
こんにちは。前編に引き続き、動物病院向けWebアプリ Vet Clinic Assistant を
開発しているsirocodevです。
前編ではカラーパレット・Supabase連携・Googleログイン・カレンダー機能を
実装しました。今回はいよいよ、このアプリを実際にVercelへデプロイして、
誰でもアクセスできる状態にするところまでを書いていきます。
完成イメージ
実際に公開したURLはこちらです。
👉 https://vet-clinic-ai-9gzz.vercel.app
今回やったこと
- GitHubリポジトリの作成とpush
- Vercelへのデプロイ
- 本番用の環境変数設定
- Google OAuthのリダイレクトURL設定（Google Cloud Console / Supabase 両方）
対象読者
- Next.jsアプリを初めてVercelにデプロイする方
-
next/font/googleがビルド時にエラーになって困っている方 - OAuthの
redirect_uri_mismatchに遭遇している方
開発環境
- Next.js 15
- React
- TypeScript
- Supabase (Database / Storage / Auth)
- Vercel
1. GitHubにリポジトリを作ってpushする
GitHub上で新規リポジトリを作成し、ローカルのプロジェクトをpushしました。
ここで一つ注意点があります。GitHubでリポジトリを作る際、
「Add a README file」にチェックを入れると、リモート側に最初から
コミットが1つ存在する状態になります。ローカルにも別のREADMEがある場合、
最初のpushが rejected になることがあります。
! [rejected] main -> main (fetch first)
error: failed to push some refs
このケースでは、ローカルの内容を正にしたいので、force pushで解決しました。
git push -u origin main --force
2. Vercelにデプロイする
- Vercelにログイン（GitHubアカウントで連携すると楽です）
- 「Add New Project」からリポジトリをインポート
- Framework Presetは自動的に「Next.js」が検出される
- 環境変数を設定（
.env.localの内容をそのまま貼り付け可能） - Deployをクリック
環境変数のうち、NEXT_PUBLIC_ から始まるものはブラウザに露出しても
問題ない値、SUPABASE_SECRET_KEY だけは本当に秘密にすべき値です。
Vercelの「Sensitive」オプションは、この後者にだけチェックを入れれば
十分でした。
3. 本番URLをSupabase / Google Cloud側に登録する
デプロイが終わったら、本番URLを認証まわりの2箇所に反映する必要が
ありました。
Supabase側（Authentication > URL Configuration）
- Site URL: 本番URL (
https://vet-clinic-ai-9gzz.vercel.app) - Redirect URLs: ローカル用と本番用、両方を登録
http://localhost:3000/auth/callback
https://vet-clinic-ai-9gzz.vercel.app/auth/callback
Google Cloud Console側（意外な落とし穴）
最初、てっきり自分のアプリのURLをGoogle側に登録すればいいと
思っていたのですが、実際に登録すべきなのは Supabaseのコールバック
URL でした。
https://<プロジェクトref>.supabase.co/auth/v1/callback
OAuthのフローは「アプリ → Google → Supabase → アプリ」という順で
リダイレクトが挟まっているため、Googleが検証するのはSupabase側の
URLだという点を理解していませんでした。
実際にハマったこと
今回は4つ、それぞれ性質の違うエラーに遭遇しました。
① クリティカルなセキュリティ脆弱性（CVSS 10.0）
デプロイ時、依存関係インストールのログにこんな警告が出ていました。
npm warn deprecated next@15.1.6: This version has a security vulnerability.
調べてみると、CVE-2025-66478という、App RouterのReact Server Components
プロトコルに起因する未認証RCE（リモートコード実行）の脆弱性でした。
next を 15.1.9 以上に上げることで解決しました。ローカルで
npm run dev しているだけでは気づけなかったので、実際にデプロイ
してみて初めて発見できたという点で印象的でした。
② Googleフォントのビルド時フェッチ失敗
Vercel上でのビルドが以下のエラーで失敗しました。
request to https://fonts.gstatic.com/s/manrope/v20/....woff2 failed, reason:
Retrying 1/3...
next/font/google はビルド時にフォントファイルをダウンロードして
自前でホストする仕組みなのですが、このリクエストがビルドマシンから
失敗すると、ビルドごと止まってしまいます。調べたところ既知の問題
だったため、next/font/google をやめて、従来通り <link> タグで
Google Fontsを読み込む方式に変更しました。これでビルドが外部
ネットワークに依存しなくなり、解決しました。
③ redirect_uri_mismatch
Googleログインを試したところ、次のエラーが出ました。
400 エラー: redirect_uri_mismatch
原因は上述の通り、Google Cloud Console側に自分のアプリのURLを
登録してしまっていたことでした。Supabaseのコールバック URL
（https://<ref>.supabase.co/auth/v1/callback）に登録し直すことで
解決しました。
次にやりたいこと（今回の宿題）
デプロイ作業と並行して、右上のログインユーザー表示のリアルタイム化、
Attending Vetとログインアカウントの連携、アプリ内通知（ベルアイコン）も
実装できました。残っている宿題は以下の1点です。
- Consultationの編集・キャンセル機能の実装
そして次のステップとして、Whisperによる音声文字起こしと、AIによる
診療内容の自動要約に着手していきたいと思っています。
おわりに
今回は「動くところまで作る」のと「実際に公開して誰かに使ってもらえる
状態にする」のとの間に、これだけの距離があるのだと実感した回でした。
特に ②〜③ は、ローカル環境では絶対に気づけなかった問題ばかりで、
デプロイして初めて見える世界があるのだと学びました。
最後まで読んでいただき、ありがとうございました！