---
title: "Storage Browser for Amazon S3とは｜できること・導入方法・認証方式を解説"
url: "https://www.issoh.co.jp/tech/details/4693/"
published: 2024-12-27
updated: 2026-07-23
categories: ["AWS"]
publisher: "株式会社一創"
---

# Storage Browser for Amazon S3とは｜できること・導入方法・認証方式を解説

Storage Browser for Amazon S3は、Amazon S3のファイルを一覧・アップロード・ダウンロード・削除できる画面を、自社のWebアプリに数十行で埋め込めるオープンソースのUIコンポーネントです。AWS Amplify UIの一部として2024年12月に一般提供（GA）が始まり、Reactアプリに組み込んで使います。単体で起動するアプリでも、デスクトップにインストールするソフトでもありません。名前が似た無料のWindows用ソフト「S3 Browser」（NetSDK Software製）とは別物で、この記事はAWS公式のコンポーネントの方を扱います。

## まとめ：先に押さえる要点

- **実体**：AWS Amplify UIのReact用UIコンポーネント（2024年12月GA・オープンソース・コンポーネント自体は追加料金なし）。
- **できること**：S3のオブジェクトを一覧・アップロード（マルチパート）・ダウンロード・コピー・削除（フォルダごと可）し、画像/動画/テキストをプレビュー。
- **導入**：`@aws-amplify/ui-react-storage` と `aws-amplify` を入れ、`createStorageBrowser` で生成してJSXに置く。
- **認証は3方式**：Amplify Auth（Cognito）／マネージド認証＋S3 Access Grants／IAM Identity Center連携。誰にアクセスさせるかで選ぶ。
- **制約**：React（Next.js等含む）専用で、Vue・Angularや素のHTMLには非対応。

## Storage Browser for Amazon S3の実体と提供形態

Storage Browser for Amazon S3は、S3のファイル管理画面（ブラウズ画面）を部品として提供するReactコンポーネントです。AWS Amplifyのオープンソースライブラリ「Amplify UI」に含まれ、GitHubで公開されています。開発者は自社アプリにこの部品を配置するだけで、認可されたエンドユーザー（顧客・取引先・社内メンバー）にS3への操作画面を渡せます。従来はマネジメントコンソール、AWS CLI、SDKで実装していた「ユーザー向けのファイル操作画面」を、作り込みなしで用意できる点が主眼です。

### できること（対応する操作）

コンポーネントが標準で持つ操作は次のとおりです。用途に不要な操作はアクセス権限側で制限します。

| 操作     | 内容                         |
| ------ | -------------------------- |
| 一覧・移動  | バケットとプレフィックス（フォルダ）を階層でブラウズ |
| アップロード | 大容量ファイルはマルチパートアップロードで分割送信  |
| ダウンロード | 個別および複数ファイルのダウンロードに対応      |
| コピー・削除 | オブジェクトのコピー、ファイル／フォルダ単位の削除  |
| プレビュー  | 画像・動画・テキストをアプリ内で表示         |

表示テキストは `displayText` で日本語などに差し替えでき、テーマやアイコン、1ページの表示件数（`pageSize`）、アップロード前の検証（`validateFile`）もカスタマイズできます。

### 無料ソフト「S3 Browser」（NetSDK製）との違い

検索では「s3 browser」「s3ブラウザ」で、NetSDK Software製のWindows用デスクトップソフト**S3 Browser**と混同されがちですが、両者は別物です。NetSDK製はPCにインストールして単体で動く無料（一部有料Pro）のGUIクライアントで、担当者個人がバケットを操作する用途に向きます。一方でStorage Browser for Amazon S3は、自社のWebアプリに組み込んでエンドユーザーへ配布するための部品で、インストール型のソフトではありません。「自分でバケットを触りたい」ならNetSDK製、「自社サービスの画面にファイル操作を載せたい」ならAWS公式のコンポーネント、という住み分けになります。

## 導入手順と使い方（Reactでの最小構成）

対応フレームワークはReact、およびNext.js・Gatsby・RemixなどのReactベースの構成です。Vue・Angularや素のHTMLでは動きません。最短で試すなら、Amplify Auth（Cognito）を使う方式が手数を抑えられます。まず2つのパッケージを追加します。

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

次に、認証アダプタを指定して `createStorageBrowser` でコンポーネントを生成し、画面に配置します。以下はAmplify Authを使う場合の最小コードです。

