はじめに

自己学習としてWebアプリを作成し、デプロイまで行った。
さらに独自ドメインからアクセスできるようにしたかったので、その設定をしたときの忘備録。

対象

Webアプリのデプロイまではできるようになった人
独自ドメイン設定の仕方がわからない人

今回利用するサービスはVercel。
ドメインはムームードメインで取得済み。

Vercelへのデプロイ方法
ドメインの取得方法

Vercelの管理画面からドメインを変更したいプロジェクトを選択し、
Settings>Domainsをクリックする。

Add Domainをクリックする。

以下のようなダイアログが表示されるので、必要事項を記入する。

以下のように記入する。
Redirect ~オプションを有効にすると、example.com にアクセスしたとき www.example.com へリダイレクトされるようになる。

Saveをクリックすると、以下のようにwwwありとなしの2つのドメイン設定が作成される。

このままでもいいが、自分はwwwなしドメインにリダイレクトされるよう統一したかったため、以下のように設定を変更した。

ムームードメインの管理画面で設定するため、DNS Recordsの値を確認しておく。

設定2へ進むをクリックする。

以下のような画面に遷移するため、設定を追加するをクリックする。

以下のような画面に遷移するため、Vercelで確認した項目を記入する。
VercelとDNS設定の項目は以下のように対応しているため、合わせて記入する。

正常に設定を追加できたら手順は完了。
あとはVercel側で反映されるまで数分待つ。
Valid Configurationと表示されたら、独自ドメインからアクセスできるようになっている。

独自ドメイン設定をすると自分のWebサイト感が増すので、ドメイン取得できる余裕がある人はぜひやってみたほうがいいと思う。
やってみたら難しくないし、VercelではSSL証明書の作成も自動的にやってくれるのでその辺も楽で助かる。