お名前.comで買ったドメインをHerokuのアプリケーションに設定しようとしたときに、詰まったところがあったので正しく設定するための流れを書いておきます。
実際に使用した tech-tv.site というドメインを例に用いています。
参考記事：https://devcenter.heroku.com/articles/custom-domains
準備
- Herokuにアプリをデプロイしておきます(〇〇.herokuapp.com)
- お名前.comなどのレジストラ(ドメイン管理会社)からドメインを購入しておきます
- 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
-
heroku domainsで追加したwwwありドメインの[ランダムな文字列].herokudns.comを確認します - 購入したドメインのレジストラからCNAMEレコードのVALUE先ほどの
[ランダムな文字列].herokudns.comを入れます(以下、お名前.comの場合を例に解説)
2-1. 設定したいドメインにチェックを入れて「次へ」進む
2-2. DNSレコード設定を利用するの「設定する」に進む
2-3. CNAMEレコードの追加
ホスト名に「www」
TYPEは「CNAME」
VALUEは「[ランダムな文字列].herokudns.com 」を記入します。
記入が完了したら、確認画面へ進み「設定する」ボタンを押して設定完了です。