🗂

Storage Browser for Amazon S3 を動かす

2024/12/20に公開

Amplify

tech

はじめに

Storage Browser for Amazon S3とは

AWSが提供するAWS Amplifyのライブラリの一つで、ウェブアプリケーション上でS3バケットのファイル操作を簡単に実装できるツール.
このツールを使用することで、以下のような機能を素早く実装することができます。

S3バケット内のファイル一覧表示
ファイルのアップロード/ダウンロード
フォルダ構造の管理
ファイルの削除

AWS AmplifyプロジェクトにStorage Browser for Amazon S3を導入し、実際に動作させるまでの手順。

ドキュメント

セットアップ手順

今回はNexJSで作成したAmplifyプロジェクトにStorage Browser for Amazon S3を導入します。

1. プロジェクトの作成

まずはNexJSのプロジェクトを作成します。

今回は手っ取り早く済ませたかったので、NextJSのApp Routerスターターを使用しました。

リポジトリを自分のGithubにコピーしてAmplifyプロジェクトを作成します。
それをAmplifyで新しいアプリとして作成します。

2. ローカル環境のセットアップ

次に、フロントエンドに機能を追加するためにローカル開発環境をセットアップ。

Amplifyアプリで指定したGithubリポジトリをローカルにクローンします。

git clone https://github.com/REPO_NAME/REPO_NAME.git
npm install

Amplifyコンソールでデプロイしたブランチをクリックして、デプロイ履歴とデプロイされたバックエンドリソースのタブがあるので、デプロイされたバックエンドリソースのタブをクリックすると amplify_outputs.jsonファイルをダウンロードというボタンがあるので、それをクリックするとダウンロードできる。
amplify_outputs.jsonをプロジェクトのルートに配置します。

├── amplify
├── src
├── amplify_outputs.json <== backend outputs file
├── package.json
└── tsconfig.json

3. Storage Browserのコンポーネントを作成

必要なUIコンポーネントをインストール。

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

backend環境にストレージを追加

amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { storage } from './storage/resource.js';
defineBackend({
  auth,
  storage,
});

amplifyフォルダの下にストレージフォルダ（storage）とファイル（resource.ts）を作成
amplify/storage/resource.ts

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

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

todo機能は削除して、Storage Browserのコンポーネントを作成
page.tsx

"use client";
import { useAuthenticator } from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import {
  createAmplifyAuthAdapter,
  createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import "@aws-amplify/ui-react-storage/styles.css";

Amplify.configure(outputs);
const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter(),
});

export default function App() {
  
  const { signOut } = useAuthenticator();

  return (
    <main>
      <StorageBrowser />
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

レイアウトも調整(とりあえず認証だけ)

layout.tsx

'use client'
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import outputs from "@/amplify_outputs.json";
import { Amplify } from "aws-amplify";

Amplify.configure(outputs);

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>      
        <Authenticator>
          {children}
        </Authenticator>
      </body>
    </html>
  );
}

ローカル開発環境のsandboxを起動

npx ampx sandbox

ローカル開発サーバーを起動

npm run dev

http://localhost:3000
これででローカル開発サーバーが起動します。

ログインして、Storage Browserのコンポーネントが表示されることを確認。

4. デプロイ

githubにpushして、Amplifyコンソールでデプロイ。

git push origin main

まとめ

マネコンを利用したくない場合とか、ユーザー管理は自前でやりたい場合とかには便利そう！
ユーザーにデータの更新をしてもらいたい時にはとても便利ですね。
自前のシステムにも組み込みやすいですね。