Vercelで公開するWebアプリにサブドメイン設定してみた。

はじめに

個人開発のWebサイト・Webアプリ。作ったからには多くの人に見てもらいたいのが人の性。カスタムドメインなぞなくとも問題なく公開はできますが、我が子のように丹精込めて作った思い入れのあるWebアプリ、そりゃ名前の一つくらい付けてあげたくなりますよね。そんな時はお名前.comを利用してオリジナルのドメインを取得・設定してあげましょう。それでも年々増える請求額、Webアプリごとに数年単位で取り続けるわけにはいかないでしょう。しかしサブドメインを取得すれば1つのドメインで複数のウェブアプリを公開することができるようになります。

ドメインの構造

そもそもドメインとは、各PCのインターネット上での住所のようなもので、IPアドレスを人間が識別しやすくした一意のものという理解で良いと思います。対してサブドメインとは、そのドメインにさらに文字列を追加することでドメインを分割したものになります。

ドメインの取得

ドメインの取得はお名前.comから可能です。基本は最初の1年無料or1円ですが、2年目移行は料金がかかるので、注意してください。

サブドメイン設定

Vercel側の設定

• Vercelにログイン→ [Overview] →[（アプリ名）] → [Settings] → [Domains] とクリックして進んでいくと、下のような画面が現れます。

  

• "mywebsite.com"というプレイスホルダーを持ったフィールドがあるので、ここにサブドメインを持った任意のURLを入力し、「Add」ボタンをクリックします。

• "Invalid Configuration"のエラー状態のドメインが表示されます。併せて"CNAME (Recommended)"というタブの下に"Type"・"Name"・"Value"という、それぞれ"CNAME・(サブドメイン名)・(URL)"の値を持った情報が現れます。これらの情報を、次はお名前.com側で設定していきましょう。

お名前.com側の設定

ネームサーバーの設定

• お名前.comにログイン→ [ネームサーバーの設定] → [(ドメイン名のチェックボックス)] → [お名前.com各サービス利用(タブ)] → [お名前.comのネームサーバーを使う] → 「設定する」ボタンで完了となります。ちなみにこちらのサーバー利用は有料（1,500円/月 ※2022年12月時点）なので、ご利用は計画的に。。

DNSレコードの設定

• お名前.comにログイン→ [ドメイン] → [ドメイン機能一覧] → [DNS関連設定] → [次へ(ボタン)] → 「DNSレコード設定を利用する」とクリックして進んでいきます。
• すると、レコード入力画面が現れます。ここでは以下の表の通り5つの情報を入力・選択していきますが、まずは"TYPE"をデフォルトで設定されている"A"から"CNAME"への変更を忘れないでください。今回はサブドメインを設定していますが、"A"はドメイン設定時に使用するものであるため今回は使えません。
• "CNAME"に変更後、は下表の"ホスト名"、"TYPE"、"VALUE"に、それぞれVercel側で設定した項目を入力するだけです。プリセットされている値もあると思うので、確認しつつ入力してください。

  項目	入力内容
  ホスト名	新しく作成するサブドメイン（Vercel側の"Name"）
  TYPE	CNAME（Vercel側の"Type"）
  TTL	3600
  VALUE	URL（Vercel側の"Value"）
  状態	「有効」

• 上記入力完了後、「追加」をクリックしてDNSレコードが追加されるので、画面一番下までスクロールの上「確認画面へ進む」とすれば設定完了です。※「確認画面へ進む」クリック後"ドメインプロテクション"オプションの申し込みのダイアログが出てくると思いますがこちらは任意です。"ドメインプロテクション"はドメインに関わる各種設定の保護をしてくれる機能で、ドメイン名の不正変更等に役立ちますが、サイトの規模がまだ小さい場合は約1,000円/月を払ってまで必要ではないと個人的には思います。また他にも"Whois情報公開代行メール転送"オプションというのもありますが、こちらも設定する必要はないと思います。
• 設定完了後、反映まで少々時間がかかりますが正しく設定されていれば数時間以内には使えるようになっているはずです。

まとめ

参考

• お名前.com