AWS Amplify だけで「Storage Browser for Amazon S3」を構築する手順 🚀

AWSアカウントだけで、「開発環境なし」でもブラウザ上で動く S3 用ストレージブラウザを簡単に構築できます。

---

🎯 この記事でできること

• AWS Amplify Hosting + Cognito + S3 を使用したブラウザベースのファイル管理UI構築
• コード・Git不要、Webコンソールだけで完結
• StorageBrowser コンポーネントの実装サンプル付き

---

✅ 前提条件

• AWSアカウントにログイン済み
• 開発マシン・Git・CLI は不要
• AWSコンソールだけで完結

---

Step 1: Amplify アプリを作成

1. AWSコンソール → Amplify → 「アプリを作成」
2. Manual Deploy を選択し、空の React または Next.js アプリをドラッグ＆ドロップしてデプロイ

👉 この時点で、静的ホスティング環境が自動で作成されます。

---

Step 2: ストレージ（S3）を追加

1. Amplifyコンソール → バックエンド環境 → 「ストレージを追加」
2. 「S3 バケット」を選び、Cognito 認証付きで作成
   • デフォルト設定でOK：バケット＆IAMロールが自動生成されます

---

Step 3: 認証（Cognito Auth）を追加

1. Amplifyコンソール → Auth → 「認証を追加」
2. メールアドレスベースのサインアップ／サインインを有効化
   • Cognito と IAM により、認証ユーザーごとの S3 アクセス制御が可能になります

---

Step 4: UI コンポーネントを組み込む

Amplify の Web IDE やコンソールの「コード編集画面」で以下を追加します。

npm install @aws-amplify/ui-react-storage aws-amplify

// src/App.tsx または pages/index.tsx

"use client";

import { Amplify } from "aws-amplify";
import {
  createAmplifyAuthAdapter,
  createStorageBrowser
} from "@aws-amplify/ui-react-storage/browser";
import "@aws-amplify/ui-react-storage/styles.css";
import config from "./amplify_outputs.json"; // Amplify出力ファイル

Amplify.configure(config);

const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter()
});

export default function App() {
  return <StorageBrowser />;
}

• 最新の @aws-amplify/ui-react-storage と aws-amplify を使用
• 上記コードをアプリに配置すると S3 ファイルUIが動きます

---

Step 5: 動作確認

1. Amplify アプリの公開URLにアクセス
2. ユーザー登録 → ログイン
3. StorageBrowser 画面でファイルの一覧、アップロード、ダウンロード、削除ができます

---

🖥 CORSとIAM設定も確認しよう

• CORS: StorageBrowser はブラウザから S3 に直接アクセスするため、CORS 設定必須（Amplify自動設定済だが、必要なら調整）
• IAM: 認証された Cognito ユーザーには S3 へ読み書き権限が自動付与されます

---

✅ まとめ

項目	内容
構成	Amplify の Hosting + Auth + Storage
UI	StorageBrowser コンポーネントによる簡易ブラウザUI
特徴	コード不要／即用可能／認証付き
注意点	CORS・IAM権限・バケット構成の制御が必要

---

🔗 参考リンク

• Storage Browser コンポーネント: https://ui.docs.amplify.aws/react/connected-components/storage/storagebrowser
• AWS Amplify: https://docs.amplify.aws/

---

🏷 Giita投稿時のタグ例

aws amplify s3 react ui storage-browser cognito

---

以