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

Contents

使うもの

  • 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を選択。

hugo_https化



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

hugo_https化



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

hugo_https化



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

hugo_https化



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

hugo_https化

「I Approve」で承認します。

hugo_https化

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

hugo_https化

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

hugo_https化



DNSの検証を使う場合

ドメイン名を入力

hugo_https化

DNSの検証を選択

hugo_https化

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

hugo_https化

こんな感じになります。

hugo_https化

成功です。

hugo_https化





CloudFront設定


Create Distributionを選択。

hugo_https化

webのGet Startedを選択。

hugo_https化

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

sample123456.herokuapp.com/

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

hugo_https化



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

hugo_https化



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

hugo_https化





Route53の設定


ALIASをCloudFrontに変えます。

hugo_https化

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

hugo_https化



これで終わりです。

See Also