```
import {
  createAmplifyAuthAdapter,
  createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';
import { Amplify } from 'aws-amplify';
import config from './amplify_outputs.json';

Amplify.configure(config);

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

あとは `<StorageBrowser />` をJSXに置けば、ログイン済みユーザーがアクセスを許可されたプレフィックスだけを操作できる画面が表示されます。どのプレフィックスに誰がアクセスできるかは、Amplify Storageの認可設定で決めます。

## 3つの認証・認可方式と選び方

Storage Browser for Amazon S3は「誰に・どの範囲を触らせるか」を認証方式で決めます。公式は3方式を用意しており、利用者の種類で選ぶのが実務的です。迷ったら、社外向けは方式1、AWSアカウント内の自分たち向けは方式2、全社規模で既存IDと連携するなら方式3が基準になります。

### 方式1：Amplify Auth（Cognito）＝顧客・取引先向け

`createAmplifyAuthAdapter()` を使い、認証基盤に[Amazon Cognito](https://www.issoh.co.jp/tech/details/3108/)を用いる方式です。ソーシャルログインや企業IdPでサインインした顧客・パートナーに、S3のデータを渡す用途に向きます。Amplifyを既に使っているなら最短で組めるため、SaaSの顧客向けファイル画面などはまずこの方式を検討します。

### 方式2：マネージド認証＋S3 Access Grants＝自社アカウント向け

`createManagedAuthAdapter()` に一時認証情報を返す `credentialsProvider` を渡す方式です。自社のIAMプリンシパルにS3 Access Grantsで権限を割り当て、`s3:GetDataAccess` と `s3:ListCallerAccessGrants` の権限を持つIAMロールから得た一時認証情報でコンポーネントを動かします。Cognitoを挟まず、AWSアカウント内のユーザーやロールに直接アクセス範囲を設計したい場合に選びます。

### 方式3：IAM Identity Center連携＝全社スケール向け

S3 Access GrantsをIAM Identity Centerに関連付け、Microsoft Entra IDやOktaなど既存の社内ディレクトリのユーザー・グループにアクセスを割り当てる方式です。トラステッドID伝播により、S3へのアクセスがCloudTrailのデータイベントにエンドユーザー本人の識別子として記録されるため、監査が要る全社利用に向きます。設定はIdPフェデレーション、信頼するトークン発行者の登録、JWTとIAM認証情報の交換API（`CreateTokenWithIAM`＋`AssumeRole`）の用意まで必要で、3方式の中で構築コストは最も高くなります。少人数・単一アカウントで方式3を選ぶのは過剰で、その場合は方式1か2に倒すべきです。

## マネジメントコンソール・CLI・第三者ツールとの使い分け

S3のファイル操作画面は、Storage Browserだけが手段ではありません。自分たち（管理者・開発者）がS3を触るだけなら、マネジメントコンソールやAWS CLI、前述のNetSDK製S3 Browserで十分で、わざわざReactアプリを用意する必要はありません。Storage Browserが効くのは、**AWSの認証情報を持たない社外ユーザーや非エンジニアに、自社アプリの画面越しに限定的なファイル操作を渡したい**ケースです。コンソールへIAMユーザーを配るのはセキュリティ上避けたい、けれどファイル授受のUIは作り込みたくない——この条件に当てはまるときが導入の判断ラインになります。逆に、社内数名がバケットを直接触るだけの用途で導入すると、認証設計とReactアプリ保守の手間だけが増えます。

## 料金と導入前の注意点

Storage Browser for Amazon S3のコンポーネント自体はオープンソースで追加料金はかかりません。発生するのは、裏側で使うS3のストレージ料金・リクエスト料金・データ転送料金と、認証に使うCognitoやIAM Identity Center等の各サービス料金です。料金の考え方はAmazon S3本体と同じで、ストレージクラスの選択やリクエスト数の最適化がコストに効きます。導入前に確認すべき制約は次の3点です。第一に、React専用でVue・Angularや素のHTMLには組み込めません。第二に、部品はクライアント側で動くため、一時認証情報の受け渡し（トークン交換のエンドポイントなど）を自前で用意する必要があります。第三に、GAは2024年12月と新しく、機能やAPIは更新が続くため、実装時は公式ドキュメントで最新の仕様を確認してください。

## よくある質問

### Storage Browser for S3の使い方は？

`@aws-amplify/ui-react-storage` と `aws-amplify` をインストールし、`createStorageBrowser` で生成した `<StorageBrowser />` をReactアプリのJSXに配置します。認証は用途に応じてAmplify Auth・S3 Access Grants・IAM Identity Centerから選びます。

### Vue・Angularや素のHTMLでも使えますか？

使えません。Amplify UIのReactコンポーネントのため、ReactまたはNext.js・Gatsby・RemixなどのReactベースの構成が前提です。

### 「S3 Browser」という無料ソフトと同じものですか？

別物です。無料ソフトの「S3 Browser」はNetSDK Software製のWindows用デスクトップクライアントで、PCにインストールして単体で使います。Storage Browser for Amazon S3はWebアプリに組み込むAWS公式のUIコンポーネントです。

### 料金はかかりますか？

コンポーネント自体はオープンソースで無料です。実際の費用は、裏側のS3の利用料と認証に使うAWSサービスの料金として発生します。

### アクセスできる範囲はどう制御しますか？

認証方式に応じて、Amplify Storageの認可設定、またはS3 Access Grantsでユーザー・グループごとにバケットやプレフィックス単位の権限を割り当てます。ユーザーは許可された範囲だけを操作できます。

## 関連記事

- [Amazon Cognito（コグニート）とは？料金・できること・使い方を初心者向けにわかりやすく解説](https://www.issoh.co.jp/tech/details/3108/)
- [Amazon S3 Tablesとは何か？その概要と基本概念](https://www.issoh.co.jp/tech/details/5405/)
- [Amazon S3 Vectors APIとは？操作一覧・料金・OpenSearch比較とRAG構築を解説【2026年GA版】](https://www.issoh.co.jp/tech/details/7773/)

---

出典: [Storage Browser for Amazon S3とは｜できること・導入方法・認証方式を解説](<https://www.issoh.co.jp/tech/details/4693/>)（株式会社一創）