初めてHerokuで独自ドメインを公開するあなたへ


※この記事は2018年9月に公開後、herokuのバージョンアップを受けての変更点を反映させた内容になります。（2018年10月31日時点）

##独自ドメインで公開したい

最近herokuを使って独自ドメインを公開するということがあり、少し調べていましたが、いまいちまとまったものがないことと、あまり最新のものがなかったので改めて書いてみようと思いました。

##この記事で書くことと書かないこと

この記事では初めて独自ドメインを公開する、、、！という人に向けて、
簡易に独自ドメインを公開するまでの最短のプロセスを記そうと思うので、
herokuでやりやすい、サブドメイン（wwwがついてるもの）の公開の仕方を書こうと思います。
ルートドメインの公開の仕方に関しては次回の記事で書こうと思います。

## 前提
 - すでにドメインはバリュードメインやお名前.comを使って取得しているものとする
 - herokuはhobbyプラン（無料の一つ上の7$のプラン）を使っているものとする（このプラン以上じゃないと独自ドメインが使えないため）

##必要なこと

独自ドメインの公開に必要なことは以下の通りです。

 - heroku側の設定をすること
 - ドメイン側の設定をすること
 
この2つをやればすぐに公開できます。

##heroku側の設定について

まずはheroku側の設定をしてみます。
前提としてherokuにすでにデプロイしていることとします。
（herokuのデプロイに関しては <a href="https://qiita.com/NaokiIshimura/items/eee473675d624a17310f" target='_blank'>この記事</a> がとてもわかりやすかったので参照してみてください。）


### **herokuにドメインを追加する**

最初に、デプロイした状態で

```
heroku domains:add www.[取得したドメイン]
heroku domains:wait www.[取得したドメイン]
```

と入力します。
これでherokuにドメインが追加されました。
例えば、 `sample.com` というドメインを取得したなら、

```
heroku domains:add www.sample.com
heroku domains:wait www.sample.com
```

と入力することで完了です。

別の方法として、herokuのダッシュボードからも設定ができます。
使用しているアプリのページへ飛び、[Setting]の部分から、下記の画像のような [Domains and certifications] というところがあるので、そこから [Add domain] のボタンを押すことで追加することもできます。
注意として、ここでも `www.` をつけるのを忘れないようにしましょう。

