目的

自分用の手順書として、とりあえず設定内容だけ記載していく
後々「なぜその設定にしたか」など、加筆して知識を深める

流れ

S3でとりあえず静的WEBホスティングを使ってHello Worldする
S3の設定を変更し、CloudFrontを使ってCDN配信する

1. S3でとりあえず静的WEBホスティングを使ってHello Worldする

バケットを作成し、オブジェクトにindex.htmlをアップロードする

バケット（フォルダ）を作ってオブジェクト（ファイル）を格納するような流れです。

AWSアカウントの作成などは終えているものとします。

① バケットの作成

S3と検索し「バケットを作成」をクリック。
バケット名：全世界で被ってはいけないのでユニークなものを入れましょう。
私は"sample-qiita-220502"というものを作りました。
AWSリージョン：私は東京リージョンを指定します。

その他の設定は一旦無視し、一番下までスクロールして「バケットを作成」をクリック。

これでバケットができました。

②オブジェクトの作成

事前に、オブジェクトとしてアップロードしておきたい"index.html"というファイルを作っておきます。
Hello Worldするだけのもの↓

<html><h1>hello world!</h1></html>

バケットに戻り、バケット名をクリックします。
オブジェクトメニューの「アップロード」をクリック。
「ファイルを追加」をクリックし、先ほど作った"index.html"を選択してアップしましょう。

これでバケットにオブジェクトのアップロードができました。
まだInternetに公開されていませんので、公開していきましょう！

静的ウェブホスティングを有効化する

「バケット」の「オブジェクト」メニュー横の「プロパティ」をクリック
下までスクロールすると「静的ウェブサイトホスティング」があるので「編集」をクリック
以下設定にする
- 静的ウェブサイトホスティング：有効にする
- ホスティングタイプ：静的ウェブサイトをホストする
- インデックスドキュメント：index.htmlと入力
変更の保存をクリック

アクセス権限を変更する（①ブロックパブリックアクセス、②バケットポリシー）

最後に、アクセス権限を変更していきます。

S3はデフォルトではURL公開されないようになっています。

①ブロックパブリックアクセスの変更

バケットを選択した状態で「アクセス許可」メニューを選びます。
「ブロックパブリックアクセス」の編集ボタンをクリックします。
以下のように設定内容を変更し「変更を保存」をクリックします。

これで①ブロックパブリックアクセスの変更は完了です。

②バケットポリシーの変更

もう一度、バケットを選択した状態で「アクセス許可」メニューを選びます。
「バケットポリシー」の編集ボタンをクリックします。
ポリシー以下にバケットポリシーを記述していきます。
- 公式チュートリアルのステップ4に記載されているバケットポリシーを参照すると、以下のように記載してほしいと書いてありますね。こちらをコピぺしてください。
  https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step4-add-bucket-policy-make-content-public

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

その上で、"Resource"内のBucket-Nameと書いてある箇所を自分で作ったバケット名に書き換えましょう。
「変更の保存」をクリック。

以上で、バケットポリシーの設定変更は完了です。
うまくいけば、以下のようにバケットが公開されている状態になります。

確認してみましょう！

バケットからオブジェクト"index.html"をクリック
オブジェクトURLを別タブでクリックするとhelloworldされているはずです！

2. CloudFrontを使ってCDN配信する

S3を設定する

先ほど行った公開設定やらスタティックWEBホスティング設定やらをOFFに変えていきます
- ブロックパブリックアクセスを以下設定に変更。
- バケットポリシーを吹っ飛ばす。
- スタティックウェブホスティングをOFFにする。
  - 静的スタティックウェブホスティング：無効にする

これでS3にアクセスできなくなりました。オブジェクトURLを開き、確認してみましょう。

CloudFrontを設定する

"CloudFront"に移動し、「cloudfrontディストリビューションを作成する」をクリック。各種設定をしていきましょう。
まずは"オリジン"の設定から。
- オリジンドメイン：選択式なので、先ほど作ったS3バケット名を指定しましょう
- S3バケットアクセス: 「はい、OAIを使用します」を選択
  - オリジンアクセスアイデンティティ：「新しいOAIを作成」をクリックすると自動的に作成されます。
  - バケットポリシー：「はい、バケットポリシーを自動で更新します」を選択
    - これをやると、CloudFrontのデストリビューションを作った後、S3側でバケットポリシーを勝手に変更してくれます。
- 上記設定を完了すると以下のようになります。
続いて、 "デフォルトのキャッシュビヘイビア"について設定します！
- ビューワープロトコルポリシー：Redirect HTTP to HTTPS
  ※　httpでアクセスされたらhttpsでリダイレクトする
最後に"設定"項目について一つ設定します。
- デフォルトルートオブジェクト：index.htmlと入力