AWSのS3を使用した静的Webサイトのホスティング

## はじめに
AWSへの苦手意識を克服するために、まずはAWSのサービスを触ってみる必要があると思い、個人的に取り組みやすそうな「S3」から学習することにしました。
今回はS3の基礎を学びながら簡易的なWebサイトのホスティングを行ったので記事にまとめます。

## S3とは
S3 (Amazon <font color="red">S</font>imple <font color="red">S</font>torge <font color="red">S</font>ervice)はAWSが提供するオブジェクトストレージサービスであり、様々なデータをクラウド上に保存することができます。

### 特徴
- 高い可用性と耐久性(ナンバーナイン：99.9999999%の耐久性を持つ)
- 低コスト(従量課金制)
- 容量無制限
- 静的Webサイトの公開(サーバー不要) 等

## バケットの作成
S3に保存するためには「バケット」と呼ばれる、オブジェクトを格納するコンテナ(入れ物)を作成する必要があります。
マネジメントコンソールからS3を選択し、S3コンソールから「バケットを作成」ボタンを押下するとバケットの設定画面に遷移します。

:::note info
オブジェクトとは一つのファイルを表しています。
「オブジェクトストレージ」では、オブジェクト単位でデータが管理されます。
:::

![スクリーンショット 2024-12-30 14.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/243186ef-9f58-2e62-4479-e3541afb256c.png)

▪️**バケットタイプ**
バスケットタイプは、使用するストレージクラスやアクセス頻度等によって考慮する必要があります。
今回はデフォルトで選択されている「汎用」バケットを使用します。

▪️**バケット名**
バケットの命名規則(例：小文字のみ、ハイフン使用可など)に従いバケット名を入力します。
詳しいルールは[バケット命名規則](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/bucketnamingrules.html)をご確認ください。

![スクリーンショット 2024-12-29 0.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/ffbd32e2-e1bd-0a11-0a5c-c40fbca392c8.png)

▪️**オブジェクト所有者**
デフォルトで「ACL無効」が選択されいるのでこのまま進めます。

:::note info
ACL(アクセスコントロールリスト)とは、バケットやオブジェクトへのアクセスを管理するための仕組みです。
現在ではACLを無効化し、「バケットポリシー」や「IAMポリシー」といったアクセス制御を使用することが推奨されています。
:::

▪️**ブロックパブリックアクセス設定**
バケットおよびオブジェクトへのアクセスを制限します。
S3でWebサイトを公開するには外部からのアクセスを許可する必要があるため、チェックボックスを外しておきます。

※ブロックパブリックアクセスを無効にするだけではURLにアクセスすることができません。後ほど記載する「バケットポリシーの設定」を行うことで外部からのアクセスを許可できるようになります。

![スクリーンショット 2025-01-05 19.17.29_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/e5d5fcf2-7063-bb2b-6a3c-feee19be56db.png)


▪️**バケットのバージョニング**
今回は「無効にする」を選択しておきます。
バージョニングを有効にすることで、削除等の誤った操作をしてしまったオブジェクトの復元が可能です。

▪️**タグ**
今回はタグの作成は行いませんが、バケットやオブジェクトに「タグ(ラベル)」を付けることで、リソースの整理(分類、管理、検索等)に役立ちます。

▪️**デフォルトの暗号化**
S3のバケットにアップロードされたオブジェクトは、保存時に自動で暗号化されます。
今回はデフォルトで設定されている「SSE-S3」を使用し、バケットキーは「無効にする」を選択します。

![スクリーンショット 2025-01-05 19.16.23_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/130850bf-f356-a897-cc46-95c3ba459b55.png)

「バケットを作成」ボタンをクリックするとバケットが作成されます。

## 静的Webサイトのホスティング
Webサイトを公開するために、以下の設定を行う必要があります。

- 作成したファイルのアップロード
- アクセス権限の設定
- バケットの有効化

先ほど作成したバケットをクリックし設定を行います。

![スクリーンショット 2025-01-06 22.43.48_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/c55b422b-55ce-2daa-2842-9d90369ca02e.png)

▪️``オブジェクト``タブ
ドラック&ドロップでファイルをアップロードします(「アップロード」ボタンからでも可能)。

![スクリーンショット 2025-01-06 22.46.53_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/34ac66f9-80ff-6120-2343-3321b14d4059.png)

▪️``アクセス許可``タブ
バケットポリシーを設定しなければWebサイトを閲覧することができません(アクセス時に403エラーが発生します)。
「編集」ボタンを押下し、josn形式でバケットポリシーを設定します。

![スクリーンショット 2025-01-06 22.50.08_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/e496c19f-73d9-8e82-b89e-2bc2aa0ee894.png)

今回は、[公式](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step4-add-bucket-policy-make-content-public)のチュートリアルに記載されているバケットポリシーを使用します。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
```
※バケット名(``"arn:aws:s3:::Bucket-Name/*"``)の``Bucket-Name``の部分は、作成したバケット名を記載します。


![スクリーンショット 2025-01-06 22.51.43_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/3cab6652-2e37-3b15-9103-a535e598f9a0.png)

バケットポリシーが記載できたら「変更を保存」ボタンを押下します。


▪️``プロパティ``タブ
「静的Webサイトホスティング」の「編集」ボタンをクリックし、ホスティングの設定を行います。

![スクリーンショット 2025-01-06 22.54.02_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/e53fc30e-d688-8a2f-7914-44eaf3808d8f.png)
![スクリーンショット 2025-01-06 22.54.45_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/e89530c0-842e-c264-c13b-1405512ef4bb.png)


**①Webサイトホスティングの有効化**
デフォルトでは無効になっているため「有効にする」を選択します。

![スクリーンショット 2025-01-05 20.13.44_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/90804914-a2cf-8556-ddab-a721d5bca582.png)


**②インデックスドキュメントの設定**
インデックスドキュメントとは、ファイル名を省略したURL('/')へのアクセスで表示されるページを指します。
一般的にindex.htmlファイルがインデックスドキュメントに設定されます。

![スクリーンショット 2025-01-05 20.15.45_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/8f952b8e-44b7-277c-9295-0649fb05d65e.png)

## 最後に
S3を使用したWebサイトの公開は、サーバーの立ち上げ等の必要がなく、簡単にホスティングができることが分かりました。
公式では静的Webサイトのホスティングには``AWS Amplify``の使用を推奨されていたので、S3と比較をしながらAmplifyを使用してのホスティングにも挑戦したいと思います。