Storage Browser for Amazon S3使ってみた
目次
はじめに
はじめまして！
クラウドビルダーズのKawabataと申します。
先日、案件対応でStorage Browser for Amazon S3に触れる機会があったのでまとめてみました。
Storage Browser for Amazon S3とは
Storage Browser for Amazon S3の概要
Amazon S3のデータを簡単に管理できるWebベースのインターフェースを提供するオープンソースのコンポーネントです。
AWSの技術的な知識がないユーザーでも、直感的にS3バケット内のデータを操作できるように設計されています。2024年12月1日に一般提供が開始され、AWS AmplifyのUIライブラリの一部として利用可能です。
主な機能
データ操作: S3に保存されているデータをブラウズ、アップロード、ダウンロード、コピー、削除することができます。
認証と認可: AWS Amplify AuthやAmazon Cognitoを利用した認証機能をサポートしており、ユーザーごとに異なるアクセス権限を設定できます。
これにより、特定のユーザーやグループに対してデータへのアクセスを制御することが可能です。
利用シーン
- Webサイトのコンテンツ管理
- 企業内のデータ共有
やってみた
今回作成したコードも公開しています。
Amplifyアプリの作成
まずは以下Next.jsのテンプレートを利用してAmplifyをデプロイしていきます
- Create the repositoryの手順に沿って、自信のGitHubにamplify-next-templateをForkします
- AWSアカウントにログインし、以下設定でAmplifyを作成します
- リポジトリ設定時にGitHubへのアクセス許可を設定する必要があります
- アプリケーションの設定は特に変更せず次へを押してください
| 項目 | 設定値 |
| Git プロバイダー | GitHub |
| リポジトリ | 自身のアカウントにForkしたリポジトリ |
| ブランチ | main |
3. デプロイが始まるので完了するまで待ちます
4. デプロイが完了したらドメインにアクセスします
以下のような画面が表示されれば成功です
Storage Browserを設定
Storage Browserを利用するには認証設定をする必要があります。
今回はAmplify Authを使って設定していきます。
- リポジトリをローカルにコピーしてプロジェクトのセットアップを行います。
// リポジトリをクローン
git clone https://github.com/ユーザー名/amplify-next-template.git
// リポジトリに移動
cd amplify-next-template
// パッケージをインストール
npm install2. Storage BrowserのUIコンポーネントをインストールします。
npm i @aws-amplify/ui-react-storage3. S3を作成するファイルを作成します。
// storageディレクトリを作成
mkdir amplify/storage
// resource.tsファイルを作成
touch amplify/storage/resource.ts4. resource.tsに以下内容を貼り付けます。
import { defineStorage } from "@aws-amplify/backend";
export const storage = defineStorage({
name: 'myProjectFiles',
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'])
]
})
});5. AmplifyのBackendに作成したStorageを追加していきます。
Dataは不要なので削除します。
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { storage } from './storage/resource.js';
defineBackend({
auth,
storage,
});
6. アプリにCognitoの認証とStorage Browserを実装していきます。
import outputsがエラーになりますが、これはbuild時amplify_outputs.jsonが作成されるので問題ないです。
"use client";
import "@aws-amplify/ui-react/styles.css";
import "@aws-amplify/ui-react-storage/storage-browser-styles.css";
import outputs from "@/amplify_outputs.json";
import { Authenticator, Button } from "@aws-amplify/ui-react";
import { StorageBrowser } from "@aws-amplify/ui-react-storage";
import { Amplify } from "aws-amplify";
Amplify.configure(outputs);
export default function App() {
return (
<Authenticator>
{({ signOut }) => (
<>
<Button onClick={signOut}>Sign Out</Button>
<StorageBrowser />
</>
)}
</Authenticator>
);
}
7. デフォルトのCSSがあるとレイアウトが崩れるのでコメントアウトします。
import type { Metadata } from "next";
import { Inter } from "next/font/google";
// import "./app.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
8. GitHubに変更をPushします。
git add .
git commit -m "add storage browser"
git push -u origin main 9. デプロイが始まるので完了するまで待ちます。
ブラウザからS3を操作してみる
- ドメインにアクセスするとログイン画面が表示されるので、アカウントを作成してログインします。
2. S3を操作する画面が表示されます。
3. publicフォルダにファイルをアップロードしてみましょう。
4. S3にもファイルがアップロードされています。
5. ファイルを削除してみましょう。
6. S3でも削除されていることが確認できます。
さいごに
Storage Browser for S3を使って、S3を簡単に操作できるWebアプリを作成してみました。
非エンジニアの方にS3を使ってもらうには非常に便利だなと感じました。
ただし、このやり方だとS3のバケット名がAmplifyによってランダムに作成されてしまいます。
次回ブログで、任意の名前を設定したS3バケットを利用する方法を紹介します。
関連記事
-
【Storage Browser for Amazon S3】任意のバケット名でS3を作成する -
SageMaker+APIGateway+Lambdaで作るサーバレスアプリケーション～③(完) -
CloudWatch LogsのログをS3へ転送してみた