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

🎯 この記事でできること

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

✅ 前提条件

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

Step 1: Amplify アプリを作成

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

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

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

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

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

Amplifyコンソール → Auth → 「認証を追加」
メールアドレスベースのサインアップ／サインインを有効化
- 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: 動作確認

Amplify アプリの公開URLにアクセス
ユーザー登録 → ログイン
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

以