Storage Browser for Amazon S3 を使用して、アプリケーションを通じてユーザーをデータに接続

12 月 1 日、Storage Browser for Amazon S3 を導入しました。これは、ウェブアプリケーションに追加して、エンドユーザーが Amazon Simple Storage Service (Amazon S3) に保存されているデータを操作できるようにするオープンソースの UI コンポーネントです。このフロントエンドコンポーネントを使用すると、認可されたエンドユーザーは、AWS の ID およびセキュリティサービスまたはカスタムマネージドソリューションを利用して制御する特定の許可に基づいて、Amazon S3 からデータを参照、アップロード、ダウンロード、コピー、削除できます。

Storage Browser for S3 は、S3 のデータへのアクセスをエンドユーザーに提供したいと考えているデベロッパーの負担を軽減します。また、顧客、パートナー、従業員などのエンドユーザーが Amazon S3 や Amazon Web Services を使い慣れているかどうかにかかわらず、データを効率的に操作できるように設計されています。さらに、デベロッパーは、アプリケーションの設計に合わせて、Storage Browser インターフェイスのルックアンドフィールをカスタマイズできます。

開始方法を示す簡単なデモを見てみましょう。

インストール
Storage Browser for S3 は AWS Amplify UI React コンポーネントであるため、React、または Next.Js、Gatsby、Remix などの React ベースのフレームワークで構築されたウェブアプリケーションで使用する必要があります。また、AWS Amplify と AWS Amplify UI React パッケージの両方がインストールされている必要があります。

このデモでは Next.js を使用します。アプリケーションを設定する方法を一から学習したい場合は、AWS Amplify の設定と、新しい Next.js アプリケーションでの Amplify React UI コンポーネントの使用に関するこのステップバイステップガイドを確認してください。

Storage Browser for S3 を使用するために、@aws-amplify/ui-react ライブラリ全体をインストールする必要はありません。使用する予定のものがストレージ固有のパッケージのみである場合は、次のコマンドを使用してそれのみをインストールできます。

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

Amplify UI React パッケージが既にインストールされている既存のアプリケーションがある場合は、依存関係を更新して最新バージョンをインポートし、npm install を実行して既存のインストールを更新してください。

最後に、アプリケーションをゼロから構築する場合は、アプリケーションのディレクトリで npm create amplify@latest を実行して、認証やストレージなど、Amplify が提供するさまざまなカテゴリを使用できるようにしてください。

認可モードの選択
Storage Browser for S3 では、エンドユーザーがアクセスできる S3 バケットまたはプレフィックスと、実行できるアクションをレンダリングできるように、認証と認可を設定する必要があります。

許可を設定するには、それぞれ異なるユースケースに適した 3 つのオプションがあります:

AWS Amplify Auth の使用 – このオプションは、顧客やサードパーティーのパートナーに Amazon S3 のデータへのアクセスを提供したい場合に最適です。ファイルのアクセスコントロールとセキュリティを管理するために、デフォルトで AWS Amplify Auth を使用する Amplify Storage を設定できます。これは Amazon Cognito を利用し、ユーザー登録、サインイン、サインアウトフローを実装するための事前構築済みの UI コンポーネントを備えています。

AWS IAM アイデンティティセンターの使用 – このオプションは、Storage Browser for S3 を通じて S3 のデータへのアクセスをワークフォース全体に提供するスケーラブルなソリューションに最適です。S3 Access Grants インスタンスを AWS Identity and Access Management (IAM) アイデンティティセンターに関連付けて、ユーザーとグループのために S3 Access Grants 許可を一元管理します。これらのユーザーとグループには、Microsoft Entra ID や Okta などの外部 ID プロバイダーでホストされているユーザーとグループが含まれます。さらに、S3 の各 AWS CloudTrail データイベントは、データにアクセスしたエンドユーザー ID を参照するため、データアクセスに関するオブザーバビリティを高めるのに役立ちます。

IAM ロールと Amazon S3 Access Grants の併用 – このオプションは、Storage Browser for S3 を通じて、データへのアクセスを IAM プリンシパルに提供する場合に最適です。これを設定するには、まず S3 Access Grants インスタンスを作成する必要があります。ユーザーはこれを使用して、S3 バケットとプレフィックスについての許可を目的の IAM ID にマッピングできます。その後、s3:GetDataAccess を呼び出して S3 バケットまたはプレフィックスへの一時的な最小特権アクセスを取得するための許可を持つ IAM ロールを作成します。

このデモでは、エンドユーザーが組織に属していないことを前提としているため、Amplify Auth はこのケースに最適です。

許可の設定
まず、このガイドに従って Amplify Storage を設定する必要があります。その後、amplify/storage/resource.ts を開き、プレフィックスを使用して認可済みユーザーのために分離ストレージを設定する Amplify 認可モデル に従って、必要なアクセスルールとともに S3 バケットを宣言します。

次に、Amplify Auth との統合をカプセル化し、後でページに簡単にドロップできる StorageBrowser というコンポーネントを作成します。amplify_outputs.json への参照をパラメータとして使用してすべてをまとめるために、Amplify.config() を呼び出してください。

Storage Browser for S3 の認証と認可を設定するための詳細な手順については、「S3 ユーザーガイド」にアクセスしてください。

