お名前.comを使い、独自ドメイン取得し、herokuデプロイする

こんにちは。
初学者の方で転職活動などの為にポートフォリオを作成している方も多いと思います。

その際にherokuを使ってデプロイする人が多いと思うのですが、

URLが、
〜herokuapp.com

となってしまい、なんかカッコ悪いなあって思いまして、
AWSを使って色々やろうとしたのですが、

ポートフォリオだからそこまで口数をかけたくないと思い

独自ドメインを使い、herokuで、デプロイすることにしました。

その手順を載せさせていただきます。
初学者の方への参考になれたら幸いです。


※前提として
Herokuにアプリをデプロイ済みであることとします


# 1.お名前.comで独自ドメインを取得する

https://www.onamae.com/

にて
取得したいドメイン名を入れて検索する


<img width="932" alt="スクリーンショット 2020-01-14 12.17.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/28508bba-9f24-c08d-adb7-0a8b737d0ef5.png">


追加できるものを探し、

<img width="888" alt="スクリーンショット 2020-01-14 12.19.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/7b2086f8-c4bb-2bdd-9006-4b616aebf591.png">


個人情報、クレジット情報を入力する

ここでは
`test.work`
を取得したことにして進めます。


# 2.herokuの設定
herokuはhobbyプラン（無料の一つ上の7$のプラン）以上じゃないと独自ドメインが使えないためです。

ちなみにこちらは
7＄/月の料金がかかってしまいます。

Herokuのプランはアカウントごとではなく、アプリケーションごとに設定します。例えば、2つのアプリケーションをHerokuにデプロイしている場合、それぞれのアプリケーションに対して無料・有料プランにするかどうかを設定することになります。


### herokuをhobbyプランにする

https://dashboard.heroku.com/apps

より、
デプロイするアプリを押下、

詳細画面で、
Resources > [Change Dyno Type]を押下し、
[Hobby]を選択し[save]を押下します。

<img width="671" alt="スクリーンショット 2020-01-14 20.37.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/710ee5b7-4cb4-5c63-2ac3-9e29e28bc658.png">

<img width="740" alt="スクリーンショット 2020-01-14 20.40.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/d0ef3632-eb4c-51ca-7484-68aa08f634ab.png">

↓のように表示されたら、完了です
<img width="305" alt="スクリーンショット 2020-01-14 20.41.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/dcd29d7a-8b66-ef6f-6cd1-cec7f507d693.png">


### heroku側のドメイン設定とSSL設定
[Settings]を押下し、[Add domain]を押下します。


<img width="906" alt="スクリーンショット 2020-01-14 20.47.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/a8b90a9f-0d3f-8376-4845-e95d12daa7ec.png">

お名前.comで取得したドメインに
`www.`
を追加し入力し、[Next]を押下します。


<img width="407" alt="スクリーンショット 2020-01-14 20.54.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/b2465289-c324-15d0-14a2-bfce033c6a20.png">


DNS target
が表示されるので、コピーします。

<img width="732" alt="スクリーンショット 2020-01-14 20.56.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/10009d11-82d0-f131-b65b-8fffd9b1de05.png">



次に[Configure SSL]を押下し、

Automatic Certificate Management (ACM)
を選択し、[Next]を押下します。
<img width="404" alt="スクリーンショット 2020-01-14 20.58.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/23425620-34b8-92ba-6bd7-60ced935ddca.png">

確認画面になるので、もう一度[Next]を押下します。


最後に[Finish]を押下します。

# 3.お名前.comの設定
再びお名前.comにいき、
[ドメイン設定]を押下、
[DNS関連機能の設定]を押下、
[DNS設定/転送設定]を押下します。

ドメイン名を選択し[次へ]を押下します。
<img width="917" alt="スクリーンショット 2020-01-14 21.07.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/4882b8ed-9e5c-2136-da0e-eeb33d405dd9.png">

DNSレコード設定を利用するの
[設定する]を押下します。
<img width="804" alt="スクリーンショット 2020-01-14 21.08.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/2fb4b89e-4064-04db-9065-6f231c445d30.png">

TYPE→CNAME
ホスト名→wwwを入力
VALUEには、先程herokuでコピーしたDNS Targetを貼り付け
[追加]を押下します。

<img width="679" alt="スクリーンショット 2020-01-14 21.14.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/cf89c464-e8da-2c64-3837-27b2eb7363ef.png">

画面下部まで進み確認へ進み、
[確認内容へ進む]を押下します。

内容を確認し、[設定する]を押下します。
<img width="662" alt="スクリーンショット 2020-01-14 21.16.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/6a7d21ac-2333-2e81-9fa2-ec09fa96449e.png">

これで、設定は完了です！！


※UI上でうまくいかない場合は
コマンドでの設定をおすすめします
こちらを参考に！
https://medium.com/@kjmczk/heroku-cdomain-ssl-1b4cae424e61


反映まで数時間かかるようなので、
メールが来るまで待ちましょう！！




ドメインが反映される前に取得したドメインにアクセスするとお名前.comのページに飛ばされ『このドメインは取得されています』と表示される思いますが、心配せず気長に待ってください。

24〜72時間の間でドメインが反映されるらしいのですが、
自分の場合は数十分で
反映されました！

無事に公開されました！！