内容
Next.jsで作成したプロジェクトをVercelにデプロイする方法についてまとめ。
Next.jsのプロジェクトは既にGitHubにpush済、Vercelのサインアップは既に完了している前提で進めます。
目次
デプロイ手順
Vercelのプロジェクトを作成
Vercelのダッシュボード > Add New... > Project を選択
GitHubにVercelからのリポジトリへのアクセスを許可
GitHubの画面が開くので、アクセスを許可
すべてのリポジトリへのアクセスを許可する場合は「All repositories」を選択。
選択したリポジトリへのアクセスのみ許可する場合は「Only select repositories」を選択。
GitHubのリポジトリを選択
Continue with GitHub
対象のリポジトリを選択 > Import
環境変数など必要な設定を入力
プロジェクト名、環境変数、その他必要な設定を入力し > Deploy
公開されたサイトを確認
問題なくデプロイが完了すると、「Congratulations!」と表示される。
「Go to Dashboard」をクリックし、ダッシュボードへ進む。
プロジェクトの管理画面が開かれ、右上の「Visit」をクリックすると、公開されたサイトを確認できる。
下には公開されたURLが表示されている。
サブドメインの変更
サイトのURL ~.vercel.appはサブドメインの部分を変更することができる。
プロジェクト上部「setting」タブ > Domains > 現在のドメインの右側「Edit」
※ 自分が所有しているドメインを追加し、設定することもできる
所有しているドメインを入力 > ADD
環境変数の追加・編集
プロジェクト上部「setting」タブ > Environment Variables
から新しい環境変数を追加・既存環境変数の編集をする。
トラブルシューティング
Vercelへのデプロイ時にエラー解決で小一時間はまったため、その時のエラー対応を別記事にまとめております。
記事はこちら（ModuleNotFoundErrorの解決）
その後の運用
プロジェクトのソースコードを変更したとき、修正箇所をcommit ⇒ pushしてGitHubのリモートリポジトリに反映させるだけで、VercelではGitHubリポジトリの変化に反応し自動デプロイ処理が走る。
デプロイ処理が完了するとサイトに変更が反映される。
以上