はじめに

本記事では、前回設定したAWS CLIを使用して、S3バケットに静的ファイルを配置し、インターネットからアクセス可能な状態を検証します。

追加検証として、S3に配置するファイルへのアクセスを朝9時から10時の間に限定するバケットポリシーの設定についても解説します。

技術検証を通じて得た学びを未来の自分への備忘録としてまとめたものです。

S3静的ウェブホスティングとは？

Amazon S3（Simple Storage Service）は、AWSが提供するオブジェクトストレージサービスです。

引用画像：https://envader.plus/article/46

このS3を利用して、静的なウェブサイトを簡単にホスティングできる機能が「S3静的ウェブホスティング」です。

事前準備

AWS CLIのインストール手順や導入については、前回の記事で詳しく解説しています。

まだ導入していない場合は、上記の記事を参考にしてみてください！

サンプル静的ファイルの準備

index.html

以下はシンプルなHTMLファイルの例です。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>朝活お疲れ様ですー!!</h1>
    <p>自分に負けるな〜（自分への言い聞かせ）</p>
</body>
</html>

style.css

以下は基本的なCSSスタイルの例です。

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

上記のファイルは、事前にローカル環境で作成しておいてください。

実際にやってみた

S3バケットを作成

以下のコマンドを実行して、新しいバケットを作成します。

aws s3api create-bucket --bucket my-app-static-files-20241221 --region ap-northeast-1 --create-bucket-configuration LocationConstraint=ap-northeast-1

my-app-static-files-20241221: バケット名（グローバルで一意である必要があります）。

以下のスクリーンショットのように、東京リージョン（ap-northeast-1）でS3バケットが作成されたことを確認できます。

パブリックアクセス設定の変更

バケットをパブリックにするために、次のコマンドを実行してパブリックアクセスブロックを無効化します。

aws s3api put-public-access-block --bucket my-app-static-files-20241221 --public-access-block-configuration BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

バケットポリシーを追加

バケット内のファイルをパブリックにアクセス可能にするため、以下のバケットポリシーを適用します。

aws s3api put-bucket-policy --bucket my-app-static-files-20241221 --policy '{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-app-static-files-20241221/*",
      "Condition": {
        "DateGreaterThan": {
          "aws:CurrentTime": "2024-12-21T00:00:00Z"
        },
        "DateLessThan": {
          "aws:CurrentTime": "2024-12-21T01:00:00Z"
        }
      }
    }
  ]
}'

今回は、朝活限定のユーザーに向けてURLを配布するため、朝9時から10時のみ限定公開します。

この時間外にURLへアクセスすると、以下のように「403 Forbidden」が表示されます。

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

次のコマンドを実行し、静的ウェブホスティングを有効化します。また、index.html をインデックスファイルとして指定します。

aws s3 website s3://my-app-static-files-20241221/ --index-document index.html

コマンドの実行後、静的ウェブサイトホスティングが有効になっていることを確認できました。

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

以下のコマンドを使用して、静的ファイルをS3バケットにアップロードします。

aws s3 cp index.html s3://my-app-static-files-20241221/
aws s3 cp style.css s3://my-app-static-files-20241221/

コマンドを実行後、「upload」と表示され、ファイルが正常にアップロードされていることを確認できました。

ブラウザからの動作確認

ブラウザで以下のURLにアクセスし、静的ファイルが正しく表示されることを確認します。

http://my-app-static-files-20241221.s3-website-ap-northeast-1.amazonaws.com

アクセスすると、以下のように静的ファイルが問題なく表示されていることが確認できます。

休みの日の朝活を頑張る自分に小さなエールを送りたくなりました（笑）。

まとめ

これで、AWS CLIを使った東京リージョンを利用したS3の静的ウェブサイトホスティングの設定が完了しました！

AWS CLIを使えば、GUIを介さず効率的にAWSリソースを管理できます。S3以外のAWSサービスもCLIで操作可能なので、ぜひ試してみてください！

この記事が、どなたかの技術的な支えになれば幸いです。

参考記事