Japan Digital Design（以下JDD）でインフラエンジニアをしている渡邉です。
Japan Digital Design Advent Calendar 2024 の17日目の記事になります。

さて、本記事では12月のre:Invent期間中に発表された、S3をブラウザで管理するための機能について調査してみたいと思います。

S3ブラウジングの歴史

S3のサービススタートは2006年ですが、その割とすぐ後に非公式な S3Browser というツールが生まれました。
Windowsでしか使えませんが、AWS ConsoleやCLIでのS3の操作がやりにくいこともあって、私の周りではちらほら利用しているユーザーが居たように思います。
あとは、WinSCP等、SSHクライアントの中にはS3に対応しているものもあり、ファイルの管理はそちらを使うというパターンもありました。
いずれもS3のファイルをもっと手軽に（AWSの知識が無くても）管理したい、というニーズがそれなりにあったということだと理解しています。

そしてついに本家がそのニーズに気づき（かどうかは知りませんが）、公式にS3ブラウジングツールがリリースされました。

Transfer Family Web Apps

Storage Browser for S3

それぞれ利用するための方法が異なりますので、下記でざっくり比較してみます。

構築手順

Transfer Family Web Apps

Transfer Family Web Appsを利用するためにはIAM Identity Centerが必要なため、事前に設定を済ませておきます。（設定方法は本筋から外れるため割愛します）

AWS Transfer Familyに「ウェブアプリ」というメニューが増えてますのでこちらからアプリを作成します。

今回はお試しのため一旦デフォルトのままで設定を進めます。

カスタマイズできる部分は限られますが、ロゴやタイトル等を設定できるようです。

あっという間に作成できました。

生成直後のデフォルトでは誰にも権限が付与されていないため、ユーザーを割り当てます。

ユーザー追加のUIに癖がありますが、既存ユーザーを追加したい場合は検索窓から検索して追加するようです。

上記ユーザーの割り当て後、アプリケーションエンドポイントにアクセスすると無事ログインできました。

ただし、この時点ではどのバケットへのアクセスも許可されていないため、実際にアクセスするバケットに対して、S3 Access Grantsを追加してあげる必要があります。

権限を適宜調整します。

上記でGrants付与後、再度アクセスすると無事該当バケットが閲覧できました。

ただし、まだNGです。このままではアクセスするドメインが異なるため、CORSではじかれてしまいます。

該当バケットのCORSを払い出されたURLに合わせて適宜調整します。

これでようやくエラーが消えました。
ファイルやフォルダの追加も問題なくできました。

削除操作も可能です。

簡易的ながら、ファイル名の検索もできます。

Storage Browser for S3

Storage Browser for S3 は 2024/9ごろアルファ版がリリースされていましたが、正式にGAとなりました。
実体は下記の aws-amplify パッケージの一部です。（aws-amplify/ui-react-storage）
つまり、AWSのサービスというよりも、自分自身のアプリケーションにS3ブラウジングの機能を組み込める、Amplifyで使えるUIコンポーネント、ということになります。
単体で利用できるものでは無いため、Amplifyやフロントエンドの知識が必要となります。

今回はシンプルに動作確認するために、Viteをベースに構築します。

 npm create vite@latest

上記でViteアプリを生成した後、Storage Browser for S3 を追加します。

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

さらにAmplify用に初期化します。

npm create amplify@latest

Storage Browserを利用するためのサンプルバケットを作成します。
今回はSandboxおよびローカルでの一時的な確認のみのため、guestにも書き込み権限を付与します。

amplify/storage/resource.ts（新規作成）

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
    name: 's3-browser-sample',
    access: (allow) => ({
        'public/*': [
            allow.guest.to(['read', 'write', 'delete']),
        ],
    })
});

バックエンドに上記で作成したstorageを追加します。

amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
+ import { storage } from './storage/resource';

/**
 * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
 */
defineBackend({
  auth,
  data,
+ storage,
});

Sandbox環境にデプロイします。

npx ampx sandbox --profile ****

バックエンドの準備はこれで完了です。
後はフロントエンドにてStorageBrowserコンポーネントを利用します。

src/App.tsx

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.configure(config);

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

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

export default App

ローカルで起動します。

npm run dev

無事Storage Browserのコンポーネントが表示できました。UIとしてはTrasnfer Familyとほぼ同じです。

これにCognito等で認証機能を付与すれば、組織外のメンバーにS3オブジェクトを操作してもらう、というのも柔軟にできそうです。
Transfer Family Web AppsではIAM Identity Centerのみしか認証として利用できないため、手間はかかるものの Storage Browser の方が汎用性は高そうです。
Amplifyを利用している場合は自前でコンポーネントを構築する必要もなく、サクッと使えてとても便利ですね。

なお、確認後はSandbox環境を削除するのをお忘れなく。

npx ampx sandbox delete --profile ****

まとめ

どちらのサービスも、UIには差がなさそうでした。（おそらく内部的には同じものを利用していると思われます）
IAM Identity Centerでのユーザー管理を実施したい場合はTransfer Family Web Appsで手軽に構築できます。
IAM Identity Centerを利用していなかったり、独自の認証サービスを利用したいケース、また見た目を更にカスタマイズしたい、別のアプリケーションの一部として組み込みたいケースの場合はStorage Browser for S3を利用することになりそうです。

いずれのサービスにおいても、手軽にS3オブジェクトの管理をする環境を作成できるという点で、ユースケースによっては開発コストや期間の短縮につながると感じました。

以上、簡単にですが2つのS3ブラウジングツールを比較してみました。
最後までご覧いただきありがとうございました。

Japan Digital Design株式会社では、一緒に働いてくださる仲間を募集中です。カジュアル面談も実施しておりますので下記リンク先からお気軽にお問合せください。

この記事に関するお問い合わせはこちら

Technology & Development Div.
Infra Engineer

Yuki Watanabe