S3にホスティングしたWEBサイトでS3に保存した画像を表示する（2024.9）

１－１．Reactプロジェクトのセットアップ

・左上の検索バーに「cloud9」を入力→「Cloud9」を選択
・linepictureuploadの「開く」を選択

・下部のターミナルエリアでコマンドを実行して、reactのプロジェクトを作成。
・コマンド：npx create-react-app my-image-gallery
　※「my-image-gallery」は任意で

１－２．Reactプロジェクトの動作確認

・下部のターミナルエリアでコマンドを実行して、reactの開発サーバーを起動。
・コマンド：cd my-image-gallery
・コマンド：npm start

・上部の「Preview」→「Preview Running Application」

・この画面が表示されることを確認する。

２－１．aws-sdkのインストール

・ターミナルでコマンドを実行して、AWS SDKをインストールし、S3から画像のURLを取得する準備をする。
・コマンド：npm install aws-sdk

２－２．画像表示コンポーネントの作成

・左ペインの「src」を右クリック→「NewFile」を選択して、画像表示コンポーネントファイルを作成する。
・ファイル名：ImageGallery.js

・「ImageGallery.js」を右クリック→「Open」を選択して、コードを記述する。
・コードを記述したら、上部「File」→「Save」を選択して、保存する。

サンプルコード.txt

2.51 KB

ファイルダウンロードについて

ダウンロード

２－３．画像表示コンポーネントをメインコンポーネントにインポートする

・「App.js」を右クリック→「Open」を選択して、コードを記述する。

サンプルコード2.txt

620 Bytes

ファイルダウンロードについて

ダウンロード

２－４．S3にアクセスするためのIAMユーザーを作成する

・AWSコンソールの左上の検索バーに「IAM」を入力→「IAM」を選択

・「ユーザー」を選択

・右「ユーザーの作成」を選択

・ユーザー名を入力して「次へ」を選択
・ユーザー名：image-gallery_REACT_APP_AWS

・以下を入力して「次へ」を選択
・許可のオプション：ポリシーを直接アタッチする
・許可ポリシー：AmazonS3ReadOnlyAccess

・「ユーザーの作成」を選択

２－５．アクセスキーを作成する

・IAMユーザー「image-gallery_REACT_APP_AWS」を選択→「セキュリティ認証情報」タブ→「アクセスキーを作成」を選択する。

・ユースケースを選択して「次へ」を選択
・ユースケース：AWSコンピューティングサービスで実行されるアプリケーション

・「アクセスキーを作成」を選択

・アクセスキーとシークレットアクセスキーを取得する。

２－６．envファイルを作成する

・cloud9の左ペインの「my-image-gallery」を右クリック→「NewFile」を選択して、envファイルを作成する。
・ファイル名：.env

・.envファイルを開き環境変数を記述して保存する。
・環境変数①：REACT_APP_AWS_ACCESS_KEY_ID=アクセスキー
・環境変数②：REACT_APP_AWS_SECRET_ACCESS_KEY=シークレットアクセスキー

・.gitignoreファイルを開き、以下のコードを記述して保存する。
・追加コード：.env
※ここで定義する意味があるのかは、まだわかっていない。
※画像参照

２－７．ホームページのパスを設定する

・package.jsonファイルを開き、下記の設定を記述して保存する。
・設定："homepage": "http://linepicture.s3-website-us-east-1.amazonaws.com/website"

３－１．ビルド

・ターミナルでコマンドを実行して、ビルドする。
・コマンド：npm run build

３－２．S3へリリースする

・ターミナルでコマンドを実行して、S3にリリースする。
・コマンド①：cd build/
・コマンド②：aws s3 sync . s3://your-bucket-name/website

※S3の構成

４－１．S3のパブリックアクセスを有効にする

・AWSコンソールの左上の検索バーに「S3」を入力→「S3」を選択する。

・「linpicture」を選択する。

・「アクセス許可」タブを選択する。

・ブロックパブリックアクセス（バケット設定）の「編集」を選択する。

・チェックを外して「変更の保存」を選択する。

・「確認」を入力して「確認」を選択する。

４－２．S3のバケットポリシーを設定する

・バケットポリシーの「編集」を選択する。

・バケットポリシーを記述して「変更の保存」を選択する。

サンプル設定.txt

282 Bytes

ファイルダウンロードについて

ダウンロード

４－３．S3のCORSを設定する

・CORSの「編集」を選択する。

・CORSを記述して「変更の保存」を選択する。

サンプル設定2.txt

255 Bytes

ファイルダウンロードについて

ダウンロード

４－４．S3のウェブサイトホスティングを設定する

・「プロパティ」タブを選択する。

・静的ウェブサイトホスティングの「編集」を選択する。

・下記を入力して「変更の保存」を選択する。
・静的ウェブサイトホスティング：有効にする
・ホスティングタイプ：静的ウェブサイトをホストする
・インデックスドキュメント：index.html

・URLを確認する。

５－１．動作確認

・パスの構成に合わせて、末尾に「/website/index.html」をつけてアクセスする。
http://linepicture.s3-website-us-east-1.amazonaws.com/website/index.html

６－１．【補足】S3の構成に合わせた登録側コードの修正

・cloud9で「lambda_function.py」を開いて、画像を保存するパスを修正する。
・修正前：s3.put_object(Bucket=bucket_name, Key=f"{message_id}.jpg", Body=response.content)
・修正後：s3.put_object(Bucket=bucket_name, Key=f"images/{message_id}.jpg", Body=response.content)

※リリース手順等 参照
https://note.com/zeke_magazine/n/n228fc37c3ebb