S3ホスティング設定

概要

AWSのS3ホスティング設定を行い、CloudFront経由で接続を行ったので、方法について記録する

構成

CloudFront->S3経由で静的ウェブサイトにアクセスするように設定を行う

参考

手順

S3設定

バケット作成

• バケットタイプ
  • 汎用
• バケット名：任意
• オブジェクト所有者
  • ACL無効
• パブリックアクセスをすべてブロック：チェックを外す

S3ホスティング設定

作成したバケットを選択し、プロパティタブの一番下にある静的ウェブサイトホスティングの編集を選択

• 静的ウェブサイトホスティング
  • 有効にする
• ホスティングタイプ
  • 静的ウェブサイトをホストする
• インデックスドキュメント
  • index.html
• エラードキュメント
  • error.html

サンプルファイルをS3にアップロード

index.htmlファイルをS3バケットにアップする

バケットポリシー編集

対象のバケットのアクセス許可タブを選択し、バケットボリシーの編集を選択

ポリシー欄に以下のJSONを設定して保存

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::{S3バケット名}/*"
            ]
        }
    ]
}

ポリシー編集後、以下のURLでindex.htmlが表示される

https://{バケット名}.s3.{リージョン}.amazonaws.com/index.html

表示例

CloudFront設定

ディストリビューションを作成

CloudFont＞ディストリビューションより、ディストリビューションを作成を選択

ディストリビューション作成画面にて情報をセットしていく

• Origin domain：S3設定で作成したバケットの情報を選択
• Origin path：指定しない
• 名前：任意
• オリジンアクセス：Origin access control settings (recommended)
  • Create new OACボタンを押下してOACを作成

Create new OACを選択し、OAC作成画面に遷移

以下を入力後、Createを選択
名前：任意
署名動作：署名リクエスト(推奨)

ディストリビューション作成画面の続き

• Enable Origin Shield：いいえ
• デフォルトのキャッシュビヘイビア
  • 初期設定の状態のままで進める

• キャッシュキーとオリジンリクエスト
  • `Cache policy and origin request policy (recommend)を選択
• 関数の関連付け - オプション
  • 関連付けなしで進める

• ウェブアプリケーションファイアウォール (WAF)
  • 今回は動作確認目的のためWAFを使わない
  • セキュリティ保護を有効にしないでくださいにチェック
• 設定
  • 北米、欧州、アジア、中東、アフリカを使用を選択

• 初期設定の状態のままで進める
• デフォルトルートオブジェクト
  • /index.htmlを指定

右下のディストリビューションを作成を選択

ポリシーのコピー

作成したディストリビューション＞オリジンタブを選択
作成したオリジンにチェックして、編集を選択

オリジンアクセスの下にあるポリシーをコピーを選択

もしくは、ディストリビューション作成後に画面に通知として表示されるので、そちらからコピーする

以下のようなポリシーがコピーされる

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::{バケット名}/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::{ID}:distribution/{ディストリビューションID}"
                    }
                }
            }
        ]
}

S3のアクセス許可設定

S3のバケットに遷移し、バケットポリシー編集画面を開く
コピーしたポリシーに上書きする

CloudFrontのドメインからアクセス

CloudFrontのディストリビューション一覧で対象のIDにあるドメイン名をコピーし、Webブラウザでアクセスする
ドメイン名の後に/index.htmlを追加する

ページが表示されたら、CloudFront経由でS3にあるhtmlページ表示までの流れが作成できたことになる

最後に

今回はS3ホスティング設定を行い、CloudFontからS3にある静的ウェブサイトを表示させるところまで行なった
ドメインを指定すれば、Route53→CloudFront→S3経由で独自ドメインの静的ウェブサイトも表示できるので、後で設定をしてみたい