Heroku + Cloudflare + 独自ドメイン + Route53でWebアプリケーションの環境構築

Naoki Machida

できるだけ低価格でWebアプリケーションの本番環境を構築したい人向けに、Heroku + Cloudflare + 独自ドメイン + Route53を使用したWebアプリケーションの構築方法を説明します。 Route53はレジストラとして、Cloudflareはネームサーバ(DNSサーバ)やキャッシュサーバとして使用します。

Keywords

Heroku
Cloudflare
独自ドメイン
Route53

Contents

1. 概要
2. Route53でドメイン取得
3. Cloudflareのアカウントを開設し、DNSサーバとして使用できるようにする。
3-1. サイトを追加する
3-2. ネームサーバとしてCloudflareを指定する
4. その他設定
5. DNS設定
5-1. HerokuのSettingsからDNS Targetを取得
5-2. DNS TargetをCloudflareのCNAMEに設定
6. 参考URL

概要

できるだけ低価格でWebアプリケーションの本番環境を構築したい人向けに、Heroku + Cloudflare + 独自ドメイン + Route53を使用したWebアプリケーションの構築方法を説明します。

かかる費用としては、Route53のドメイン料金のみです。(Herokuの料金プランはFreeを選択)

Route53はレジストラとして、Cloudflareはネームサーバ(DNSサーバ)やキャッシュサーバとして使用します。

Route53でドメイン取得

[ドメインの登録]より、ドメインを取得

Cloudflareのアカウントを開設し、DNSサーバとして使用できるようにする。

サイトを追加する

[サイトを追加する]をクリックし、その後、Routet53で取得したドメインを入力し、サイトを追加します。料金プランはfreeにしておきます。 DNSレコードの設定は後回しにします。

ネームサーバとしてCloudflareを指定する

ネームサーバを変更する必要がある旨の説明が表示されています。

たしかに、whoisコマンドを実行するとネームサーバとしてAWSのものが使用されていることが確認できます。

Name Server: NS-9.AWSDNS-01.COM
Name Server: NS-1144.AWSDNS-15.ORG
Name Server: NS-772.AWSDNS-32.NET
Name Server: NS-1880.AWSDNS-43.CO.UK

Route53の[登録済みドメイン]の箇所より、このドメインのネームサーバを変更します。

こちらの右の項目から変更可能です。

Cloudflareの指定するネームサーバのドメインを設定します。

設定変更して、2分くらいしか経っていませんが、再度whoisをしたところ、さっそく変更が反映されていました。

Name Server: ANUJ.NS.CLOUDFLARE.COM
Name Server: MOLLY.NS.CLOUDFLARE.COM

その他設定

SSL/TLS 暗号化モードは[フレキシブル]、[常に HTTPS を使用]、[Auto Minify]は[JS/HTML/CSS]の全てを指定、[Brotli]を[オン]で設定を完了させました。

DNS設定

HerokuのSettingsからDNS Targetを取得

DNS TargetをCloudflareのCNAMEに設定

これで、独自ドメインからHerokuのWebアプリケーションにアクセスできるようになりました。(DNSの設定の反映に時間がかかったせいか1時間ほど待ち時間がありました。)

概要