はじめに
自己学習としてWebアプリを作成し、デプロイまで行った。
さらに独自ドメインからアクセスできるようにしたかったので、その設定をしたときの忘備録。
対象
Webアプリのデプロイまではできるようになった人
独自ドメイン設定の仕方がわからない人
前提
今回利用するサービスはVercel。
ドメインはムームードメインで取得済み。
説明しないこと
Vercelへのデプロイ方法
ドメインの取得方法
手順
Vercel上の操作
Vercelの管理画面からドメインを変更したいプロジェクトを選択し、
Settings>Domainsをクリックする。
Add Domainをクリックする。
以下のようなダイアログが表示されるので、必要事項を記入する。
以下のように記入する。
Redirect ~オプションを有効にすると、example.com にアクセスしたとき www.example.com へリダイレクトされるようになる。
Saveをクリックすると、以下のようにwwwありとなしの2つのドメイン設定が作成される。
このままでもいいが、自分はwwwなしドメインにリダイレクトされるよう統一したかったため、以下のように設定を変更した。
- wwwなしドメイン
Connect to an environmentを選択。
Productionを選択。
- wwwありドメイン
Redirect to Another Domainを選択。
308 Permanent Redirect、wwwなしのドメインを選択。
ムームードメインの管理画面で設定するため、DNS Recordsの値を確認しておく。
ムームードメイン上での操作
ムームードメインの管理画面にログインし、
ドメイン管理>ムームーDNS>設定するドメインの変更をクリックする。
設定2へ進むをクリックする。
以下のような画面に遷移するため、設定を追加するをクリックする。
以下のような画面に遷移するため、Vercelで確認した項目を記入する。
VercelとDNS設定の項目は以下のように対応しているため、合わせて記入する。
- VercelのType -> DNS設定の種別
- VercelのName -> DNS設定のサブドメイン(Nameが@の場合は何も記入しない)
- VercelのValue -> DNS設定の内容
正常に設定を追加できたら手順は完了。
あとはVercel側で反映されるまで数分待つ。
Valid Configurationと表示されたら、独自ドメインからアクセスできるようになっている。
おわりに
独自ドメイン設定をすると自分のWebサイト感が増すので、ドメイン取得できる余裕がある人はぜひやってみたほうがいいと思う。
やってみたら難しくないし、VercelではSSL証明書の作成も自動的にやってくれるのでその辺も楽で助かる。