AWS CLI初学者向け：コマンド操作だけでS3静的ウェブホスティングを構築してみた

## はじめに

本記事では、[前回設定したAWS CLI](https://qiita.com/free-honda/items/866986d98fdb2fc1a56e)を使用して、S3バケットに静的ファイルを配置し、インターネットからアクセス可能な状態を検証します。

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

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

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

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

![スクリーンショット 2024-12-21 9.50.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/fed5bfe4-1cb4-f16c-fe17-7d452a899b3f.png)
引用画像：https://envader.plus/article/46

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

## 事前準備

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

https://qiita.com/free-honda/items/389059edbdb5e7adcd0b

https://qiita.com/free-honda/items/866986d98fdb2fc1a56e

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

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

#### 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バケットを作成

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

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

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

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

![スクリーンショット 2024-12-21 9.02.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/93f99c1a-62c9-bb3c-e4d3-9a52164dc79c.png)

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

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

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

### バケットポリシーを追加

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

```bash
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時のみ限定公開します。

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

![スクリーンショット 2024-12-21 9.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/d6d95953-991f-f770-7e36-52b8b247ca6b.png)


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

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

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

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

![スクリーンショット 2024-12-21 9.05.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/00af1496-14d8-cf16-c6b1-c6224e7ad1fc.png)


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

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

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

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

![スクリーンショット 2024-12-21 9.08.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/3a11f11c-a210-1bd2-a2f4-8ae42814a442.png)

## ブラウザからの動作確認

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

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

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

![スクリーンショット 2024-12-21 9.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/9a3b6899-2e3a-699e-39db-748e9f9d07fa.png)

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

## まとめ

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

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

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

## 参考記事

https://dev.classmethod.jp/articles/aws-cli_initial_setting/

https://qiita.com/tkek321/items/bfa5416c15521f541712

https://blog.serverworks.co.jp/2022/09/06/212352

https://www.sunnycloud.jp/column/20211101-01/