![スクリーンショット 2018-08-03 17.19.06.png](https://qiita-image-store.s3.amazonaws.com/0/223118/a9c8f7bc-25cc-4e66-282b-ce842f9672f0.png)

いずれの方法にしても、ドメインが追加されて、

```
Domain Name       DNS Record Type         DNS Target
-----------       ----------------        ---------------------------
www.[取得したドメイン] CNAME                   [ランダムな英語と数字の組み合わせ].herokudns.com
```
と出てくれば完了です。
※herokuのバージョンが2018年9月に変更され、もともと DNS Targetは
`www.[取得したドメイン].herokudns.com` 
だったのが
`[ランダムな英語と数字の組み合わせ].herokudns.com`
になっています。このようにバージョンによって若干設定の仕方が異なるので、
つまずいたときは、<a href="https://devcenter.heroku.com/articles/custom-domains" target="_blank">公式ドキュメント</a> を見るのをお勧めします。


### **PointDNSを設定する**

ドメインを追加したら、herokuのアドオンである **Point DNS** を追加しましょう。
DNSとは簡単にいうとドメインと IPアドレス（インターネット上の住所） を結びつけて、
取得したドメインが、ちゃんとインターネット上に住所を構えるためのシステムです。

Point DNSはherokuがアドオンとして提供しているDNSです。
今回はそのPoint DNSを使ってDNS設定を行なっていきます。

①ドメインを追加した後に、

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

と入力し、point DNSをherokuに追加します。

先ほどと同様にherokuのダッシュボードでも可能です。
herokuのダッシュボードでやるには、 [Resources] の [Add-ons] の下の検索窓から Point DNSと検索すると出てきます。（下記の画像を参考にしてください。）

<img width="1243" alt="スクリーンショット 2018-08-03 17.43.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/223118/2655f236-f139-b4ea-9451-efed399cf47c.png">

②アドオンを追加したら、ついでにレコードの設定もします。
herokuのダッシュボードから **Point DNS** をクリックすると以下のような Point DNSのページに移動します。

<img width="1399" alt="スクリーンショット 2018-08-03 17.49.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/223118/af9fee93-64b1-f23d-527a-0f2366fc0f07.png">

ここで自分のドメインをクリックして次に、いくつかのレコードが並んだページが出てきます。
そこで、 [Add Record] というところから、レコードの追加モーダルを開きます。

![スクリーンショット 2018-08-03 17.52.35.png](https://qiita-image-store.s3.amazonaws.com/0/223118/a764fcd9-7f88-33c1-4c11-a3a7ec59fc09.png)


ここで、

 - `CNAME` タイプのレコードと、`ALIAS` タイプのレコードを作成します。
 - どちらも `Name` には `www`を追加し
 - `CNAME`の `Hostname` には `[ランダムな英語と数字の組み合わせ].herokudns.com` (DNS target)を追加
 -  `ALIAS` の `Target` には、`[ランダムな英語と数字の組み合わせ].herokudns.com` (DNS target)を追加
 -  `ALIAS` の `TTL` には、 `60` と記載（`CNAME`はそのままで大丈夫）

という作業をして、 `CNAME`レコードと`ALIAS`レコードを作成します。

これでレコードが6つ（SOA, ALIAS, CNAME, NS×3）になれば完了です。

##ドメイン側の設定

<a href="https://www.onamae.com/" target='_blank'>お名前.com</a> や <a href="https://www.value-domain.com/" target='_blank'>バリュードメイン</a> などでドメインを取得するかと思いますが、微妙にそれぞれでやり方が違います。今回は少し難しい（と個人的に感じた） **バリュードメイン** の方でやってみたいと思います。

①ログインする
マイページに移動しましょう

②ドメインのコントロールパネルにいきましょう。バリュードメインの場合は以下のように取得したドメインの横にボタンが複数あります。

<img width="463" alt="スクリーンショット 2018-08-03 17.32.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/223118/bc7088f0-99ab-1e85-2a5a-bf592d910d12.png">


ここから、 **DNS/URL** というところを開きます。（特に操作は必要ありませんが、バリュードメインのIPアドレスである a @ 202...のようなaレコードが書かれていることを確認してください。）

③次に同じくコントロールパネルから、 **ネームサーバー**　というところをクリックしてください。

フォームがいくつかあり、上から3つぐらいがデフォルトで何か書かれていると思います。
このフォームに、先ほど、 **Point DNSのレコード画面** の `NS` というタグのついたものを記載していきます。

そのままコピペで大丈夫ですが、最後に `.` がついていると正常に登録できないので外しておきましょう。

<img width="685" alt="スクリーンショット 2018-08-03 18.03.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/223118/c2d9e202-c869-9868-07b5-c96cde896989.png">

上記のように登録できたら完了です。


これでしばらく待つとドメインにアクセスできるようになります！
（ぼくは7.8分かかりました。）
ふ〜という感じですね。初めてだたなかなか骨が折れるかと思います。
お疲れ様でした。

##ついでにSSLもやっちゃう

最近のherokuでは便利なことに自動でSSLの設定も行なってくれるようなので、
有料のDynoを使っている場合は簡単なのでおすすめです。
しっかりとしたサイトやアプリをつくるならSSLはマストなので入れることをオススメします。

ダッシュボードの [setting] からアクセスして [Configure SSL]　と押すだけで自動で SSLの設定をしてくれます。便利すぎる、、、！！

僕自身も初めてドメインを公開するときはかなり前の記事で今はないアドオンとか出てきたり、でちょっと苦戦しました、、、。独自ドメイン公開の喜びを最短で噛み締められることを祈ってます🙏