【S3】静的ウェブサイトのホスティング

## ■目的
S3でバケットを作成し、静的ウェブサイトをホスティングする。
さらっと用語を復習。

:::note info
S3…オブジェクトストレージサービス、安価、容量無制限
バケット…オブジェクトを入れる箱
オブジェクト…データ
:::

## Step 1：S3バケットの作成

1.バケットを作成、をクリック
![S3_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/f001d83b-69fb-42ae-88b1-e2748b63ff2f.png)


2.適当な名前を付ける

:::note warn
S3のバケット名は一意であり、作成後変更できないので注意。
（変更したい場合は、新規でバケット作成してデータをそのバケットに移動する）
:::

![S3_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/b3223165-c72d-4ff0-9fe4-8c162f512c0e.png)


💡補足
| バケットタイプ | 説明 |
| --- | --- |
| 汎用 | オリジナルの S3 バケットタイプであり、ほとんどのユースケースやアクセスパターンに推奨 |
| ディレクトリ | アベイラビリティーゾーンまたは Local Zone のバケット場所タイプでバケットの作成をサポート |
</aside>

3.オブジェクト所有者を設定する
![S3_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/9102786f-780a-4400-8154-5067e4cf781b.png)


4.ブロックパブリックアクセス設定
※すべてブロックからチェックを外す
![S3_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/b29788a8-d6d8-4edd-aea9-afd9e0ad5f80.png)

:::note info
ブロックパブリックアクセス…S3バケットやオブジェクトを誤ってインターネット上に公開してしまうのを防ぐための機能
:::
情的ウェブサイトホスティングをする場合は、ブロックをオフにする。

5.バケットのバージョニング
![S3_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/8f03e41d-b353-4775-81fd-db22347e42b2.png)

:::note info
バージョニング…オブジェクトの変更履歴が保持される。
意図しない削除や上書きをした際に、1世代前に戻せて便利✨
:::

6.タグの設定
特に設定はしない。
![S3_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/ae5fa473-4bfc-49ce-9314-312772104801.png)

7.デフォルトの暗号化
デフォルトのままにする。
![S3_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/bc3a4ef5-edef-48b3-8b26-2ce0ed8ec9b8.png)

8.詳細設定＞オブジェクトロック
今回は無効のままにする。
![S3_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/82ae97cb-c883-4f70-8d2b-b8deda6f2369.png)


:::note info
オブジェクトロック…オブジェクトが削除されないようにするための保護機能
:::

9.バケットを作成、をクリック
10. 正常に作成されたことを確認

![S3_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/daee8b03-e805-4b36-ab55-6ade76a7d5cc.png)

11.対象のバケット＞アクセス許可タブ＞「バケットポリシー」の編集をクリック
以下のIAMポリシーを張り付け、「変更を保存」をクリック

`s3-bucket-test.2025/*`の箇所は、自分のバケット名にしてください。
このVersion、はIAMポリシーのバージョンを指しており、現時点での最新のIAMポリシーバージョンは"Version": "2012-10-17" となるため、編集はしないこと！

```bash
{
    "Version": "2012-10-17",（★編集しないこと！）
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-bucket-test.2025/*"★ここを編集！
        }
    ]
}
```

## Step 2：静的ウェブサイトホスティングの有効化

1.S3＞汎用バケット＞作成したバケットをクリック
![S3_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/90f88167-4e60-4968-bdbc-c79610d4ed81.png)

    
2.S3のプロパティタブをクリック
一番下までスクロール。
![S3_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/3aa5978a-49b9-471f-8b3f-c5472a81e0fc.png)

3.静的ウェブサイトホスティングの編集をクリック

![S3_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/00e6911e-280c-4bcd-bf30-e456ec5c1d78.png)

4.編集する
情的ウェブサイトホスティングを「有効にする」を選択
インデックスドキュメントを入力
編集が終わったら、「変更を保存」をクリック
![S3_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/734a5583-4fc3-435f-9f22-ba5c29610b3e.png)


## Step 3：ウェブページ(html)の作成

1. test.htmlを作成する。this is test page.とだけ記載する。
2. S3のバケットを選択し、test.htmlをアップロードをクリック
3. アップロードに成功した、表示があればOK

![S3_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/f43c4a5b-0571-42a5-82ec-cb641da717ad.png)

## Step 3：アクセス

1. 対象のバケット＞プロパティ静的ウェブサイトホスティング
パケットウェブサイトエンドポイント、を確認する
![S3_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/2568776f-661d-468a-a202-1235c5c9025e.png)


2.アクセスする
無事アクセスできた✨

![S3_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/af082242-7e5d-4aef-b94e-35562f281aef.png)

💡検証で作成した場合、バケットの削除をすること！

</aside>

## ■エラー＆詰まった個所

### ①**バケットウェブサイトエンドポイントにアクセスしたら**403 Forbidden
事象：バケットウェブサイトエンドポイントにアクセスしたら403 Forbiddenが表示された。
![S3_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/9b5fe94f-b387-47f9-b74d-24bbeda6c2fe.png)


原因：パブリックアクセスを許可していなかったため。
解決策：パブリックアクセスを許可し、バケットポリシーの編集

### ②JSONエラー「The policy must contain a valid version string」
事象：S3のバケットポリシーを編集中に、JSONのエラーがでた。
![S3_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4082636/eb2f5043-f94f-46ae-a203-22991d79336d.png)


原因：ポリシーの "Version" の値が正しくない。
`"Version": "2012-10-17"` の箇所の編集、これを日付だと勘違いし、2025に変更していた。

解決策：`"Version": "2012-10-17"` を編集しない。
このVersion、は**IAMポリシーのバージョン**を指しており、現時点での最新のIAMポリシーバージョンは`"Version": "2012-10-17"` となるため、編集はしないこと！

<aside>

## ■所感
S3はSAAの資格勉強の際に「ストレージ＋web公開もできる」ということで、個人的にいいな！と思ったサービスでした。ストレージがただデータを保管する箇所、っていうのはもう古いのかな。
バケット作成自体は簡単だけど、アクセス設定回りの設定はしっかり設定する必要がありそう。
あと、JSONでまたつまずいてしまった（笑）無効な構文だとエラーが表示されることを学習した。
バケット削除の際に、バケット名を入力する必要があるがコピペでOKだった。
（だいたいそんなもんなの？？）

■参考サイト

https://www.c3index.co.jp/blog/blog_1838/

https://qiita.com/tkek321/items/bfa5416c15521f541712

https://qiita.com/suzuki-navi/items/d29ca26be7aca93c9045

https://blog.serverworks.co.jp/s3-object-lock

https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/defining-bucket-names-data-lakes/faq.html

https://business.ntt-east.co.jp/content/cloudsolution/column-try-43.html

https://techblog.recochoku.jp/5970

</aside>