今日のゴール

S3上で、サーバーレスで静的ページ公開を目指します

S3との接続まで

AWSへのコンソールへサインインしたら、
S3の画面へ遷移

バケットを作成する

バケットを作成するをクリックした画面で、
バケット名を好きな名前で入力する。

注意点としては、AWS上で一意である必要があります。

その後も、オプションの設定、アクセス許可の設定と続きますが、
現段階では、何もいじらずにバケット作成までクリックします。

おめでとうございます！これで、バケットが作成されました！

ただし、現段階では、このストレージは、
一般公開されておらず、誰もアクセスできないので、公開可能な設定をしていきます。

公開の為の設定をする

作成したバケット名をクリックすると、右側にプロパティなどが含まれたエリアが表示。

Static web hostingの準備

プロパティの管理画面へ遷移するので、Static website hostingをクリックします

現段階で、エンドポイントへアクセスすると404となる
※何もファイルがないのだから当然である。

このバケットを使用してウェブサイトをホストするを選択と、
下記のような、設定画面になります。

基本的な設定をする為に、
インデックスドキュメント、エラードキュメントを
それぞれindex.html, error.htmlとして設定する

これで、静的Webサイトを公開する準備はできたので、再びエンドポイントへアクセスすると
404から403 Forbiddenへステータスが変化したことがわかる。

まだ、index.htmlをs3にアップロードしていないこともあるが、
そこへのアクセス権限が設定されていないことが課題。

つづいて、アクセス権限の設定をしていきます。

アクセス権限の設定

アクセス権限のタブをクリックし、設定画面へ遷移し、編集をクリックします

↓編集

デフォルトでは、すべてのパブリックアクセスをブロックがオンとなっているので、
チェックを外し、パブリックアクセスを許可し、保存します。
※パブリックは推奨しないとか言われますが、今回の目的であればオフにして大丈夫です。
（本来はポリシーやACLで適切に設定すれば、よいかと）

続いて、バケットポリシーを選択

バケットポリシーエディタに下記のように設定

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::(backet name)/*"
            ]
        }
    ]
}

name	summary
Principal	リソースへのアクセスを許可または拒否する対象を入力します。今回は*となっているので、全てのユーザということになります。
Action	許可を与える操作を指定します。GetObject操作を許可したいのでs3:GetObjectと入力しています
Resource	許可を与えるバケットを指定します

表示確認

設定が保存できたら、
今回作成したバケットに、適当なindex.htmlをアップロードし、表示確認できたら終了です！

おつかれさまでした。