【AWS】S3とCloudFrontで静的Webサイト公開

S3のみで静的Webサイトを公開する

1. 適当にS3バケットを作成する
2. バケット設定のプロパティ -> 静的ウェブサイトホスティングの編集を押す
3. 有効にするにチェックを入れる
4. インデックスドキュメントにindex.htmlと入力する
5. (任意) JSON形式でリダイレクト設定をする
   https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html?icmpid=docs_amazons3_console
6. 適当なindex.htmlファイルをアップロードする
7. アクセス許可のブロックパブリックアクセスで、すべて無効にして公開する
8. バケットポリシーに下記を記載する

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-site-test-20220730-1/*"
        }
    ]
}

1. 静的ウェブサイトホスティングの設定箇所に記載されているURlをクリックする

CloudFrontとS3で静的Webサイトを公開する

1. 適当にS3バケットを作成する
2. CloudFrontコンソール画面で、ディストリビューションを作成を押す
3. オリジンドメインで、S3バケットを指定する
4. オリジンアクセスで、Origin access control settings (recommended)にチェックを入れる
5. コントロール設定を作成を押して、そのまま作成を押す
6. ディストリビューションを作成を押す
7. ポリシーをコピーを押す
8. S3コンソール画面を開く
9. アクセス許可 -> バケットポリシーを編集して、ペーストする
10. CloudFrontコンソール画面で作成したディストリビューションを選択して、ディストリビューションドメイン名をURLとして開く

まとめ

今回はS3 + CloudFrontを用いて、静的Webサイトの公開の仕方を紹介した。