Vercelにデプロイしたアプリに独自ドメインを設定する方法
今回の記事は、Vercelにデプロイしたアプリに独自ドメインを設定する方法を解説します。
Vercelで展開されたアプリにはvercelによって独自ドメインが自動で付与されます。
しかし、自分で登録したドメイン名に置き換えることができます。独自ドメイン登録後もHobbyプランであれば継続して無料で利用できます。
Vercel側での操作
まず、Vercelのアカウントでログインし、独自ドメインを設定したいプロジェクトを選択します。
以下のような画面に入ったら、画面右上の「Domains」を選択します。
「Domains」を選択すると、以下のような画面になります。
画面上部の入力フォームに設定したい独自ドメインを入力し、「Add」を選択します。
独自ドメインを入力して「Add」を選択すると、以下のような画面になります。
ラジオボタンの選択肢が3つ現れますが、最初から選択されている一番上の「Recommended」と記載されている選択肢のまま、画面右下の「Add」を選択します。
「Add」を選択すると、以下の画面のように「xxx.com」と「www.xxx.xom」の2つのドメイン名について、DNSレコードを追加するように指示されます。
以下のような情報が表示されるので、コピーするなどして控えておき、正しくDNSサーバーにレコードを登録できるようにします。
| コピーしておくレコード情報 | |
|---|---|
| Type | レコードタイプ（Aレコード、CNAMEレコード） |
| Name | レコードネーム、メインドメインを入力した場合は「＠」 |
| Value | ドメイン名の解決先（IPアドレスなど） |
ここから先は、各自のDNSサーバーでの操作になります。
今回は、AWSが提供しているLightsailのDNSサーバーに登録していきます。
DNSサーバー側の操作
ここから先の操作は、DNSレコード提供元によって多少の操作が異なってきます。
今回はAWSが提供するLightasailのDNSにレコードを追加していきます。
各DNSサーバー提供元の入力方法と比較しながら、レコードを設定してください。
Aレコード設定
実際にDNSサーバーに設定したAレコードは以下のようになります。
CNAMEレコード設定
同様に、CNAMEレコードもDNSサーバーに設定します。
※お名前ドットコムのようにDNSサーバーがデフォルトでドメイン管理元に設定されている場合は、外部のDNSサーバーを利用するように設定する必要があります。
Vercel側での独自ドメインの設定完了確認
DNSレコードを正しく設定後、もう一度Vercelのドメイン設定画面に戻ります。
以下のように、入力した各ドメイン名の枠内に「Valid Configuration」と表記されていれば、正しくドメイン名が設定されています。
正しく設定したのに、「Valid Configuration」が表示されない場合は、DNSレコードの設定が反映されるまで少し時間を空けてみましょう。
新しいドメイン名を利用する場合は、数十分ほど時間が必要な場合があります。
アプリへのアクセス確認
Vercelのドメインの設定画面で「Valid Configuration」が確認出来たら、実際にブラウザにドメイン名を入力して、インターネット上に公開されているか確認してみましょう。
ブラウザの画面上部の入力欄に「https://設定したドメイン名」と入力してみます。
以下のように、Vercelにデプロイしたアプリが正常に確認できれば、ドメイン設定完了です。
以上でVercelにデプロイしたアプリに独自ドメイン名を設定する方法は全て完了です。
お疲れさまでした！
関連記事
＼ シェアする ／
