ついにGA 🎉 Storage Browser for Amazon S3をためしてみた

## Storage Browser for Amazon S3とは
2024年12月1日にGAとなったS3の新機能。S3へのファイルブラウザ機能をWebアプリに簡単にできるReactコンポーネントが[Amplify UI](https://ui.docs.amplify.aws/)からオープンソースで提供されています。

**リリース情報**

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/storage-browser-amazon-s3/

**ドキュメント**

https://ui.docs.amplify.aws/react/connected-components/storage/storage-browser

**リポジトリ**

https://github.com/aws-amplify/amplify-ui/tree/main/packages/react-storage/src/components/StorageBrowser

### ためしてみた
今回はAmplify Gen2の[React starter template](https://docs.amplify.aws/react/start/quickstart/)からセットアップしてます。開発はローカルでおこなうので[ドキュメントの手順](https://docs.amplify.aws/react/start/quickstart/)で作成したリポジトリをコピーします。

#### 1. リポジトリをローカルにコピー
```sh
## リポジトリをローカルにダウンロード
git clone your-repo
## リポジトリのディレクトリに移動
cd your-repo
## 初期化
npm install
```

#### 2. AmplifyのSandboxを作成
Amplify Gen2では簡単に[Sandbox](https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/)環境を作成できます。Amplify Gen2の特徴の一つです。

```sh
## sandboxの作成
npx ampx sandbox 
```
開発中は基本的にsandboxを起動して開発します。リソースが構築されるまで少し待ちます。

#### 3. Reactアプリの起動
Amplify Gen2の[React starter template](https://docs.amplify.aws/react/start/quickstart/)は[vite](https://ja.vite.dev/)が採用されています。

```sh
## ローカル開発環境を立ち上げる
npm run dev
```
デフォルトだと[localhost:5173](http://localhost:5173/)で開発環境にアクセスできます。

![amplify-react-template-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/ed7d8bcf-5f1f-7076-532f-9b5d89f90542.png)

このようなアプリが立ち上がれば成功です。

### Storage Browserの設定

Storage Browserを利用するには認証設定を事前に済ませておく必要があります。[ドキュメント](https://ui.docs.amplify.aws/react/connected-components/storage/storage-browser)によると下記の３つの方法が提供されています。

1. Amplify auth
2. AWS IAM Identity Center and S3 Access Grants
3. Customer managed auth

#### 1. Amplify Authでログイン機能を作成

今回はAmplify authで進めます。[Amplify auth](https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/)を利用するためにバックエンドを更新します。Reactのテンプレートは初期設定でリソースができています。

なのでアプリをAuthenticatorコンポーネントでラップするだけで認証機能を追加できます。

```tsx
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);
```
このようなログインUIが利用できるようになります。簡単ですね。

![amplify-auth-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/bcab454f-16ef-5ea8-55d2-44bc2ee66ff9.png)

#### 2. Amplify StorageでS3バケットを作成
S3を作成します。Amplify Storageリソースを定義します。

```typescript
// amplify/storage/resource.ts
import { defineStorage } from "@aws-amplify/backend";

export const storage = defineStorage({
  name: "amplifyStorageBrowserDrive",
   access: (allow) => ({
    "public/*": [
      allow.guest.to(["read"]),
      allow.authenticated.to(["read", "write", "delete"]),
    ],
    "protected/{entity_id}/*": [
      allow.authenticated.to(["read"]),
      allow.entity("identity").to(["read", "write", "delete"]),
    ],
    "private/{entity_id}/*": [
      allow.entity("identity").to(["read", "write", "delete"]),
    ],
  }),
});
```

AmplifyのBuckendに作成したStorageのリソースを追加します。Dataはリソース不要なので削除します。

```typescript
// amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";
import { auth } from "./auth/resource";
import { storage } from "./storage/resource";

defineBackend({
  auth,
  storage,
});
```

Amplify Gen2ではsandboxを起動していると即時にリソースがビルドされるので開発者体験が向上していますね。

### 3. Storage Browserのコンポーネントを作成
UIコンポーネントをインストールします。

```sh
npm i @aws-amplify/ui-react-storage/browser
```
アプリにコンポーネントを定義します。

```tsx
// src/App.tsx
import {
  createAmplifyAuthAdapter,
  createStorageBrowser,
} from "@aws-amplify/ui-react-storage/browser";
import "@aws-amplify/ui-react-storage/styles.css";
import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";

Amplify.configure(outputs);

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

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

export default App;
```

デフォルトのCSSがあるとレイアウトが崩れるのでコメントアウトするか削除します。
```tsx
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
// import "./index.css"; ← いらない
```

 これにて完成です。簡単ですね。

 ### 完成したサンプルアプリ

簡単にこのようなファイルブラウザアプリがつくれます。アクセスできるフォルダやバケット、権限が確認できます。

![storage-browser-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/cde26fcc-adaf-66d9-073a-c40deb8837a4.png)

パブリックにフォルダを追加してファイルをアップロードしてみます。
 
![storage-browser-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/1633e2f1-6751-c3d0-b7a4-64aa7b7db3b3.png)

簡単にフォルダが作成できました。

![storage-browser-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/5e2e1cc2-a335-899f-192b-c908dc83ce7d.png)


ファイルをアップロードしてみます。

![storage-browser-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/0f94d932-505e-c21c-9737-cff7ac835836.png)

アップロードできました。ファイルタイプやサイズの確認ダウンロードもできます。

![storage-browser-03-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/3e4a9010-7a9a-32d2-95b1-b880993e0333.png)

ファイル検索機能もついています。ソートにも対応してますね。

![storage-browser-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/4f28c7eb-223d-a3d1-1e1b-c549cfc3dc08.png)

削除も可能です！

![storage-browser-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/24689fd6-62ae-f848-4716-821e1a037984.png)

削除できました。

![storage-browser-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/f19036e1-b6cf-8455-04b7-311307551648.png)

### まとめ
Storage Browser for Amazon S3を利用すると簡単にアプリにファイルブラウズ機能を追加できました。シンプルですがプレビューの時よりも機能が増えている印象です。

ファイルブラウザにマネコンを利用させたくないケースってあると思います。
私はRAGのデータソースにS3を選択することが多いので、ユーザーにファイル更新してもらうのに便利かなと思ってます。

また、機能追加の[ロードマップ](https://github.com/orgs/aws-amplify/projects/137)も公開されていて、サムネイルの表示やタグづけ、CloudFrontキャッシュのサポートなどが予定されているようです。

今後も楽しみなサービスです☺️

また、別のサービスにて提供されている「AWS Transfer Family web apps for fully managed Amazon S3 file transfers」ではノーコードでS3のファイルブラウザアプリを作成できるようです。こちらのUIのベースになっているのもこのStorage Browser for Amazon S3のようです。

https://aws.amazon.com/jp/blogs/aws/announcing-aws-transfer-family-web-apps-for-fully-managed-amazon-s3-file-transfers

こちらもニーズがありそうなサービスですね。