LocalStackを使用して、ローカル環境でS3を利用した静的ウェブページのホスティング手順

## 目次
[1. はじめに](#1-はじめに)
[2. 検証概要](#2-検証概要)
[3. 実装](#3-実装)
[4. さいごに](#4-さいごに)

## 1. はじめに
前回の記事では、LocalStackの開発環境の構築手順をご紹介しました。
[前回記事：LocalStackの環境構築から動作確認](https://qiita.com/tsuno0821/items/b676c6469f7b9ed8a8ea)

本記事では、前回構築したLocalStackにAWS CLIからの操作でAWSのサービスを構築することができるかどうかを、実際に試してみた結果をお届けします。

## 2. 検証概要
この記事では、LocalStack上のS3を利用してReactアプリをホスティングし、Webブラウザからアプリケーションを確認するための手順をご紹介します。

なお、AWS CLIを利用した操作については、以下の記事を参考にしました。
[参考にした記事：AWS CLIを使って、Amazon S3で静的ウェブサイトをホスティングしたい](https://dev.classmethod.jp/articles/amazon-s3-website-hosting-with-aws-cli/)

## 3. 実装

開発環境は下記を利用しております。
- Windows11
- WSL2(Ubuntu22.04 LTS)
- localstack v2.0

### 3.1 Reactアプリの構築
本記事では、Ubuntu上でReactの環境を構築し、Welcomeページを表示するまでの手順の概要を説明します。
お使いの開発環境に合わせて読み替えていただけますよう、ご注意ください。

1. Node.jsのインストール

    ReactはJavaScriptのライブラリであり、開発にはNode.jsが必要です。以下のコマンドを実行して、Node.jsをインストールしてください。
    
    ```
    sudo apt update
    sudo apt install nodejs
    sudo apt install npm
    ```

2. create-react-appのインストール

    Reactのプロジェクトを簡単に構築するために、create-react-appというツールを使います。以下のコマンドを実行して、create-react-appをインストールしてください。
    
    ```
    sudo npm install -g create-react-app
    ```

3. Reactプロジェクトの作成

    create-react-appを利用して、Reactプロジェクトを作成します。以下のコマンドを実行して、新しいプロジェクトを作成してください。
    
    ```
    create-react-app my-app
    ```

    上記のコマンドでは、my-appという名前のReactプロジェクトが作成されます。任意の名前でプロジェクトを作成してください。

4. Reactアプリケーションの実行

    Reactアプリケーションを実行するために、作成したプロジェクトのディレクトリに移動し、以下のコマンドを実行してください。
    
    ```
    cd my-app
    npm start
    ```

    上記のコマンド後に、ブラウザで http://localhost:3000/ にアクセスすることでReactアプリケーションの起動を確認できます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677305/3749db92-e4d9-f076-961a-d969a116bff4.png)

5. Reactアプリケーションのビルド

    次手順ではビルド後のReactアプリケーションの資材を利用します。そのため、本手順でビルド資材を生成する。
    
    ```
    cd my-app
    npm run build
    ```

    ビルドに`my-app/build`のディレクトリとファイル群が作成されていることを確認する。

以上がReactの環境構築手順となります。

### 3.2 LocalStackのS3へのホスティング
1. [前回記事：LocalStackの環境構築から動作確認](https://qiita.com/tsuno0821/items/b676c6469f7b9ed8a8ea)を参考にLocalStackサーバを起動する。

2. LocalStackのS3へアップロードと静的ホスティング可能な設定を行う。
    1. S3バケットを作成する。
        ``` bash
        awslocal s3 mb s3://sample-bucket
        ```

    2. 作成したバケットをパブリックアクセスを可能にする
        ``` bash
        awslocal s3api put-public-access-block --bucket sample-bucket --public-access-block-configuration  "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"
        ``` 

    3. 作成したバケットのバケットポリシーの設定
        - バケットポリシーを記述したJsonファイルを作成する
            ``` bash
            touch bucket-policy.json
            ``` 
            
            ``` json:bucket-policy.json
            {
                "Version": "2012-10-17",
                "Statement": [
                    {
                        "Effect": "Allow", 
                        "Principal": "*", 
                        "Action": "s3:GetObject", 
                        "Resource": "*" 
                    } 
                ] 
            }
            ``` 

        - S3バケットにバケットポリシーを設定する
            ``` bash
            awslocal s3api put-bucket-policy --bucket sample-bucket --policy file:///bucket-policy.json
            ``` 

    4. [3.1 reactアプリ](#31-reactアプリ)で実装したReactの資材をS3にアップロード
        ``` bash
        awslocal s3 sync ./my-app/build s3://sample-bucket
        ```
3. 疎通確認
WEBブラウザで下記のアドレスにアクセスして、ReactのWelcomeページが表示できていればOKです。
http://sample-bucket.s3.localhost.localhost.localstack.cloud:4566/index.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677305/3749db92-e4d9-f076-961a-d969a116bff4.png)

## 4. さいごに
以上で、LocalStackを使用して、ローカル環境でS3を利用した静的ウェブページのホスティングができました。
ただし、CI/CDを考慮すると、AWS CLIでAWSリソースを作成していくことは、アーキテクチャが複雑化するほどに問題を引き起こしやすくなることが予想されます。
そのため、次回記事ではLocalStackを活用したクラウド開発のCI/CDについて検討と検証をする予定です。