Route53でドメインを取得して、Netlifyで静的サイトをHTTPS配信する

少し手間取ったので、Route53でドメインを取得してNetlifyで静的ファイルをHTTPS配信するまでのプロセスを紹介します。 やり方さえわかれば、とても簡単です。Netlify最高!😎

Netlifyの登録

Netlifyの登録がまだの場合、済ませます。 Githubアカウントが使えるのはいいですね〜。

ドメインを手に入れる

Route 53でドメインを購入する。 もちろんドメインはお名前comなど、他のところで手に入れた物でも大丈夫ですが、ここではRoute 53に絞って紹介します。

Netlify上でドメインを設定

購入したドメインをNetlify上で設定します。 Domain Settingsから購入したドメインを登録します。

wwwありドメインをprimary domainにする

Netlifyではwwwありドメインを 強く 推奨していますので、wwwありの方をprimaryにすることをお勧めします。 これはCustom Domainの設定画面で簡単にできるかと思います。 こちらで、なぜありが良いのかという議論をしているので、 気になる方はみて見るといいかと思います。 端的に言えば、ページロードのスピードが早くなるからです。

レコードの設定

Route 53上で、Aレコードの設定を行います。 Hosted zonesから、対象のドメインの設定画面に入ります。 まず、wwwなしのドメインにAレコードを設定します。 valueの部分に、104.198.14.52を設定します。 alias 次に、wwwドメインにエイリアスレコードを設定します. Alias Targetの部分に先ほど作ったAレコードを指定します。 www alias

最終的に以下のように設定されていればOKです。 goal

HTTPS化する

Netlifyでは'Let’s Encrypt'という無料で使えるSSLサーバ証明書の認証局が使えるため、 HTTPS化することは非常に簡単です。Custom Domainの設定画面でボタン一つ押すだけです。 ただ、HTTP設定には、DNSの設定がverifiedになっている必要があるため、 DNSの設定に時間がかかっている場合には、しばらく待ちます。


さて、上記の設定が全て完了すると、

  • http://www.example.comhttps://www.example.com にリダイレクト
  • http://example.comhttps:/www.example.com にリダイレクト
  • https://example.comhttps:/www.example.com にリダイレクト
  • https://example.netlify.comはそのままという設定になるかと思います

お疲れ様でしたー 🎉

Netlifyドメインからのリダイレクト

さらに追加の設定を行うことで、https://example.netlify.comhttps://www.example.comにリダイレクトすることも簡単にできます。 具体的には、ドキュメントルート_redirectsという名前のファイルを追加して、中身を以下にします。

https://example.netlify.com/* https://www.example.com/:splat 301!
Last Updated: 11/18/2018, 6:14:38 AM