ACM+CloudFront+Route53でS3バケットをhttps付きでWeb公開
もはやAWSでは出さされつくした感のあるS3をhttps形式で公開しましょうというデザインパターンを試してみました。前回のWordPressを移行した後の設定で使用した内容です。まぁここの手順そのままチックではあるんですが、、、とりあえず個人の備忘録として置いておきます。
Amazonのコンソールにログインしてリージョン設定を[米国東部(バージニア北部)]に変更する。
サービスで「ACM」と検索してCertificateManagerを選択する。
[今すぐ始める]ボタンをクリックする。
※ない場合は[証明書のリクエスト]をクリックする。
[パブリックの証明書リクエスト]が選択されていることを確認して[証明書のリクエスト]をクリックする。
[ドメイン名]の箇所に証明書を発行したいドメインを入力する。その後[この証明書に別の名前を追加]をクリックする。
「*.ドメイン名」を入力する。
※ほんとはワイルドカードじゃなくて個別のサブドメイン指定するほうがいい。
入力できたら[次へ]をクリック
[DNSの検証]を選択する。
＊自分はRoute53を使うのでこうすると楽
[確定とリクエスト]をクリックする。
ドメイン名の横の「▲」をクリックして[Route53でのレコードの作成]をクリックする。
「成功」表示を確認してから[続行]をクリックする。
「状況」で[成功]となっていれば作業は完了
リージョン設定を[アジアパシフィック(東京)]に変更する
サービスで「CloudFront」と検索してCloudFrontを選択する。
[CreateDistribution]をクリックする。
[Web]となっているほうの[Get Started]をクリックする。
あらかじめWeb用に作成したS3bucketを選択する。
・Restrict Bucket Accessは[YES]を選択する。
・Origin Access Identityは[Create a New Identity]を選択する。
・View Protocol Policyは[Redirect HTTP to HTTPS]を選択する。
・Grant Read Permission on Bucket は[YES Update Bucket Policy]を忘れずに選択
・Alternate Domain Namesにはwwwなしのドメインとwww付きのドメインを設定する。
・SSL Certificateは[Custom SSL Certificate]を選択してACMで発行した証明書を選択する。
・Default Root Objectには[index.html]を入力
・Loggingは[On]にしてBucket for Logsの箇所にWebサイトのログを保管するために設定したS3Bucketを指定する。
・Log Prefixには[cf-web]としておいてCloudFrontのログと分かるようにしておく
すべて設定が終わったら[Create Distribution]をクリックする。
CloudFrontのコンソール画面に戻って、設定したCloudFrontのIDのリンクをクリックする。
そのままだと403エラーページが表示されるのでここを参考に設定しておく。
[Error Pages]のタブを選択して[Create Custom Error Response]をクリックする。
・HTTP Error Codeは[403:Forbidden]
・Customize Error Responseで[YES]を選択
・Response page Pathで[/エラーページのファイル名]を入力する。
・HTTP Response Codeは[404:Not Found]を選択する。
30分ほど待てば[Deployed]と表示される。これでCloudFrontの設定は完了
サービスで「Route53」と検索してRoute53を選択する。
Route53の管理コンソールで[ホストゾーン]を選択する。
設定したい[ドメイン名]の箇所のリンクをクリックする。
[レコードセットの作成]をクリックし[名前]には何も入力せずに[エイリアス]で[はい]を選択する。[エイリアス先]でCloudFrontで設定したwwwなしのディストリビューションを選択して作成をクリックする。
[レコードセットの作成]をクリックし[名前]には[www]と入力して[エイリアス]で[はい]を選択する。[エイリアス先]でCloudFrontで設定したwwwなしのディストリビューションを選択して作成をクリックする。
で、nslookup叩いてドメイン名を引くとAWSのIPらしきものが返ってくることを確認する。S3には最低でもindex.htmlとエラーページ用のhtml位を上げておけば静的サイトは
上げられます。一応画面の操作系のjsは動いているので大丈夫とは思いますが、この構成からajax系のjs動かそうとするとCORSとかあるらしく色々と設定しないといけないみたい。それについてはおいおい見ていくとしましょう。
ひとまずWAFで過剰クローリングしてくる奴はBANする設定だけは入れておいたけど、費用見て高そうならWAFは止めるかもしれない。しばらく運用してみて様子見
WordPressはVersion5以降ではStaticPressは使えなくないんだけど、いらないページの出力除外しようとすると動かないので、現在のところはShifterを使うことと相成った次第です。そして独自ドメインプラン使えないのでトップページだけS3においていてコンテンツ部分はShifterというお粗末な構成になっています。
実際に見たい方はこちらどうぞ
何とか10月中に解決まで持って行けた。あとは年内にRSS取得用のプログラムに取り掛かりたいところ。WordPress動かしていたConohaのVPSの方はnginxは止めた。AWSとかGCPで使うには高くなるケースのサーバを準備しないといけないときに使うことになると思う。が、Conohaのサーバでクローリング回そうとしているが大丈夫なんだろうと心配になってきた。RSSクローリングの構成については今後、考えていこう。
1.ACMの設定
※ない場合は[証明書のリクエスト]をクリックする。
[パブリックの証明書リクエスト]が選択されていることを確認して[証明書のリクエスト]をクリックする。
※ほんとはワイルドカードじゃなくて個別のサブドメイン指定するほうがいい。
入力できたら[次へ]をクリック
＊自分はRoute53を使うのでこうすると楽
2.CroudFrontの設定
・Origin Access Identityは[Create a New Identity]を選択する。
・View Protocol Policyは[Redirect HTTP to HTTPS]を選択する。
・Grant Read Permission on Bucket は[YES Update Bucket Policy]を忘れずに選択
・SSL Certificateは[Custom SSL Certificate]を選択してACMで発行した証明書を選択する。
・Loggingは[On]にしてBucket for Logsの箇所にWebサイトのログを保管するために設定したS3Bucketを指定する。
・Log Prefixには[cf-web]としておいてCloudFrontのログと分かるようにしておく
そのままだと403エラーページが表示されるのでここを参考に設定しておく。
・Customize Error Responseで[YES]を選択
・Response page Pathで[/エラーページのファイル名]を入力する。
・HTTP Response Codeは[404:Not Found]を選択する。
30分ほど待てば[Deployed]と表示される。これでCloudFrontの設定は完了
3.Route53設定
で、nslookup叩いてドメイン名を引くとAWSのIPらしきものが返ってくることを確認する。S3には最低でもindex.htmlとエラーページ用のhtml位を上げておけば静的サイトは
上げられます。一応画面の操作系のjsは動いているので大丈夫とは思いますが、この構成からajax系のjs動かそうとするとCORSとかあるらしく色々と設定しないといけないみたい。それについてはおいおい見ていくとしましょう。
ひとまずWAFで過剰クローリングしてくる奴はBANする設定だけは入れておいたけど、費用見て高そうならWAFは止めるかもしれない。しばらく運用してみて様子見
WordPressはVersion5以降ではStaticPressは使えなくないんだけど、いらないページの出力除外しようとすると動かないので、現在のところはShifterを使うことと相成った次第です。そして独自ドメインプラン使えないのでトップページだけS3においていてコンテンツ部分はShifterというお粗末な構成になっています。
実際に見たい方はこちらどうぞ
何とか10月中に解決まで持って行けた。あとは年内にRSS取得用のプログラムに取り掛かりたいところ。WordPress動かしていたConohaのVPSの方はnginxは止めた。AWSとかGCPで使うには高くなるケースのサーバを準備しないといけないときに使うことになると思う。が、Conohaのサーバでクローリング回そうとしているが大丈夫なんだろうと心配になってきた。RSSクローリングの構成については今後、考えていこう。
コメント