購入した独自ドメインを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」から変更可能)

![スクリーンショット 2020-08-08 12.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/3fcfa021-202b-62ec-d682-b742bc9eecbc.png)

## 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にはなっていないはずです)

![スクリーンショット 2020-08-08 13.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/06b24fb3-890c-e654-e331-209dbc29aea6.png)


## 独自ドメインをPointDNSに設定

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

```
heroku addons:create pointdns:developer
```

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

```
heroku addons:open pointdns
```

ダッシュボードには自分が設定したドメインが載っています。**3つのNSレコードは次の「ネームサーバーの変更」で使用します。**
![スクリーンショット 2020-08-08 13.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/ba251b63-c812-2398-4e43-8239b687291c.png)

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

![スクリーンショット 2020-08-08 13.31.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/1b97abf1-fee4-a8eb-3d06-bd719457c9db.png)

##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 
```
![スクリーンショット 2020-08-08 13.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/dcf35c2f-f0bd-e759-951b-f97f7d701fb1.png)


####ALIASレコード
ALIASレコードのNameは空のまま。HostNameには**www.tech-tv.site**の`[ランダムな文字列].herokudns.com `を追加します。
![スクリーンショット 2020-08-08 13.44.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/26c85dd8-3b6a-a4e4-f0af-5573de7759a7.png)


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

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

![スクリーンショット 2020-08-08 13.54.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/75566d5d-816b-2a90-8712-1a0cad6d9daf.png)

「その他のネームサーバーを使う」のネームサーバーにPointDNSの管理画面にあった3つのNSレコードを記入します。
![スクリーンショット 2020-08-08 13.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/a022575f-e2fe-cdd2-8842-53120450a833.png)

記入したら確認を押して更新をしたら設定完了です。
実際にドメインが反映されるまで最大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. 設定したいドメインにチェックを入れて「次へ」進む
![スクリーンショット 2020-08-08 14.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/8358e53f-e2ae-40fe-e2bc-1d0a3acbee48.png)

2-2. DNSレコード設定を利用するの「設定する」に進む
![スクリーンショット 2020-08-08 14.09.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/ac6323a7-ff31-821b-2ca5-c3e54294b4fa.png)

2-3. CNAMEレコードの追加
ホスト名に「www」
TYPEは「CNAME」
VALUEは「[ランダムな文字列].herokudns.com 」を記入します。
![スクリーンショット 2020-08-08 14.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107345/57a61358-167e-e094-0aa0-2fa893a2fe83.png)

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