【お名前.com】Vercelで独自ドメインを割り当てる方法を写真付きで解説
![【お名前.com】Vercelで独自ドメインを割り当てる方法を写真付きで解説](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F639f013556a941baa65d29b650dae51f%2F0620b50fdf95415d820c4478b9419437%2F37.jpg&w=1920&q=75)
![吹き出しのイメージ](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F639f013556a941baa65d29b650dae51f%2F4d4fae30d53241c3abf5f89f207a141b%2Fanimal.webp&w=256&q=75)
Vercelにデプロイしたアプリケーションのドメインを、独自のオリジナルドメインしたいな。方法を教えて!
以前の記事で、Vercelにアプリケーションを簡単にデプロイする方法について紹介しました。
VercelにデプロイしたアプリケーションのURLは通常、https://next_blog.vercel.app のようにhttps:// + プロジェクト名 + .vercel.appというドメインになり、Vercel上のみではプロジェクト名の部分しか変更することができません。
しかしドメインサイトでドメインを購入することで、.comや.jpといった有名なドメインや、もちろんその前の文字列も自由で完全なオリジナルに変更することができます。
当ブログのhttps://realunivlog.comもドメインを取得し、変更を行いました。
そこで今回は、
- お名前.comでドメインを取得する
- Vercelでドメインを変更する
方法について紹介します。
ぜひ最後までご覧いただき、参考にしていただけると幸いです。
お名前.comでドメインを取得する方法
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/773cfe5cddd0498b9385c9c14f6046cd/38.jpg?w=856&h=481)
まずはお名前.comのホームページへいき、以下のフォームに欲しいドメインのURLを入力します。
すると次のページが表示されるので、「⚪︎」のまだ空いているドメインを選択し、お申し込みに進みます。
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/9f9a30a3f91a45f3864b81dd46763f17/40.jpg?w=856&h=481)
※ドメインによっては無料、有料のものがあります。
申し込み確認ページに進むと、ドメイン名とレンタルサーバーが商品として登録されていますが、レンタルサーバーは不要なので削除してください。
その後は、アカウント登録を行いドメインの購入を完了してください。またアカウント登録後に発行される「お名前ID」は、覚えにくいので必ずメモしておきましょう。
※もちろん忘れてしまっても、照会する方法はあります。
Vercelでドメインを変更する
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/915c51e36dcd4074833edd89c452529d/39.jpg?w=856&h=481)
Nameserverを表示する
続いて、お名前.comで取得したドメインをVercelのプロジェクトに割り当てたいと思います。
まずはVercelのドメインを設定したいプロジェクトのダッシュボードへ進んでください。右上に「Domains」ボタンが」あるのでそこをクリックします。すると以下のページが表示されます。
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/6f5378e016644cd593c1877a7cb0771d/41.jpg?w=856&h=481)
フォームに先ほど取得したドメインを入力し、「Add」ボタンを押します。
![vercelのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/88f6f90f6d324631b2078e848b01cc8e/42.jpg?w=856&h=481)
Invalid Configurationというエラーが出ますが、問題ではありません。タブから「Nameservers」を選択してください。
そして、Set the nameservers of xxx.com (apex domain) to: の下に表示される2つのnameserverをメモしてください。
ns1.vercel-dns.com
ns2.vercel-dns.com
この2つを使用して、お名前.com側を設定していきます。
お名前.comでNameserverを設定する
お名前.comに戻り、初回で登録した「お名前ID」と「パスワード」でログインしてください。
左のタブから「ネームサーバー設定」、「ネームサーバーの設定」の順に選択します。
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/57c6572e58564d62a26eba40c227bb2e/43.jpg?w=856&h=481)
ドメインのチェックボックスを選択し、タブから「他のネームサーバーを利用」を選択します。
「1プライマリネームサーバー」と「2セカンダリネームサーバー」に、先ほどVercel側からメモした2つのネームサーバーを順番に入力しましょう。
![ドメインのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/072f589ff4884067820900cbdace172d/44.jpg?w=856&h=481)
設定を完了すればお名前.com側の準備は終了です。
Vercelに反映されているか確認する
それではVercelにもう一度戻ってみましょう。
![vercelのイメージ](https://images.microcms-assets.io/assets/639f013556a941baa65d29b650dae51f/57dbe53101624e31a6b2299737c319f7/45.jpg?w=856&h=481)
先ほど「Invalid Configuration」だった表記が、チェックマークとともに「Valid Configuration」に変わっていれば無事ドメインの変更が完了しています。
SSH化する
Vercelでは自動でSSH化を行なってくれるため、ドメインを設定した後の作業は特に必要ありません。ドメインの設定が完了した数分後にはSSH化も完了します。
最後に
ここまで、Vercelのプロジェクトに独自ドメインを割り当てる方法について紹介しました。
難しい設定などはなく、少しの作業で割り当てることができるため大変便利です。また、SSH化を自動で行なってくれるところも嬉しいポイントですね。
最近の開発者は、開発者専用に作られた.devというドメインを使用している人が増えているようです。興味のある方は、それを検討してみても良いかもしれません。
ぜひ独自ドメインを取得して、完全オリジナルなドメインを割り当ててみてくださいね。
ここまでお読みいただき、ありがとうございました。