はじめに
最終的には以下のような構成を目指して構築します。
構築作業の覚書としてQiita記事を作成しておきます。
また、この記事ではRoute53経由で、CloudFrontでキャッシュしたS3上の記事にアクセスする方法を記載します。
前段のEC2とS3の部分は以下の記事で。
WordPressで作成した記事をS3に連携しエンドポイントでホスティングする
本アーキテクチャのメリット
- ColoudFront
- CDNを咬ますことで負荷に強くなったりレンダリング速度が上がる
- S3、Route53との連携が簡単
- サーバー容量も気にしなくて良い（訳ではないが、EC2に直接配置するよりはまし）
- WordPressが稼働できればいいのでインスタンスタイプも小さくてよくなる
- Route53は可用性100%
構築手順
前提
ドメインをお名前.com等で取得していることが前提になっています。
後述のRoute53で一緒に取得してもいいんですが、すでにお名前.comで取得していたのでそのドメインを使用することにしました。
Route53でホストゾーンを作成する
[ドメイン名]に使用するドメインを入力してホストゾーンを作成します。
ACM(Amazon Certificate Manager)で証明書を作成する
実運用のことを考えるとSSL化は必須なので、SSL証明を用意します。
CloudFrontで使用する場合はバージニアリージョン(us-east-1)で作成する必要があるとのこと。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html#https-requirements-aws-region
1つも証明書を作成していない場合、以下のような画面が表示されますのでリージョンをバージニア(us-east-1)に変更し [証明書のプロビジョニング] の [今すぐ始める] を押下する。
[パブリック証明書] を選択し [次へ] を押下します。
[ドメイン名] にドメイン名を入力して [次へ] を押下します。
ドメインの検証方法を選択します。
どちらでも検証自体は可能ですが、今回は [DNSの検証] を選択します。
入力した内容と相違なければ [確定とリクエスト] を押下します。
ここまで設定を行うと、証明書が検証保留中という状態になります。
証明書の発行にはこの検証（今回選択しているのはDNSの検証）を終える必要があるので、各種設定を行いDNSの検証が通るようにしていきます。
DNSの設定値が記載されたCSVファイルでダウンロードできるので、ダウンロードして一旦終了です。
Route53に情報を登録する
ダウンロードしたCSVにDNSに設定するレコード名とCNAMEが記載されているので、先ほど作成したRoute53のホストゾーンにレコードを追加していきます。
- [Record Name] の値を [名前] に設定
- [Record Value]の値を [値] に設定
お名前.comでネームサーバーを変更する
Route53を使用して名前解決を行えるように、お名前.com側でネームサーバーの変更を行います。
※操作方法は割愛
ネームサーバー名はRoute53で確認できます。
ACMで検証が終わったか確認する
DNSへのCNAMEレコード追加とネームサーバーの登録が終われば、通常数分で検証が終わり証明書が発行されるはずです。
なお、ACMの検証猶予は72時間らしいので、もしそれまでに設定ができず検証ができなかった場合は、再度リクエストすればOKみたいです。
もし 72 時間経っても ACM が DNS レコードを検証できず証明書を発行できなかった場合は、リクエストはタイムアウトし、検証状態は Timed out / タイムアウト と表示されます。やり直すには、新たにリクエストを作成する必要があります。
CloudFrontのディストリビューションを作成する
ここからはCloudFrontの構築を行なっていきます。
[Create Distribution] を押下し、Webの方の [Get Started] を押下します。
入力画面が表示されるので、以下の内容を設定し [Create Distribution] を押下します。
| 項目 | 値 |
|---|---|
| Origin Domain Name | アクセス先のS3バケット |
| Origin ID | Origin Domain NameにS3バケットを指定すると自動的に設定されます |
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Alternate Domain Names(CNAMEs) | ドメイン名 |
| SSL Certificate | Custom SSL Certificate (example.com)を選択し、先ほどACMで作成した証明書を指定する |
| Default Root Object | index.html（サイト仕様によって異なりますが、デフォルトだとこのファイルになるはず） |
するとディストリビューションの作成が始まりますが、これには少し時間がかかるので気長に待ちます。
Route53にレコード追加
ディストビューションが作成されたら、ドメインへのアクセスをCloudFrontに流すためにRoute53の設定を行います。
- サブドメインを使用しない場合は [名前] は未入力でOK
- エイリアスは [はい] を選択
- [エイリアス先] にCloudFrontディストリビューションの [Domain Name]を指定
画面確認
ここまで設定を行うと、設定したドメインでWordPress記事にアクセスすることができるようになっているはずです。
S3のホスティング解除
CloudFrontにキャッシュしたものを参照するようになるので、もうS3でホステイングする意味はありません。
※エンドポイントでのアクセス経路を残しておきたい等のであれば別ですが...
なので、ここまできたらホスティングはOFFにしてしまいましょう。
参考文献
参考にさせていただきました。ありがとうございました。
https://qiita.com/yujiro0102/items/8a58fa92b861edd14547
https://dev.classmethod.jp/cloud/aws/tls-for-s3-web-hosting-with-cloudfront/