Storage Browser for Amazon S3とは
2024年12月1日にGAとなったS3の新機能。S3へのファイルブラウザ機能をWebアプリに簡単にできるReactコンポーネントがAmplify UIからオープンソースで提供されています。
リリース情報
リポジトリ
ドキュメント
ためしてみた
今回はAmplify Gen2のReact starter templateからセットアップしてます。開発はローカルでおこなうのでドキュメントの手順で作成したリポジトリをコピーします。
1. リポジトリをローカルにコピー
## リポジトリをローカルにダウンロード
git clone your-repo
## リポジトリのディレクトリに移動
cd your-repo
## 初期化
npm install
2. AmplifyのSandboxを作成
Amplify Gen2では簡単にSandbox環境を作成できます。Amplify Gen2の特徴の一つです。
## sandboxの作成
npx ampx sandbox
開発中は基本的にsandboxを起動して開発します。リソースが構築されるまで少し待ちます。
3. Reactアプリの起動
Amplify Gen2のReact starter templateはviteが採用されています。
## ローカル開発環境を立ち上げる
npm run dev
デフォルトだとlocalhost:5173で開発環境にアクセスできます。
このようなアプリが立ち上がれば成功です。
Storage Browserの設定
Storage Browserを利用するには認証設定を事前に済ませておく必要があります。ドキュメントによると下記の３つの方法が提供されています。
- Amplify auth
- AWS IAM Identity Center and S3 Access Grants
- Customer managed auth
1. Amplify Authでログイン機能を作成
今回はAmplify authで進めます。Amplify authを利用するためにバックエンドを更新します。Reactのテンプレートは初期設定でリソースができています。
なのでアプリをAuthenticatorコンポーネントでラップするだけで認証機能を追加できます。
// 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が利用できるようになります。簡単ですね。
2. Amplify StorageでS3バケットを作成
S3を作成します。Amplify Storageリソースを定義します。
// 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はリソース不要なので削除します。
// 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コンポーネントをインストールします。
npm i @aws-amplify/ui-react-storage/browser
アプリにコンポーネントを定義します。
// 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があるとレイアウトが崩れるのでコメントアウトするか削除します。
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
// import "./index.css"; ← いらない
これにて完成です。簡単ですね。
完成したサンプルアプリ
簡単にこのようなファイルブラウザアプリがつくれます。アクセスできるフォルダやバケット、権限が確認できます。
パブリックにフォルダを追加してファイルをアップロードしてみます。
簡単にフォルダが作成できました。
ファイルをアップロードしてみます。
アップロードできました。ファイルタイプやサイズの確認ダウンロードもできます。
ファイル検索機能もついています。ソートにも対応してますね。
削除も可能です！
削除できました。
まとめ
Storage Browser for Amazon S3を利用すると簡単にアプリにファイルブラウズ機能を追加できました。シンプルですがプレビューの時よりも機能が増えている印象です。
ファイルブラウザにマネコンを利用させたくないケースってあると思います。
私はRAGのデータソースにS3を選択することが多いので、ユーザーにファイル更新してもらうのに便利かなと思ってます。
また、機能追加のロードマップも公開されていて、サムネイルの表示やタグづけ、CloudFrontキャッシュのサポートなどが予定されているようです。
今後も楽しみなサービスです☺️
また、別のサービスにて提供されている「AWS Transfer Family web apps for fully managed Amazon S3 file transfers」ではノーコードでS3のファイルブラウザアプリを作成できるようです。こちらのUIのベースになっているのもこのStorage Browser for Amazon S3のようです。
こちらもニーズがありそうなサービスですね。
Amplify Boost Up #07
目黒のAWSオフィスで開催です。
オンラインも同時開催なのでご興味あればご参加ください🚀