個人開発のアプリを独自ドメインでVercelへデプロイしたのでメモしておく。
Projectを作成する
まずVercelのダッシュボードへ移動する。
１：Create a New Projectをクリック
2：ホスティングしたいアプリケーションを選択する
まず検索窓にRepository名を入力する。
今回はプライベートなRepositoryをホスティングしたかったので、Vercelにプライベートリポジトリをimportをするための権限を与える必要がある。
『Configure GitHub App』をクリック。
どのアカウントにVercelをインストールするか選択する。
Vercelをインストールするアカウントを選択すると、VercelがアクセスできるRepositoryの選択画面へ遷移する。
すべてのRepositoryへアクセスしても良ければ『All repositories』を選択、特定のRepositoryのみへのアクセスを許可する場合は『Only select repositories』を選択する。
自分の場合は、全てのRepositoryへのアクセスはさせたくなかったので、『Only select repositories』を選択。
選択したら『Save』を押す。
Saveをするとデプロイするページへ遷移するので、まずは使っているフレームワークを選択する。
今回はNext.jsのアプリケーションなので、Next.jsを選択。
あとは環境変数の設定などがあれば、Environment Variablesで設定できる。
最後に『Deploy』をクリックする。
Projectに独自ドメインを紐付ける
Projectの作成が終わったら、このProjectに取得したドメインを紐づける。
まだドメインを取っていないようであれば、ドメインの取得費用の安い『お名前.com
１：取得したドメインを追加する
まず『Settings』をクリックし、左サイドバーの『Domains』をクリック。
そうすると、以下のような画面に遷移する。
次に取得したドメインを入力して、『Add』をクリックする。
1番上のAdd www [Your Site]~ and redirect [Your site] to itを選択し『Add』する。
独自ドメインをAddすると、ネームサーバーを設定してくれと言われるので、Intended Nameserversに記載されている2つの値をそれぞれコピーしておく。
コピーしたネームサーバーの値をドメインを取得したサイトで設定する。
設定の方法だが、『お名前.com
以上で独自ドメインの紐付けが完了した。
しばらくすると、設定したドメインでサイトを閲覧できるようになる。