S3、Cloud9、CloudFrontを用いて静的Webサイトを公開する

# はじめに

S3の静的Webサイトホスティング機能を使って、作成したファイルを公開してみました。

# S3の静的ホスティング機能の有効化　＋　手動デプロイ
## ①S3バケット作成
### バケット作成
1. S3管理画面からバケット作成を押下します。
2. バケット名を入力します。（バケット名は任意）
3. その他はデフォルトのまま進み、「作成」ボタンを押下します。
`バケット「（任意のバケット名）」が正常に作成されました`と表示されれば成功です。

### 静的ウェブサイトホスティング
1. 作成出来たらバケット名を押下し、プロパティタブを押下します。
2. 静的ウェブサイトホスティングというブロックの「編集」ボタンを押下します。
3. インデックスドキュメントに「portfolio.html」を入力します。
4. 「変更の保存」ボタンを押下します。
`静的ウェブサイトホスティングが正常に編集されました。`と表示されれば成功です。

### バケットポリシー作成の手順
1. 次にアクセス許可のタブを押下します。
2. バケットポリシーのブロックの「編集」ボタンを押下します。
3. 下記バケットポリシーを記述することで、パブリックアクセスを許可できます。

```
{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": [
              "s3:GetObject"
          ],
          "Resource": [
              "arn:aws:s3:::任意のバケット名/*"
          ]
      }
  ]
}

```
`バケットポリシーが正常に編集されました。`と表示されれば成功です。

### ファイルのアップロードと確認
次にオブジェクトタブを押下します。
「アップロード」→「ファイルを追加」ボタンを押下し、ファイルをアップロードします。
`アップロードに成功しました`と表示されれば成功です。

最後に実際にWebサイトがホスティングされているかを確認します。
プロパティタブを押下し、静的ウェブサイトホスティングのブロックまで移動します。
バケットウェブサイトエンドポイントの下にURLがあるので、それを押下します。

![スクリーンショット 2023-10-29 161830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581403/c4036cbd-72a9-67a6-dc58-ab26408cd68c.png)


無事にサイトを開くことができました。
これにより、Webサイトがホスティングされていることを確認できました。


## ②Cloud9を使ってファイルを修正＋他ファイルを一括アップロードする
### Cloud9環境の作成
1. Cloud9管理画面から「環境を作成」ボタンを押下します。
2. 名前を入力し、EC2などはデフォルトのまま進み、「作成」ボタンを押下します。
`1 個の環境が正常に作成されました。`と表示されれば成功です。

### 作業ディレクトリの作成
1. Cloud9 IDEの「開く」よりCloud9の環境にアクセスします。
2. ターミナルで下記コマンドを入力し、作業ディレクトリを作成します。
```
$ mkdir my-webpage
```

3. 先ほどS3にアップした「portfolio.html」をcloud9の「my-webpage」にアップロードします。

4. css、imgのディレクトリも作成します。
```
$ mkdir mkdir img
$ mkdir css
```
5. imgに「hnadson1.png」という画像ファイルを、
cssに「styles.css」というcssのファイルをローカルからアップロードします。
※画像ファイルやcssファイルは任意のものを使用します。

### 一括でファイルをアップロード
cloud9のターミナルからS3にファイルをアップロードします。
下記コマンドを入力
```
$ aws s3 cp . s3://任意のバケット名 --recursive
```
バケットを確認すると、アップロードされたことが確認できます。

![スクリーンショット 2023-10-29 154034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581403/09fdcda7-3012-9d0a-72a0-41dc1a18475a.png)


ここで再びエンドポイントにアクセスしてみます。

![スクリーンショット 2023-10-29 154524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581403/d525a07c-7418-16d5-14a1-c294610f378a.png)

無事に表示されました！
CSSも適用されていることが確認できます。

## ③CloudFrontを使ってコンテンツをキャッシュさせる
### ディストリビューションの作成
1. CloudFromtの管理画面に行き、CloudFront ディストリビューションを作成を押下します。
2. オリジンドメインにバケットウェブサイトエンドポイントのURLを貼り付けます。
3. ウェブアプリケーションファイアウォール (WAF) は、今回は「セキュリティ保護を有効にしないでください」を選択します。
4. 他の項目はデフォルトのまま「ディストリビューションを作成」を押下します。
`新しいディストリビューションが正常に作成されました。`と表示されれば成功です。

### キャッシュの確認
1. CloudFromtの管理画面に戻り、ドメイン名をコピーします。
2. 新しいタブにドメイン名を貼り付けます。

![スクリーンショット 2023-10-29 155318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581403/229f0502-eca1-5f1c-2e26-30d7ed366b03.png)

Webサイトが表示されました！

デベロッパーツールで確認すると「X-Cache:Hit from cloudfront」と表示されています。
CloudFrontからキャッシュされて返ってきたというのがわかります。

CloudFront経由でWebサイトをネット上に公開することができました！

# まとめ
S3、Cloud9、CloudFrontを用いると、個人で作成したサイトが容易にホスティング、コンテンツキャッシュができることがわかりました。

## おまけ（リソースの削除）
・CloudFront
管理画面に遷移し、ディストリビューションの状態を無効にします。
ディストリビューションを選択し、「削除」ボタンを押下します。

・S3
管理画面に遷移し、バケットを選択し、「削除」ボタンを押下します。
ここで「バケットを削除するには、バケットを殻にする必要があります。」とメッセージが出てきます。
「空のバケット設定」リンクを押下し、バケットを空にします。
もう一度バケット名を選択し、「削除」ボタンを押下し削除します。

・Cloud9
管理画面に遷移し、環境名を選択し、「削除」ボタンを押下します。