【S3/Vite】S3にViteのビルドファイル(dist)を配置してWebホスティングを行う

目的

ViteアプリケーションをS3でホストしてみたい。

S3設定

バケットについてはテスト用の適用なバケットを作成済みとする。

デフォルトだと静的WEBホスティング設定がオフになっているのでこれをオンにしていく。

「プロパティ」タブ → 「静的ウェブサイトホスティング」を編集

有効化 ✅
インデックスドキュメント: index.html
エラードキュメント: index.html

次にバケットポリシーを設定する。
今回はテストのため自分のIPアドレスのみを許可する。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowGetObjectFromMyIPOnly",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<バケット名>/*",
      "Condition": {
        "IpAddress": {
          "aws:SourceIp": "<自分のグローバルIPアドレス>"
        }
      }
    }
  ]
}

WEBホスティング設定においてパブリックアクセスをオフにする必要性はないことに注意!

次に、ViteのビルドファイルをS3上に配置する。
注意点はdistフォルダの中身のビルド成果物をバケット直下に全て配置すること。

次に、プロパティの静的Webホスティング内のURLからWebページを確認する。

アクセスに成功した。（画像は自分用のサンドボックスサイト）

また、IPアドレスを変更することでブロックされるかどうかも確認する。

IPアドレスを変更するとしっかりとDENYとなることが分かった。

NEXT

どうやってHTTPSにするんだろう？