🔍 検索
投稿する
📚 AI駆動開発

Vercel環境変数の設定とデプロイ実践

Vercelでのデプロイエラーを解決するため、Supabaseとの連携に必要な環境変数の設定方法と、Git管理下のセキュリティ上の注意点を解説します。

学習ポイント

  • Vercelのデプロイログを確認し、エラーの原因を特定する方法
  • GitHubに「.env.local」をアップロードしてはいけない理由とセキュリティリスク
  • Vercel CLIを使用して本番環境へ安全に環境変数を設定する手順

デプロイ後の動作不良を解決するためには、まずVercelの「View Logs」からエラー内容を正確に把握することが重要です。今回はSupabaseの環境変数が設定されていないことが原因で、データベース接続に失敗していることが判明しました。

環境変数とセキュリティ

開発環境で使用する「.env.local」ファイルには、APIキーなどの機密情報が含まれています。これをGitHubなどの公開リポジトリにアップロードすると、削除しても履歴に残るため非常に危険です。そのため、「.gitignore」ファイルに登録してGitの管理対象から外すのがスタンダードな開発手法です。

Vercelへの環境変数設定手順

GitHubにファイルを上げずにVercel側で環境変数を利用するには、以下の2つの方法があります。

  • **Vercelダッシュボード**: ブラウザ上で「Settings」→「Environment Variables」から手動で入力する。

  • **Vercel CLI**: コマンドラインツールを使用して、ローカルから直接Vercelのサーバーへ設定情報を送信する。動画内では効率的なCLIでの設定を推奨しています。

デプロイ結果の確認

環境変数の設定完了後、再デプロイを行うことでサイトが正常に表示されます。ログイン状態に応じたフロントエンドの表示制御（未ログイン時のモザイク表示など）が、本番環境のURLでも正しく実行されることを確認して完了です。

**使用ツール**

  • Vercel (ホスティングプラットフォーム)

  • Claude Code / Claude (AIコーディングアシスタント)

  • Supabase (Backend as a Service)