【AWS re:Invent 2024】GAされた「Storage Browser for Amazon S3」を試してみた

こんにちは、エンタープライズクラウド部クラウドリライアビリティ課の呉屋です。

re:Invent 2024で発表された機能で、気になっていたものがありましたので、調べつつ、試してみました。

2024年9月5日にアルファ版リリースされたS3の新たな機能「Storage Browser for S3」が、2024年12月1日に一般提供されました。

Amazon S3に保存されたデータを簡単に管理できる機能とのことです。

aws.amazon.com

試してみて分かったこと
Storage Browser for S3の機能概要
実際に試してみた
まとめ

試してみて分かったこと

Storage Browser for S3は簡単にBOXのようなファイル共有サービスが実装できる
ユーザー権限やフォルダ権限など、細かい設定も可能
CSSも組み込めば、レイアウト変更も可能

Storage Browser for S3の機能概要

機能	内容
簡単なS3操作	Webアプリケーションに追加することで、ユーザーはGUIを使ってAmazon S3のデータを参照、ダウンロード、アップロード、コピー、削除などが可能になる
アクセス制御	Amplify AuthやCognitoなどと組み合わせることで、ユーザーに対するアクセス制御が可能許可されたエンドユーザーだけがデータを操作できるよう制御される
オープンソース提供	Reactコンポーネントとして提供され、AWS Amplifyを使ったWebアプリケーションに簡単に統合可能。

正式版の新機能

機能	内容
データ検索	ファイル名に基づいてデータを検索可能になった
チェックサム機能	アップロードされるデータの整合性チェックを行い、チェックサムが一致しないデータはアップロードをブロックする

本機能により、AWS環境でのS3データ操作がより簡単でセキュアに行えるようになります。

実際に試してみた

Storage Browser for S3 は Web アプリケーションに追加できるオープンソースコンポーネントです。オープンソースで提供されていますので、ドキュメント記載通りに環境構築を行います。

Storage Browser for Amazon S3 | Amplify UI for React

今回はCloud9環境上で実施します。

環境準備

リポジトリのクローン

administrator:~/environment $ git clone https://github.com/reesscot/nextjs-storage-browser.git
administrator:~/environment $ ls
README.md  nextjs-storage-browser

パッケージのインストール

administrator:~/environment $ cd  nextjs-storage-browser
administrator:~/environment/nextjs-storage-browser (main) $ npm install

sandbox起動

Amplify Gen2のサンドボックス機能は、開発者ごとに個別のバックエンド環境を提供する仕組みです。他の開発者に影響を与えずに認証機能の追加やデータベース設計などの変更を試せて、コードの変更は自動で反映されます。

administrator:~/environment/nextjs-storage-browser (main) $ npx ampx sandbox

ここで注意点です。当AWSアカウントでsandboxを最初に実行した場合、下記のエラーが出ます。

The given region has not been bootstrapped. Sign in to console as a Root user or Admin to complete the bootstrap process, then restart the sandbox.

東京リージョンで使用する場合は、下記のURLからブートストラップを実行します。

https://ap-northeast-1.console.aws.amazon.com/amplify/create/bootstraping?region=ap-northeast-1

下記が表示されれば、完了です。

実行完了すると、CloudFormationで環境が作成されていることが分かります。

環境の立ち上げ

administrator:~/environment/wk/nextjs-storage-browser (main) $ npm run dev

ログイン画面の表示

指定されたURLにアクセスすると、ログイン画面が表示されます。アクセスするユーザーを作成します。

アプリケーション画面

作成したユーザーでログインして、こちらの画面が表示されれば完了です。

5つのフォルダがありますが、それぞれで可能な操作権限が異なります。

media-readonly → 読み取りのみ
media-readwritedelete → 読み取り・書き込み・削除が可能

フォルダの権限設定は、下記のソースで行われており、自由に変更が可能です。

administrator:~/environment/nextjs-storage-browser (main) $ cd amplify/
auth/    data/    storage/ 
administrator:~/environment/nextjs-storage-browser (main) $ cd amplify/storage/
administrator:~/environment/nextjs-storage-browser/amplify/storage (main) $ ls
resource.ts

administrator:~/environment/nextjs-storage-browser/amplify/storage (main) $ cat resource.ts 
import { defineStorage } from "@aws-amplify/backend";

export const storage = defineStorage({
  name: "storage-browser-test",
  access: (allow: any) => ({
    'media-readwritedelete/*': [allow.authenticated.to(['read', 'write', 'delete'])],
    'media-readonly/*': [allow.authenticated.to(['read'])],
    'shared-folder-readwrite/*': [
      allow.authenticated.to(['read', 'write'])
    ],
    'protected-useronlyreadwritedelete/{entity_id}/*': [
      allow.authenticated.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'private-useronlyreadwritedelete/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
});