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

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

URLが、
〜herokuapp.com

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

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

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

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

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

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

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

追加できるものを探し、

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

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

2.herokuの設定

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

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

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

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

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

↓のように表示されたら、完了です

[Settings]を押下し、[Add domain]を押下します。

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

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

次に[Configure SSL]を押下し、

Automatic Certificate Management (ACM)
を選択し、[Next]を押下します。

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

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

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

ドメイン名を選択し[次へ]を押下します。

DNSレコード設定を利用するの
[設定する]を押下します。

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

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

内容を確認し、[設定する]を押下します。

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

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

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

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

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

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