Herokuに独自ドメインを設定しSSL化する方法を画像で分かりやすく
  • 2019.08.04に公開
  • 2020.04.10に更新
  • 小ネタ集
  • 3. サードパーティ

この記事で達成すること

herokuアプリケーションに独自ドメインを設定します。

具体的には以下の流れで行います。

  1. herokuに独自のサブドメイン"www.example.com"の設定(2つの方法があります)
    • herokuCLI編
    • heroku管理画面編
  2. ルートドメインの転送設定
  3. 独自ドメインのSSL化

appblogなどのサブドメインでherokuを運用したい方は、wwwの部分を読み替えてください。

環境

herokuCLIを使ってターミナル上で操作を行います。

インストールがまだの場合はこの記事を参考にインストールしてください。

herokuCLIのインストールとherokuアプリケーションの作成

この記事で紹介するドメインプロバイダはGoDaddyです。

ドメインプロバイダの管理画面は個々に違いますが、設定すること自体は同じです。

(herokuCLI編) herokuに独自のサブドメインを設定する

アプリケーションのルートディレクトリに移動してください。

$ cd rails/myapp8

サブドメインの追加

herokuにドメインを追加します。

example.comの部分はご自身のドメインに読み替えてください。

$ heroku domains:add www.example.com

追加できたか確認をとりましょう。

$ heroku domains

以下のように出てきたら登録が成功しています。

DNS Targetをコピーしておきましょう。

Domain Name     DNS Record Type  DNS Target
──────────────  ───────────────  ─────────────────────────
www.example.com  CNAME           XXX-XXX-XXX.herokudns.com	<<これをコピー

GoDaddyにDNSゾーンを追加する

GoDaddyにログインし「DNS管理」に移動します。

「追加」を押し、以下の様に設定し保存してください。

  • タイプ CNAME
  • ホスト www
  • ポイント先 先ほどコピーしたDNS Target

2019-08-04 18-57-30

10分~24時間程度で反映されます。

サブドメインが設定できたか確認

DNS設定が反映されたか確認をとりましょう。

$ host www.example.com

先ほどのDNS Targetが表示されていれば反映されています。

まだ反映されていない場合はこのように表示されます。しばし待ちましょう。

Host www.example.com not found: 3(NXexample.)

遅い時は反映が数日かかるようですが、経験上、24時間以上経っても反映されていない場合は設定が間違っている可能性が高いです。

もう一度操作をやり直すことをおすすめします。

ブラウザからサブドメインにアクセスしてみてください。

herokuアプリケーションが表示されているはずです。

以上でサブドメインの設定は終了です。

(管理画面編) herokuに独自のサブドメインを設定する

上はターミナル上で操作を完了しましたが、herokuの管理画面からも独自ドメインの設定ができます。

  1. https://dashboard.heroku.com/appsにアクセスします。

  2. ドメインを変更したいアプリケーションを選択してください。

  3. メニューのsettingsに移動します。

    2019-08-04 09-18-11

  4. ページ中盤までスクロールし、domains and certificatesAdd domainボタンをクリックします。
    2019-08-04 09-23-05

  5. 入力フォームに独自ドメインを入力しsave changesボタンを押して保存します。

  6. DNS Targetが表示されますので、コピーしてください。
    2019-08-04 09-35-43

  7. あとは上のgodaddyにdnsゾーンを追加すると同じです。

ルートドメイン(www無し)の設定方法 GoDaddy編

どうしてもwww無しのルートドメインで運用したい場合があります。

GoDaddy場合、転送するという方法を使えば簡単にルートドメインにアプリケーションを紐付けすることができます。

GoDaddyの場合

  1. GoDaddyにログインしDNSの管理画面に移動する

  2. 下の方にある「転送」メニューの「追加」をクリック(ドメインの方)

    2019-08-04 19-48-54

  3. 転送先に先ほどのサブドメインwww.example.com/を入力し、更新にチェックを入れ保存する

    2019-08-04 19-51-19

以上で完了です。

これは、example.comにアクセスするとwww.example.comにリダイレクトされるという方法です。

アプリケーション上のURLはwww.example.comと表示され、example.comにはなりません。

転送がうまくいっているか確認をする

curl —-head ルートドメインコマンドで確認が取れます。

$ curl --head http://example.com/

HTTP/1.1 301 Moved Permanently
Server: nginx/1.12.2
Date: Sun, 04 Aug 2019 11:01:31 GMT
Content-Type: text/html; charset=utf-8
Connection: close
Location: http://www.example.com/ << ここにリダイレクト先が表示されます。

その他のルートドメイン設定方法

herokuのアドオンであるPointDNSを使えば、転送という方法を使わずにダイレクトでルートドメインを設定できます。

PointDNSとは、DNS管理ができるherokuの拡張ツールです。

この方が使い方を詳しくまとめてくれています。

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

注意が必要です

PointDNSを使う場合、ネームサーバーを変更する必要があります。

ネームサーバーを変更すると今設定している全てのDNS設定が無効になります。

筆者はG Suite経由でドメインを取得していますので、GmainやamazonのDNS設定を一からやり直す必要があり、断念しました。

真っ新なドメインで行うことをおすすめします。

手順

下記の方法は確認が取れていませんので、参考程度にしてください。

  1. herokuCLIでルートドメインを追加します。example.comはご自身のドメインに読み替えてください。
$ heroku domains:add example.com
  1. DNS Targetを確認します。
$ heroku domains
  1. 表示されるDNS Targetをコピーします。
Domain Name  DNS Record Type  DNS Target
───────────  ───────────────  ─────────────────────────────────────
example.com  ALIAS or ANAME   xxxx-xxxx-xxxx.herokudns.com
  1. PointDNSに下記のように登録します。
  • Type ALIAS
  • Target コピーしたDNS Target
  • TTL 3600 (この数字は個々の設定による)

これでうまくいくはずです。

独自ドメインSSL化の方法

herokuのドメインSSL化には料金がかかります。

今回はSSLを目的としますので、月7$のHobbyプランにします。

最新の料金プランはここで確認できます。

価格 | Heroku

それではSSL化を行っていきましょう。

1. 有料プランに切り替える

まず、SSL化したいアプリを選択し、メニューのResourcesからChange Dyno Typeをクリックします。

2019-08-04 21-10-15

次に、Hobbyプランを選択しsaveボタンで保存します。

2019-08-04 21-11-00

これで有料プランになりました。

2. SSL化を行う

メニューのSettingsからDomains and certificatesカテゴリーのConfigure SSLボタンをクリックしてください。

2019-08-04 21-12-02

自動設定か手動設定を選択します。

自動設定のAutomaticallyにチェックを入れ、Continueで次へ進みます。

2019-08-04 21-13-39

表示されるDNSをドメインプロバイダに追加してください。

2019-08-04 21-14-53

反映までしばらく待ちましょう。

3. SSL化の確認

DNSが反映されると下のようにOKとなります。

2019-08-04 21-25-01

以上でSSL化作業は終了です。

httpsのURLにアクセスすると、herokuアプリケーションが表示されます。

終わりに

今回は、herokuアプリケーションの、独自サブドメイン化の設定、ルートドメインの設定、ドメインのSSL化を行っていきました。

お疲れ様でした。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。