【AWS】S3で静的ウェブサイトをホスティングする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306608/dba8d45c-cdb1-4512-9b26-fe7f74773f7c.png)


# はじめに
当日、記事を書いて、上げる。
そんな流れでやってます。


どーも、のぶこふです。
今回は、前回の続きで、S3を使って、ウェブサイトのホスティングをやってみようと思います。

この記事は[GFAMアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/gfam)の7日目の記事です。


# 今回のサービス一覧

|Service名とか|概要|
|--|--|
|S3 |拡張性と耐久性を兼ね備えたクラウドストレージ|
|CloudFront[^cf] [^cf-deep] |グローバルなコンテンツ配信サービス|
※S3については、[前回](https://qiita.com/nobkovskii/items/ab4df1a64cff773f2626)で解説したので省略。


# CloudFront
* 高性能な分散配信 (世界187拠点の接続ポイント) ※2019年7月時点
* 高いパフォーマンス (高いパフォーマンスの実績)
* キャパシティアクセスからの解放 (予測不可能なスパイクアクセスへの対応)
* ビルトインのセキュリティ機能 (WAF 連携、DDoS 対策)
* 設定が容易で即時利用可能 (GUI からの設定で15 分程度でサービス利用可能)
* 充実したレポーティング (ログ、ダッシュボード、通知機能)
* 完全従量課金 (初期費用がなく安価、一時的な利用も可能)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306608/f40f8ece-873d-bcb0-f937-1165e73ce91a.png)

### CloudFront 用語

|名前|読み方|概要|
|---|---|---|
|Viewer |ビューワー|クライアント / Web ブラウザ|
|Distribution |ディストリビューション|コンテンツ配信の設定単位、CloudFront ドメイン名、代替ドメイン名毎に作成|
|Origin |オリジン|コンテンツ提供元の Web サーバー毎に作成|
|Behavior |ビヘイビア|キャッシュ動作設定、 URL パスパターン毎に作成|
※ Origin, Behavior は⽤途毎に複数設定が可能

* オリジン
    * カスタムオリジン: Amazon VPC やオンプレミスの Web サーバー
    * S3 オリジン: 静的コンテンツを提供する S3 バケット


# やってみる
### 参考
* [AWSナレッジセンター](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serve-static-website/#Using_a_website_endpoint_as_the_origin.2C_with_anonymous_.28public.29_access_allowed)
* [AWS ユーザガイド](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step3-add-bucket-policy-make-content-public)


### S3
1. バケットの作成
    1. 「パブリックアクセスをすべてブロック」は外して、すべて許可状態にしておく
1. 「index.html」「error.html」をアップロードする
1. 静的ウェブサイトホスティングを有効にする
    1. バケット ＞ プロパティ ＞ 一番下の「静的ウェブサイトホスティング」の「編集」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306608/9e96c893-9179-64a0-1245-b18813e5ebe9.png)

1. バケットポリシーを変更する
    1. バケット ＞ アクセス許可 ＞ バケットポリシー 「編集」を選択
    1. 記述例は後述

1. 静的ウェブサイトホスティング
    1. 静的ウェブサイトホスティング：有効にする
    1. ホスティングタイプ：静的ウェブサイトをホストする
    1. インデックスドキュメント：index.html
    1. エラードキュメント：error.html
1. バケットのエンドポイントをコピーする
    1. 先頭の「`http://`」は除く

#### 例：htmlファイル
index.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>
  <h1>INDEX Page</h1>
</body>
</html>
```

error.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Error</title>
</head>
<body>
  <h1>ERROR Page</h1>
</body>
</html>
```

#### 例：バケットポリシー

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::nobkovskii-web/*"
        }
    ]
}
```

### CloudFront
1. 「CloudFrontディストリビューションを作成」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306608/986cbb0d-e426-8418-e0d7-4f07703dbdfd.png)

1. 情報を入力し、ディストリビューションを作成する
    1. オリジンドメインには、先程コピーした値を入力する
        1. **ドロップダウンで候補が出てくるが、使用しないこと**
1. 「ディストリビューションの作成」を選択する

### アクセスしてみる
* CloudFrontのドメイン名にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306608/ea16f93e-0f33-c514-34fa-cdc01a30a355.png)


# おわりに
今回は簡単にではありますが、S3とCloudFrontを使用して、静的ウェブサイトのホスティングを試してみました。

今回の例だと、バケット名が漏洩すると、S3へ直接アクセスが行われる可能性があるので、注意してください。
CloudFrontを使用するのであれば、S3のリージョンはわざわざ東京を指定する必要も無いですね。

今回はここまでです。
ありがとうございました。

[^cf]: [CloudFront BlackBelt](https://d1.awsstatic.com/webinars/jp/pdf/services/20190730_AWS-BlackBelt_Amazon_CloudFront.pdf)

[^cf-deep]: [CloudFront DeepDive BlackBelt](https://d1.awsstatic.com/webinars/jp/pdf/services/20201028_BlackBelt_Amazon_CloudFront_deep_dive.pdf)