Vercelで公開しよう

このページで学ぶこと

• Vercel とは何かがわかる
• Next.js アプリを Vercel にデプロイできる
• 環境変数を本番環境に設定できる

Vercel とは

Vercel は Next.js を作った会社が提供するホスティングサービスです。
GitHub リポジトリと連携するだけで、自動デプロイが設定できます。

無料プランでできること

• カスタムドメイン（yourapp.vercel.app 形式のURL）
• 自動HTTPS
• GitHub にプッシュするたびに自動デプロイ

デプロイする前の準備

チェック1: .env を gitignore していることを確認

# .gitignore に .env が含まれているか確認
cat .gitignore | grep .env

.env が表示されればOK。含まれていない場合は追加する。

チェック2: 本番用のコードをビルドできるか確認

npm run build

エラーが出た場合は修正してから進む。

チェック3: コードを GitHub にプッシュ

git add .
git commit -m "デプロイ準備完了"
git push origin main

Vercel にデプロイする

ステップ1: Vercel アカウントを作る

1. vercel.com にアクセス
2. 「Start Deploying」→ GitHub でサインアップ
3. GitHub との連携を許可する

ステップ2: プロジェクトをインポートする

1. Vercel ダッシュボードで「Add New Project」
2. GitHub のリポジトリ一覧から自分のプロジェクトを選ぶ
3. 「Import」をクリック

ステップ3: 環境変数を設定する

ここが重要です。 .env ファイルは GitHub にアップしていないため、Vercel 側で設定する必要があります。

1. 「Environment Variables」のセクションを展開する
2. 以下の変数を1つずつ追加する：

3. 全て入力したら「Deploy」をクリック

ステップ4: デプロイ完了を待つ

1〜2分でデプロイが完了します。
https://your-app-name.vercel.app にアクセスして動作を確認しましょう。

本番URLを Supabase に登録する

Supabase Auth を使っている場合、本番URLを登録しないとリダイレクトがうまく動きません。

1. Supabase ダッシュボードを開く
2. 「Authentication」→「URL Configuration」
3. 「Site URL」に本番URL（https://your-app-name.vercel.app）を入力
4. 「Redirect URLs」にも同様に追加

自動デプロイの仕組み

Vercel と GitHub を連携すると、main ブランチへのプッシュのたびに自動でデプロイされます。

よくあるエラー

ビルドエラーが出る
→ まず npm run build をローカルで実行して、同じエラーが出るか確認する。
　エラーメッセージをAIに貼り付けて解決策を聞くのが早い。

環境変数が読めない
→ Vercel の環境変数設定を再確認する。変数名のスペルミスが多い。
　設定変更後は「Redeploy」が必要。

Supabase に接続できない
→ DATABASE_URL のパスワード部分が正しいか確認する。
　特殊文字が含まれる場合は URL エンコードが必要なこともある。

確認しよう

• npm run build がエラーなく通った
• GitHub に最新コードをプッシュした
• Vercel に環境変数を設定した
• デプロイ後、本番URLでアプリが動いた
• ログイン・データ保存など主要機能が動作した

次のステップ

おめでとうございます！アプリが公開できました。
発表会に向けて、内容を磨いていきましょう。

困ったときは リファレンス を確認するか、メンターに相談してください。