S3ホスティング設定

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

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


## 参考
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html


# 手順

## S3設定

### バケット作成

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

![s3_作成_mask.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/5db581b1-88a6-3592-d272-cec321cb2106.png)


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

![スクリーンショット 2025-01-09 23.02.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/9b9e77b5-2ec0-80a8-34ce-b9fcbda6be7c.png)

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

![スクリーンショット 2025-01-09 23.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/e3202886-edcf-ad65-765d-9e342e1a3bc2.png)


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

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

![スクリーンショット 2025-01-10 0.05.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/89c54db0-4e0a-bff9-75e2-d21f29c8b8fd.png)

### バケットポリシー編集

対象のバケットの`アクセス許可`タブを選択し、バケットボリシーの`編集`を選択
![スクリーンショット 2025-01-10 0.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/04b91446-2197-5c33-868d-c0676ec6277a.png)

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

![スクリーンショット 2025-01-10 0.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/6482eed9-a7bd-1d67-7459-82e48753c794.png)

```
{
    "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
```

表示例
![スクリーンショット 2025-01-10 0.13.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/fca2cb3b-51a3-ad27-52a6-fe22b4b8cdc4.png)


## CloudFront設定

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

CloudFont＞ディストリビューションより、`ディストリビューションを作成`を選択
![スクリーンショット 2025-01-16 0.14.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/416350bb-d420-0a58-e797-56375587636d.png)

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

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

![スクリーンショット 2025-01-16 0.18.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/354ff331-28d7-95b2-c9e2-3a8d8613ffab.png)


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

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

![スクリーンショット 2025-01-15 23.18.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/4cb5313b-65c6-c076-0b03-b2c6c3c2e44d.png)

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

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

![スクリーンショット 2025-01-16 0.18.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/9a861a53-e00d-925a-a768-ce862b7dec82.png)

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

![スクリーンショット 2025-01-16 0.18.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/a8fb6be4-16e0-0133-db81-4124d9c50748.png)

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

![スクリーンショット 2025-01-16 0.18.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/660679f1-cd77-abe2-a495-99db8749211f.png)

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

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

![スクリーンショット 2025-01-16 0.19.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/61c8f262-e756-e82c-05b3-ef81584057a6.png)


### ポリシーのコピー

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

![スクリーンショット 2025-01-16 0.20.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/b1f100fe-244f-beba-b249-bdf0439d84d1.png)

オリジンアクセスの下にある`ポリシーをコピー`を選択
![スクリーンショット 2025-01-18 23.09.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/d7d82d54-c22f-0df3-4f6b-dccbb258647a.png)

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

![スクリーンショット 2025-01-19 23.48.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/212c9c9d-6e98-573b-b36e-f9c53246e032.png)


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

```
{
        "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のバケットに遷移し、バケットポリシー編集画面を開く
コピーしたポリシーに上書きする

![スクリーンショット 2025-01-16 0.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/b08d1fb1-8bcb-a802-8a64-418599e9b3e6.png)

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

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

![スクリーンショット 2025-01-18 23.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/6b704d7c-ce32-010e-a79e-caa04324b183.png)

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

![スクリーンショット 2025-01-18 23.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/ae212c81-28e3-1beb-f1eb-a8d9091acdbd.png)

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