PowerCMS X + S3 + CloudFront で静的ウェブサイトホスティング 2（CloudFront篇）
前回は、S3 + CloudFront の静的ウェブサイトホスティングのS3を作成するところまで実施しました。
今回は、CloudFront経由でS3にアクセスできるように進めていきます。
AWSコンソールにログインして、検索窓から「CloudFront」で検索します。表示されたサービスの「CloudFront」にアクセスします。
画面右にある「CloudFront ディストリビューションを作成」ボタンをクリックしてください。
一番上の「オリジンドメイン」を選択すると前回作成したS3バケットが選択できますので選択してください。
そうすると、「名前」の部分も自動で入ります。
「S3バケットアクセス」の選択肢は、「はい、OAIを使用します」を選択します。
あたらしいOAIを作成のダイアログが表出されます。テキスト欄はデフォルトのままで問題ありません。
バケットポリシーは、「はい、バケットポリシーを自動で更新します」にチェックします。
下にスクロールして「デフォルトのキャッシュビヘイビア」の箇所に移動します。
ビューワープロトコルポリシーの箇所を「HTTP and HTTPS」から「Redirect HTTP to HTTPS」に変更します。
あとはデフォルトのままで問題ありません。
関数の関連付けはデフォルトのままです。
スクロールして設定に移動します。
「デフォルトルートオブジェクト」の部分に、「index.html」と入力してください。
あとはデフォルトのままで問題ありません。
これで設定は完了です。「ディストリビューションを作成」をクリックして作成します。
「新しいディストリビューションが正常に作成されました。」と表出されれば成功です。ディストリビューション一覧に戻りましょう。
ステータスが有効となっていれば完了しています。
「ドメイン名」の部分に記載されているURLをコピーして、ブラウザのURL欄にペーストしてみてください。
前回作成したHTMLが表示されてますね！しかもhttps化されています。
これでCloudFront自体の設定は完了ですが、今のままだとS3のエンドポイントもアクセスできてしまいますので、S3への直接アクセスを禁止してCloudFront経由のみとします。
検索窓からS3を検索して、サービスのS3をクリックして移動します。
「名前」欄をクリックして詳細に移動します。
アクセス許可のタブをクリックし、「ブロックパブリックアクセス」の「編集」ボタンをクリックします。
「パブリックアクセスをすべてブロック」にチェックを入れて、「変更の保存」をクリックします。
確認ダイアログが表出されるので「確認」を入力して「確認」ボタンをクリックします。
バケットポリシーの「編集」ボタンをクリックします。
前回入力した内容のStatementにひとつ増えてますね。CloudFront ディストリビューション作成の際に、「バケットポリシーの自動更新」を選択したので、自動的に挿入されています。
青い部分、前回入力したStatementの部分はS3に直接アクセスを許可している部分なので消してしまいます。
sidが2となっているので、「CloudfrontGetObject」に変更してください。
以下になっていればOKです。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "CloudFrontGetObject",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity *************"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::***********-website-html/*"
}
]
}
「変更の保存」ボタンをクリックして保存します。
バケットの詳細に入って、プロパティタブに移動します。
一番下にスクロールして、静的ウェブサイトホスティング欄の「バケットウェブサイトエンドポイント」のURLをコピーして、ブラウザのURL欄にペーストして開いてください。
403となれば成功です。
本日はここまでになります。お疲れさまでした。