Amazon Web ServiceのS3を使うと静的ウェブサイトをリーズナルブルに公開できます。その備忘録。

バケットの作成

AWSアカウントを取得してログインしたら検索ボックスで「S3」と検索して、S3にアクセスします。「バケットを作成」から新規バケット（データの保管場所）を作成。

国内向けに公開するならAWSリージョンをアジアパシフィック（東京）に設定して、任意のバケット名を設定します。

不特定多数の人がアクセスできるように、「パブリックアクセスをすべてブロック」を解除。

「バケットのバージョニング」を無効にして、「バケットを作成」。

静的ファイルのアップロード

html+CSS+JavascriptやNext.js/Astroなどで生成した静的サイトファイルを用意します。

バケットを開いてアップロードするだけ（Astroならdistフォルダ、Next.jsならoutputフォルダの中身をまるごと）。

アップロードが完了したら「プロパティ」を開く。

下のほうに「静的ウェブサイトホスティング」があるので「編集」画面へ。

静的ウェブサイトホスティングを「有効にする」に設定し、トップページにしたいファイル（index.htmlなど）を設定する。

設定を終えると「バケットウェブサイトエンドポイント」が表示されます。これがサイトの公開URLになりますが、403 Forbiddenエラーが出て表示されないはずです。

続いて「アクセス許可」タブへ移動して「パブリックアクセスをすべてブロック」がオフになっていることを確認し、バケットポリシーを編集します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::設定したバケット名/*"
            ]
        }
    ]
}

設定を適用して再び「バケットウェブサイトエンドポイント」にアクセスすると・・・

無事に公開できました。ただ、このままだとHTTPS化されておらずブラウザで警告が出るので、次回はこのサイトをHTTPS化していきます。