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

目次

1. はじめに
2. 検証概要
3. 実装
4. さいごに

1. はじめに

前回の記事では、LocalStackの開発環境の構築手順をご紹介しました。
前回記事：LocalStackの環境構築から動作確認

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

2. 検証概要

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

なお、AWS CLIを利用した操作については、以下の記事を参考にしました。
参考にした記事：AWS CLIを使って、Amazon S3で静的ウェブサイトをホスティングしたい

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アプリケーションの起動を確認できます。
   

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

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

   cd my-app
   npm run build
   

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

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

3.2 LocalStackのS3へのホスティング

1. 前回記事：LocalStackの環境構築から動作確認を参考にLocalStackサーバを起動する。

2. LocalStackのS3へアップロードと静的ホスティング可能な設定を行う。

   1. S3バケットを作成する。

      awslocal s3 mb s3://sample-bucket
      

   2. 作成したバケットをパブリックアクセスを可能にする

      awslocal s3api put-public-access-block --bucket sample-bucket --public-access-block-configuration  "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"
      

   3. 作成したバケットのバケットポリシーの設定

      • バケットポリシーを記述したJsonファイルを作成する

        touch bucket-policy.json
        

        bucket-policy.json

        {
            "Version": "2012-10-17",
            "Statement": [
                {
                    "Effect": "Allow", 
                    "Principal": "*", 
                    "Action": "s3:GetObject", 
                    "Resource": "*" 
                } 
            ] 
        }
        

      • S3バケットにバケットポリシーを設定する

        awslocal s3api put-bucket-policy --bucket sample-bucket --policy file:///bucket-policy.json
        

   4. 3.1 reactアプリで実装したReactの資材をS3にアップロード

      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
   

4. さいごに

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