アプリ開発 インフラ(AWS・GCPなど)

[キャプチャ付き]Herokuにデプロイしたサービスに独自ドメインを設定する方法

こんにちは、こちょすです!

今回の記事では、Herokuにデプロイしたサービスに対して、独自ドメインを使ってアクセスできるようにする方法を画像キャプチャを交えながらStep byStepで説明していきたいと思います。

Herokuを使ってサービスをデプロイする方法については以下の記事で説明しているので、やり方が分からないという方はぜひ以下の記事もご覧ください!

 

インスタはこちら!日々のトレーニング動画や食事の記録を載せています!プライベートなこちょすが知りたいという方はぜひフォロー・応援お願いします!

instagram:@kochos05
Twitter:@kochos5

 

 

こんな方におすすめ

  • Herokuを使って独自ドメインを設定する方法が知りたい
  • 独自ドメインを使ったサービスをlaunchしたい
  • Herokuを使いこなしたい

 

Herokuのサービスのデフォルトのドメインってどうなってるの?

Herokuに単純にサービスをデプロイすると、以下のようなURLでアクセス可能になります。

https://xxxxx(Herokuアプリ名).herokuapp.com/

 

つまり、Herokuのデフォルトのドメインは「xxxxx.herokuapp.com」となります。

次の章ではここを自分の好きなドメイン(独自ドメイン)に変更する方法をご紹介していきます!

 

Herokuに設定したい独自ドメインを取得する

独自ドメインを取得する方法は大きく2つある!

まずはHerokuに設定したい独自ドメインを取得する必要があります。

ドメインを取得するためには、主に2つの方法があります。
1、「レンタルサーバー契約時に一緒に取得する場合」
2、「ドメイン専門会社で別途取得する場合」
です。

 

今回はHerokuサーバを使うのですが、Herokuではドメイン登録サービスを提供していないので、上記の2番の方法で取得して、手動で紐付けをする必要があります。

注意ポイント

Heroku では、ドメイン登録サービス (カスタムドメイン名の登録を行う) や DNS プロバイダーサービス (カスタムドメイン名をアプリに対応付ける DNS サーバーをホストする) は提供していません。
https://devcenter.heroku.com/ja/articles/custom-domains

 

手動でやるとなると難しそう。。。と思ったかもしれませんが、ご安心ください!そんなに難しい作業はないですし、しっかり順を追って説明していきます!

 

 

ドメイン専門会社で独自ドメインを取得する!

独自ドメインの取り方がわかったところで、早速取得していきましょう!
ドメイン専門会社は色々あるので、お好きなところで取っていけばよいです。
今回は、一番メジャーなドメイン専門会社「お名前.com」で取っていきたいと思います。

👇👇👇お名前.com👇👇👇


上記リンクからお名前.comにアクセスすると、以下のような画面が表示されると思います。
この画面の中央部分にある、「取得希望の文字列を入力」という部分に、取得したいドメインの文字列を入力して、末尾(.comや.jpなど)を決めて検索をしていきましょう!

 

ちなみにドメイン名が決め切れず悩んでいるという方は、「お名前.com」の以下のページがよくまとまっていますので参考にしてみてください!

 

 

次の画面では、ドメインの値段が表示されます。
末尾によって値段が変わりますので、お好きなものを選んでください!(co.jpや.jpなどは高いので、個人開発であれば他のドメインでよいかなと思います!)

 

 

注意ポイント

登録料金は安くても、2年目以降維持するための更新料がとても高い!ということもあります。末尾を決めるためには以下のページも見ておくことをおすすめします!

 

決まったら、上記の画面の「料金確認へ進む」ボタンを押しましょう。
すると、お申し込み内容という形で選択したドメインに対する金額が表示されます。
SSL証明書などのオプションも選択可能ですが、今回は独自ドメインの設定をすることが目的なので、ドメインのみ購入します。

 

 

 

内容の確認ができたら、右側のメールアドレスとパスワードを入力し、「次へ」を押しましょう!
次の画面では新規ユーザの場合、「会員情報の入力」を行います。

 

 

次の画面ではお支払い方法の選択をします。クレジットカードが推奨されていますが、コンビニや銀行振り込み、請求書なども選択可能です(右下の青いボタンを押すと展開されます)

これでドメインの取得が完了しました!

 

 

取得した独自ドメインの認証をする!

独自ドメインの取得が終わったら、次はドメインの認証です。
お名前.comで独自ドメイン取得をしていた場合、以下のようなメールが届きます。

ポイント

【重要】[お名前.com] ドメイン 情報認証のお願い

──────────────────────────────────
■メールアドレスの有効性認証■
──────────────────────────────────

本メールはICANNのWhois情報正確性確認方針に基づき、レジストラより
ドメイン名の登録者(Registrant)にご登録いただいているメールアドレスへ
送信しております。

