脳死でできるS3を使った静的ウェブサイトホスティング設定

# これは何？
AWSのS3を使って静的ウェブサイトホスティングの設定をしていく記事
脳死で書いているので脳死で試すこともできるはず。。。！

# 注意点
- この記事のメインはホスティングの設定なので、ウェブサイトの方は本当に雑な作り
- AWSのコンソールはUIがよく変わるので、そのうち方法変わっているかも
- 今回のやり方は推奨されていない
    - S3だけだとHTTP通信しかできないので、ちゃんと運用する場合CloudFrontと組み合わせる必要がある（ここは今度書く）
# 実際にやっていく

## バケットの作成

ここからバケットを作成する
![スクリーンショット 2023-12-18 22.05.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/a1abb806-72ce-3812-75a3-0241be287529.png)

#### バケットの名前
全世界で一意である必要があるため、被らない名前にする必要がある
![スクリーンショット 2023-12-18 22.07.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/dc22c242-5ce5-bc4b-f6f4-b40d1656faf3.png)

#### [ACL](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/acls.html)の設定 

![スクリーンショット 2023-12-18 22.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/26e8db8b-e8ae-f396-2c5b-c04bcdd431fc.png)

#### ブロックパブリックアクセス設定
ここが最初の注意書きで推奨されていない設定
![スクリーンショット 2023-12-18 22.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/9778e814-a391-7b46-eda2-bc803b93915c.png)

#### バケットのバージョニング設定
有効にすると費用が結構かかるはず
![スクリーンショット 2023-12-18 22.08.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/edc3a812-898b-a811-8ba2-a307054e6826.png)


ほいバケット完成
![スクリーンショット 2023-12-18 22.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/6d2d5349-d5c3-c7cb-7c62-daacc770bb37.png)

## 静的ホスティングをするためにバケットの設定
作成したバケットに入りプロパティタブの静的ウェブサイトホスティングを編集する
![スクリーンショット 2023-12-18 22.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/5a1eeed6-ef89-1536-2d2a-1c86d09e7063.png)

ここは静的ウェブサイトホスティングを有効にして、インデックスドキュメントを設定するだけでOK
![スクリーンショット 2023-12-18 22.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/81e5b04d-75a4-1956-d2a6-2b7583512527.png)

## バケットポリシーの設定
アクセス許可のタブに移動しバケットポリシーの編集を行う
内容は作成したバケットからオブジェクトを取得するのを許可する感じ

backets-name は自分が作成したバケット名
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::backets-name/*"
        }
    ]
}

```

## indexファイルを作成、配置
本当に適当（サイトと読んではいけないレベル）
```index.html
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的ホスティング</title>
</head>
<body>
  <div>
    <div>
      アドベントカレンダー
    </div>
  </div>
</body>
</html>
```

バケットのオブジェクトタブからアップロードする
![スクリーンショット 2023-12-18 22.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/6b83b5f9-e78b-0a75-6848-d00701c0ed65.png)


![スクリーンショット 2023-12-18 22.41.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/0f7ec6fb-d4e7-2148-af30-d1b2cacc6f7d.png)


プロパティタブの静的ウェブサイトホスティングにエンドポイントが吐き出されている
![スクリーンショット 2023-12-18 22.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/d1154c36-2f8d-853d-bcbd-8c3be46aad77.png)


アクセスすると🎉
![スクリーンショット 2023-12-18 22.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/0b5d7650-15eb-b613-a68d-6da779abdf42.png)

# 感想
- 頭をそんな使わなくても上から読みつつ手を動かせば同じような環境が作れるはず
- 注意点でも書いたが自分用や遊びならいいと思うが真面目に使う場合CloudFrontも使った方が良い（今度やる）
    - コストもそこまで大きくならないはず
- 少しAWSの勉強をしていれば誰でもできそう