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
を設定します。
次に、wwwドメインにエイリアスレコードを設定します.
Alias Target
の部分に先ほど作ったAレコードを指定します。
最終的に以下のように設定されていればOKです。
HTTPS化する
Netlifyでは'Let’s Encrypt'という無料で使えるSSLサーバ証明書の認証局が使えるため、 HTTPS化することは非常に簡単です。Custom Domainの設定画面でボタン一つ押すだけです。 ただ、HTTP設定には、DNSの設定がverifiedになっている必要があるため、 DNSの設定に時間がかかっている場合には、しばらく待ちます。
さて、上記の設定が全て完了すると、
http://www.example.com
はhttps://www.example.com
にリダイレクトhttp://example.com
はhttps:/www.example.com
にリダイレクトhttps://example.com
はhttps:/www.example.com
にリダイレクトhttps://example.netlify.com
はそのままという設定になるかと思います
お疲れ様でしたー 🎉
Netlifyドメインからのリダイレクト
さらに追加の設定を行うことで、https://example.netlify.com
をhttps://www.example.com
にリダイレクトすることも簡単にできます。
具体的には、ドキュメントルート
に_redirects
という名前のファイルを追加して、中身を以下にします。
https://example.netlify.com/* https://www.example.com/:splat 301!