Storage Browser for S3 をアプリケーションに追加する
コンポーネントが作成されたので、<StorageBrowser/> を宣言することでレンダリングするページで、アプリケーションに追加する必要があります。

アプリケーションを実行するために npm run dev を使用します。ロード後、Storage Browser for S3 を追加したページに移動すると、デフォルトのレイアウトでロードされていることがわかります。また、上記の amplify/storage/resource.ts で定義したのと同じパスと許可で設定されているため、ユーザーは、設定した S3 バケットとプレフィックス内のファイルを参照、読み取り、書き込み、削除できます。

サブメニューから管理オペレーションにアクセスしながら、ファイルをダウンロードしたりフォルダを参照したりできます。サブメニューは、使用できないアクションを自動的にグレー表示します。

Storage Browser for S3 は結果を自動的にページ化し、ファイルやフォルダのフィルタリングと検索を可能にするため、データの操作や管理が容易になります。

すべてのデータアクセスは設定された認可モデルによって管理されるため、エンドユーザーはセキュリティやコンプライアンスの要件を損なうことなく、高度に直感的なインターフェイスを通じて S3 バケットやプレフィックスをシームレスに操作できます。

インターフェイスのカスタマイズ
柔軟な設計により、Storage Browser for S3 をアプリケーションのルックアンドフィールに合わせてカスタマイズできます。他の Amplify UI コンポーネントとほぼ同様に、デフォルトではアプリケーションでアクティブになっている Amplify テーマが使用されます。ただし、独自のテーマを作成したり、CSS を使用して要素を直接ターゲットにしたりすることで、ボタン、パンくずリスト、ページングコントロール、テキストフィールドなどのコンポーネントを簡単に変更できます。

テーマを作成するには、まず @aws-amplify/ui-react/server ライブラリの defineComponentTheme() 関数を使用して宣言する必要があります。テーマに 'storage-browser' などの名前を付け、スタイルを設定する要素をターゲットにします。

必要に応じてレイアウトを変更することもできます。例えば、コードにおいて、すべてのコントロールの flexDirection が 'row-reverse' に設定されています。

その後、以前に宣言した storage-browser テーマを使用して、createTheme() 関数でテーマを作成し、それを適用します。また、primaryColor をオーバーライドして緑色にします。

ページが再ロードされると、Storage Browser for S3 コンポーネントは、よりコンパクトな新しいレイアウトと、テキストが緑色になっている新しい配色で表示されます。

基本的に、UI インターフェイスのあらゆる要素をカスタマイズできます。これには、Home と表示されているタイトルなどの表示テキストも含まれます。唯一の例外はもちろん、バケット名やキーなどのデータに関する詳細です。これを利用して、例えばさまざまな言語のサポートを追加できます。

最後に、独自の UI を一から作成したい場合は、createStorageBrowser() 関数を呼び出して、プログラムで Storage Browser for S3 コンポーネントを作成します。この関数は、独自のカスタムフロントエンドとの統合に使用できる useView() フックを返します。これにより、同じ機能をすべて活用しながら、ルックアンドフィールを完全に制御できます。詳細については、ドキュメントで、さまざまなカスタマイズオプションとその設定方法の詳細をご覧ください。

まとめ
Storage Browser for S3 は、高度にカスタマイズ可能でユーザーフレンドリーな AWS Amplify UI React コンポーネントであり、エンドユーザーが Amazon S3 上のデータを安全に操作できるようにします。アクセスルールを完全に制御できるため、アプリケーションの自然な拡張として表示されるようにスタイル設定できるインターフェイスを通じて優れたユーザーエクスペリエンスを提供しながら、フロントエンドがアクセス要件に準拠しているようにできます。

知っておくべきこと

開始方法 – Storage Browser for S3 は、GitHub ページからインストールできます。開始方法の詳細については、UI ドキュメントにアクセスしてください。

互換性 – Storage Browser for S3 は、Glacier Flexible Retrieval および S3 Glacier Deep Archive を除くすべての Amazon S3 ストレージクラスと互換性があります。S3 Intelligent-Tiering とは互換性がありますが、S3 Intelligent-Tiering Archive Access Tier または S3 Intelligent-Tiering Deep Archive Access Tier とは互換性がありません。

パフォーマンスと耐久性 – Storage Browser for S3 には、アップロードリクエストを強化して高スループットのデータ転送を実現し、アップロードされたデータのチェックサムを計算するとともに (耐久性チェックに不合格となったリクエストは拒否)、パフォーマンスを最適化してアプリケーションのロード時間を短縮する組み込みロジックが含まれています。

料金 – Storage Browser for S3 はオープンソースであり、追加コストなしでアプリケーションと統合できます。お支払いいただくのは、Storage Browser for S3 で使用する、基盤となる AWS リソースの使用料のみです。

サポート – Storage Browser for S3 は、S3 の他の機能と同様に AWS サポートによってサポートされます。ビジネスおよびエンタープライズサポートプランのお客様は、Storage Browser for S3 の使用に関するサポートのために、24 時間年中無休で AWS サポートエンジニアにアクセスできます。

フィードバック – Storage Browser for S3 の機能と公開ロードマップに関するフィードバックをぜひ共有してください。

Matheus Guimaraes | @codingmatheus

原文はこちらです。