ドメイン登録者情報のメールアドレスとして情報が正しい場合は、期日までに
以下URLへアクセスしてください。

対応期日:20XX年X月XX日 XX:XX
https://www.onamae.com/domain/verification?authId=XXXXXXXX

ドメイン情報認証のお手続きが期限内に行われない場合、該当ドメイン
を利用したホームページの閲覧や、メールの送受信ができなくなります
ので、必ずお手続きをお願いいたします。

※メールアドレス以外にも、Whois情報が不正確なドメインは、登録抹消や
使用停止の対象となることがございますのでご注意ください。
※各種情報の確認・修正等はご利用のドメイン管理会社へご相談くださいます
ようお願いいたします。

「https://www.onamae.com/domain/verification?authId=XXXXXXXX」の部分をクリックして、認証をしましょう!

 

これで正式に独自ドメインを取得することができました!

では次にHerokuアプリに今回取得した独自ドメインを設定していきます。

 

 

Herokuアプリに独自ドメインを設定する

では独自ドメインをHerokuアプリに設定していきます。

これから紹介する手順はHerokuの公式ページに即したものになっていますので、公式ページを見たいという方は以下をご参照ください!

ちなみにHerokuの公式ページでは独自ドメインは「カスタムドメイン」として表現されていますが、両者は同じものを指しています。

 

 

なお、この手順を実施するためには「Heroku CLI」を使ってコマンドを実行する必要がありますので、まだ使えるようになっていない方は以下の公式ページを参考に、準備をお願いします!

 

 

独自ドメインをHerokuアプリに追加

以下のコマンドを実行して、ドメインの追加をしましょう!

heroku domains:add [先ほど取得した独自ドメイン]

 

 

以下のようなエラーが出たら、「アカウントの確認」をした上で、もう一度上記の追加コマンドを打ってみてください!


› Error: Please verify your account in order to add domains (please enter a credit card) For more information, see https://devcenter.heroku.com/categories/billing Verify now at
› https://heroku.com/verify
›
› Error ID: verification_required

 

 

クレジットカードの登録が必要とありますが、これはセキュリティのためであることが公式ページにも記載されています。

ポイント

すべての Heroku アプリにカスタムドメインを追加できます。ドメインを追加しても、追加料金は発生しません。セキュリティ上の理由から、アプリにドメインを追加するには、​Heroku アカウントを確認する​必要があります。

 

コマンドを実行して、「Adding [ドメイン名] to ⬢ [アプリ名]... done」と表示されれば成功です!

 

​Heroku から提供される DNS ターゲットを調べる

以下のコマンドを打つことで、次の作業で使うDNSターゲットの文字列を取得することができます。

heroku domains

 

ログには以下のように出力されますので、「DNS Target」の部分(XXXXX.herokudns.com)をメモしておきましょう!


Domain Name DNS Record Type DNS Target SNI Endpoint
XXXXX.XXX ALIAS or ANAME XXXXXXXXXX.herokudns.com undefined

ちなみにHerokuのページからも確認できます!

 

 

アプリの DNS プロバイダーを設定して、Heroku から提供される DNS ターゲットに対応付ける

さて、もう一息です!

つぎはお名前.comのサイトにアクセスして、「お名前.com Navi」にログインしましょう!(ログインはドメイン取得時のアカウントで入ってくださいね!)

 

ログインすると、上のタブに「ネームサーバーの設定」がありますので、このメニューの中のドメインのDNS設定をクリックします。

 

 

画面遷移したら、今回設定したいドメインのラジオボタンをチェックして、「次へ」を押します。
次の画面では色々出てくるのですが、「DNSレコード設定を利用する」を選択します。

 

 

画面を少しスクロールしたところに、DNSレコードを登録する欄がありますので、TYPEを「CNAME」に変更、ホスト名には「www」、VALUEには先程のDNSTargetの値を入力してください。

 

入力を終えたら下にある変更確認にチェックし、確認画面に進み設定を完了してください。

 

 

独自ドメインでアプリにアクセスできることを確認する

設定を完了してから、24〜72時間の間でドメインが反映されると思います。

気長に待って、独自ドメインで自分のHerokuサービスに独自ドメインでアクセスできることを確認しましょう!

 

これで、「www.独自ドメイン」でアクセスできるようになりました!

 

 

独自ドメインをルートドメインとして設定したい

「www.」無しで、つまり独自ドメインをルートドメイン(トップドメイン)として登録したい!という方もいると思います。

その場合、通常であればDNSの設定として、ALIASレコード、またはANAMEレコードを登録する必要がありますが、お名前.comのドメインサービスではこれらのレコードの設定をすることができません。

 

別の方法で設定をすることができるのですが、それを書くと長くなってしまうので、またどこかの記事で書こうと思います!

 

では今回はここまで!最後までご覧いただきありがとうございました!

またみてくださいねー!!

-アプリ開発, インフラ(AWS・GCPなど)

© 2021 これブロ