【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 path - optionalでindex.htmlを記入する
5. オリジンアクセスで、Origin access control settings (recommended)にチェックを入れる
   
   
6. 「Create new OAC」を押して、OACを作成し、ポリシーをコピーを押す
7. S3コンソール画面に戻り、アクセス許可->バケットポリシーで編集を押す
8. コピーしたポリシーを張り付けて保存する
9. CloudFrontの画面に戻り、作成を押す
10. ディストリビューションを作成を押す
11. CloudFrontコンソール画面で作成したディストリビューションを選択して、ディストリビューションドメイン名をURLとして開く

まとめ

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