shou2017.com
JP / EN

Herokuの独自ドメインをRoute53、Cloudfrontで設定する手順

Sat Dec 29, 2018
Sat Dec 29, 2018

使うもの

  • heroku アプリは既に作成済
  • Route53 取得済み
  • CloudFront
  • AWS Certificate Manage

HerokuとRoute53の独自ドメインを紐付け(AWS)

DashboardからHosted zonesに移動し、Create Hosted Zoneを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Domain NameにRoute53で取得したドメインを入力し、作成する。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

次に、Create Record Setを選択します。そして以下を入力してcreateします。

  • Name
  • Nameにはwww
  • TypeにはCNAMEを選択
  • Valueにはherokuアプリの名前(例: sampleapp.herokuapp.com)

herokuアプリの名前はherokuのsettings画面から確かめることができます。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

HerokuとRoute53の独自ドメインを紐付け(Heroku)

ターミナルからでも設定できますが、herokuのコンソール画面からも設定できます。

Add domainを選択し、Route53で設定したドメインを設定するだけです。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

wwwありとなしのドメインを設定したらこんな感じになるはずです。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

ACMを利用して無料のサーバー証明書を発行

検証の方法はEメールとDNSを使う方法の2通りありますが、今回はRoute53でドメインを取得しているのでDNSを使った検証の方がオススメです。AWSがドメインを検証して証明書を発行するまでに最大で30分以上かかる場合がありますけど。

Eメールの検証を使う場合

AWSコンソールからCertificate Managerを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

ここでの注意点としてリージョンをバージニア北部にしておくこと(2017/10月現在)。これを間違えるとこの後、うまくいかないです。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

次に証明書のリクエストを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

ドメインを入力したら確認とリクエストを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

しばらくするとAWSから届くドメイン認証メールが届きます。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

「I Approve」で承認します。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

承認するとSuccess!と表示されます。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

全ての工程がうまくいくと、状況が発行済みになっていると思います。以上で、ACMを利用して無料のサーバー証明書を発行する手順は終わりです。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

DNSの検証を使う場合

ドメイン名を入力

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

DNSの検証を選択

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

このブログのドメインはRoute53を使って取得しているので、Route53でのレコードの作成を選択。しばらくすると成功します。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

こんな感じになります。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

成功です。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

CloudFront設定

Create Distributionを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

webのGet Startedを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Origin Domain Nameの項目にHerokuのドメイン名を記入する。

sample123456.herokuapp.com/

すると、こんな感じになります。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

次に「Custom SSL Certificate」を選択し、先に作成したサーバ証明書を指定します。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Alternate Domain Names (CNAMEs)に必ず自分のドメインを記入。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

Route53の設定

ALIASをCloudFrontに変えます。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

CloudFrontの設定が終わっていたらAilas Targetに出てくるので、それを選択。

Herokuの独自ドメインとRoute53、Cloudfrontで設定する手順

これで終わりです。

See Also