購入した独自ドメインをHerokuにwwwのサブドメインなしで設定する方法

お名前.comで買ったドメインをHerokuのアプリケーションに設定しようとしたときに、詰まったところがあったので正しく設定するための流れを書いておきます。
実際に使用した tech-tv.site というドメインを例に用いています。

参考記事：https://devcenter.heroku.com/articles/custom-domains

準備

1. Herokuにアプリをデプロイしておきます(〇〇.herokuapp.com)
2. お名前.comなどのレジストラ(ドメイン管理会社)からドメインを購入しておきます
3. HerokuのPlanをFreeではなく、Hobby以上にしておきます(「Change Dyno Type」から変更可能)

Herokuのアプリに独自ドメインを追加する

以下のコマンドを実行してHerokuのアプリにドメインを追加します

heroku domains:add www.tech-tv.site

wwwなしにする場合は、以下のようにwwwなしのドメインも追加します。

heroku domains:add www.tech-tv.site
heroku domains:add tech-tv.site

ドメインが追加されたかを確認します。

$ heroku domains
=== tech-tv Heroku Domain
tech-tv.herokuapp.com

=== tech-tv Custom Domains
Domain Name      DNS Record Type DNS Target                                                  
tech-tv.site     ALIAS or ANAME  [ランダムな文字列].herokudns.com           
www.tech-tv.site CNAME           [ランダムな文字列].herokudns.com 

tech-tv.siteが追加されていることがわかります。
このあと「独自ドメインをPointDNSに設定」のときにCNAMEが書いてある方の[ランダムな文字列].herokudns.comを利用します。

Herokuのダッシュボード上では以下のようになっています。(ただしACM StatusはまだOKにはなっていないはずです)

独自ドメインをPointDNSに設定

HerokuのPointDNS(ドメインを管理するアドオン)を使用するため、以下のコマンドを実行します。
PointDNSの参考：https://devcenter.heroku.com/articles/pointdns

heroku addons:create pointdns:developer

PointDNSのダッシュボードを開きます

heroku addons:open pointdns

ダッシュボードには自分が設定したドメインが載っています。3つのNSレコードは次の「ネームサーバーの変更」で使用します。

ドメイン名をクリックすると設定されているレコードが載っています。

CNAMEとALIASを確認/更新

CNAMEレコード

CNAMEレコードのNameにはwwwを追加。HostNameにはwww.tech-tv.siteの[ランダムな文字列].herokudns.comを追加します。

$ heroku domains
=== example.com Heroku Domain
tech-tv.herokuapp.com

=== tech-tv Custom Domains
Domain Name      DNS Record Type DNS Target                                                  
tech-tv.site     ALIAS or ANAME  [ランダムな文字列].herokudns.com           
www.tech-tv.site CNAME           [ランダムな文字列].herokudns.com 

ALIASレコード

ALIASレコードのNameは空のまま。HostNameにはwww.tech-tv.siteの[ランダムな文字列].herokudns.comを追加します。

これでポイントDNSの変更は完了です。

ネームサーバーの変更

お名前.comの管理画面を元に記載しますがどのレジストラでもやることは同じです。
お名前.comではここから「ネームサーバーの変更」を行います。

「その他のネームサーバーを使う」のネームサーバーにPointDNSの管理画面にあった3つのNSレコードを記入します。

記入したら確認を押して更新をしたら設定完了です。
実際にドメインが反映されるまで最大72時間ほどかかるそうです。私は24時間程度かかりました。

wwwのサブドメインがありでも良い場合

wwwのサブドメインがありでも良い場合には同じ流れでも設定が可能ですが、PointDNSを利用せずにも設定できます。

以下、その手順を記載します。

$ heroku domains
=== example.com Heroku Domain
tech-tv.herokuapp.com

=== tech-tv Custom Domains
Domain Name      DNS Record Type DNS Target                                                  
www.tech-tv.site CNAME           [ランダムな文字列].herokudns.com 

1. heroku domainsで追加したwwwありドメインの [ランダムな文字列].herokudns.comを確認します
2. 購入したドメインのレジストラからCNAMEレコードのVALUE先ほどの[ランダムな文字列].herokudns.comを入れます(以下、お名前.comの場合を例に解説)

2-1. 設定したいドメインにチェックを入れて「次へ」進む

2-2. DNSレコード設定を利用するの「設定する」に進む

2-3. CNAMEレコードの追加
ホスト名に「www」
TYPEは「CNAME」
VALUEは「[ランダムな文字列].herokudns.com 」を記入します。

記入が完了したら、確認画面へ進み「設定する」ボタンを押して設定完了です。