Vercelで公開しよう

このページで学ぶこと

Vercel は Next.js を作った会社が提供するホスティングサービスです。
GitHub リポジトリと連携するだけで、作ったアプリを簡単に世界中に公開できます。

無料プランでできること

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

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

npm run build

エラーが出た場合は修正してから次に進みましょう。

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

Vercel ダッシュボードで「Add New Project」(サインアップ後はこの画面が表示されないことがあります)
GitHub のリポジトリ一覧から自分のプロジェクトを選ぶ
- 「No Git Repositories Found」と表示された場合は、「Configure GitHub App」から Vercel と GitHub の連携を行ってください。
- 「Repository access」では、「Only select repositories」を選び、デプロイしたいリポジトリにチェックを入れましょう。
デプロイしたいリポジトリの横にある「Import」をクリック

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

1〜2分でデプロイが完了します。
表示されたURLにアクセスして動作を確認しましょう。

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

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

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

環境変数が読めない
→ Vercel の環境変数設定を再確認してみてください。変数名のスペルミスが多いです。
　また、設定変更後は「Redeploy」が必要です。

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

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

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

来年度のチュートリアルの改善に活かすため、アンケートへのご協力をお願いします。
調査は完全匿名ですので、率直なフィードバックをお待ちしています！
アンケートに回答する