S3で静的ウェブサイトを公開する

## はじめに
AWSで静的ウェブサイトを公開する方法は色々ありますが、今回はS3でVueのアプリを公開します。

<br>

## 全体の流れ
1. 公開するアプリを作成
1. S3で公開するアプリのリソースを格納するバケットを作成
1. バケットの設定(ホスティング機能、アクセス許可)

<br>

## 公開するアプリの準備
Vueのアプリを作成します。
```
npm init vite@latest s3-sample-app -- --template vue
cd s3-sample-app
npm install
```
<br>

公開できるようにビルドします。
```
npm run build
```

<br>

## IAMユーザーの作成
S3で使用するユーザーを作成します。今回はS3のみ使用するので、「**既存のポリシーを直接アタッチ**」から、「**AmazonS3FullAccess**」を選択しました。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_users_create.html


## バケットの作成
アプリのリソースを格納するバケットを作成していきます。
「**Amazon S3**」のコンソール画面から「**バケットを作成**」を選択します。設定箇所は「**一般的な設定**」と「**このバケットのブロックパブリックアクセス設定**」です。

### 一般的な設定
「**バケット名**」は一意である必要があります。「**AWSリージョン**」は東京を選びます。
![スクリーンショット 2023-05-10 23.07.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/9e7ce7c6-4df9-08c0-ab95-d01ea29692b5.png)



### このバケットのブロックパブリックアクセス設定
アクセス制御を設定します。
![スクリーンショット 2023-05-10 23.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/421486fa-fb00-118d-dfce-3c877bf80c08.png)

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step3-edit-block-public-access


## リソースのアップデート
リソースをバケットにアップロードします。
作成したバケットのコンソール(**Amazon S3** > **バケット** > **バケット名**)の「**オブジェクト**」タブから「**アップデート**」を選択します。設定箇所は「**ファイルとフォルダ (x)**」です

### ファイルとフォルダ (x)
公開するビルドしたリソースを選択してください。
![スクリーンショット 2023-05-10 23.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/224b301b-1793-33b7-5a05-c5e34ed05aa7.png)
![スクリーンショット 2023-05-10 23.21.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/693654b5-4e80-d064-7ea8-b2176e120ba6.png)


### 静的ウェブサイトホスティングを編集
バケットに対して静的ウェブサイトホスティングを有効にしていきます。
(**Amazon S3** > **バケット** > **バケット名**)の「**プロパティ**」タブから「**バケットポリシー**」の「**静的ウェブサイトホスティング**」を選択します。
設定箇所は「**静的ウェブサイトホスティング**」と「**インデックスドキュメント**」です。

「**静的ウェブサイトホスティング**」を「**有効にする**」を選択、「**インデックスドキュメント**」を指定します。

![スクリーンショット 2023-05-10 23.52.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/ccf2d625-7c9f-f1ef-ee42-f16295140357.png)



### バケットポリシーの設定
(**Amazon S3** > **バケット** > **バケット名**)の「**アクセス許可**」タブから「**バケットポリシー**」の「**編集**」
を選択します。「**バケットポリシーを編集**」のパブリック読み取りアクセスを許可するポリシーをJSONで記述します。
```jsonnet
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::バケット名/*"
            ]
        }
    ]
}
```
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step4-add-bucket-policy-make-content-public

<br>

## 公開されたサイトを確認する
(**Amazon S3** > **バケット** > **バケット名**)の「**プロパティ**」タブから「**静的ウェブサイトホスティング**」のエンドポイントからサイトを確認できます。
![スクリーンショット 2023-05-10 23.56.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/725941b3-dd93-6f61-c5c2-cf4f1d2f5d70.png)
![スクリーンショット 2023-05-10 23.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/462cf0d1-bbf0-4fe4-c507-eb5866c1bf49.png)


## あとがき
簡単すぎる！ただ、現状URLにバケット名、リージョン名が剥き出しです。CloudFront、Route53、ACMでSSL化(https通信)を実装できます。
ポートフォリオではコンテナにRailsとNginx、S3にVueを配置する予定です。VueをS3に配置することでタスク定義のタスクサイズ(CPU、メモリ)を抑えることができます。





## 参考
https://qiita.com/usaitoen/items/77bdb81a1ce1852b30ca

https://qiita.com/c60evaporator/items/da47620d69f84a9be7dc

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html