🐭

Storage Browser for Amazon S3を簡単に実装したい

2024/12/23に公開

こんな方向けの記事です。

  • ファイル共有ツールを作成したい。
  • Storage Browser for Amazon S3を実装したい。
  • AWS Amplifyを使った実績がとりあえず欲しい。
  • 下記のようなファイル共有ツールが使えない。
    • GoogleDrive
    • OneDrive
    • BOX

前提

npmがインストールされていること。
gitがインストールされていること。
githubのアカウントを持っていること。

実装(リポジトリ作成)

まずはgithubでプライベートリポジトリを作成しましょう。

 
 
無事に出来ましたね。

 
 

後で使いますのでリポジトリのURLを控えておきましょう。

 
 
TokenIDも発行しておきましょう。
右上の自身のGitHubアカウントから
<Settings>

左メニュー最下部の<Developer Settings>

<Personal access tokens>

<Fine-grained tokens>

<Ganerate new token>
 
Token nameは任意の名前でOKです。

 
Repository accessは最初に作ったリポジトリに限定しましょう。

 
Repository permissionsは内容に応じて設定しましょう。

 
ここまで最下部の設定が完了したら
<Generate token>を押下
 
後で使いますので発行されたTokenIDを控えておきましょう。

実装(ファイル準備)

お次はこちらのgitをローカルサーバー(今回はCloudShellを使用しています)にcloneしましょう。
https://github.com/reesscot/nextjs-storage-browser

コマンドは下記で行けると思います。

git clone https://github.com/reesscot/nextjs-storage-browser.git

 
cloneできたらディレクトリに入りましょう。

cd nextjs-storage-browser

 
npmコマンドで必要なライブラリを入れましょう。

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

 
次にS3の設定をしていきましょう。

vi amplify/storage/resource.ts

 
中身を編集しましょう。
※こちらのファイルの設定がS3Bucketの第一階層になりますが、あとから調整できます。

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

export const storage = defineStorage({
  name: "<S3Bucket名>", // ここはS3の名前の一部になりますので任意の名前を入れましょう。
  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'])
    ]
  })
});

ここまで一旦出来ればOKです。

実装(gitの設定)

どこのgithubと紐づいているか確認しましょう。

git remote -v

 
下記のように返ってくることを確認します。

origin  https://github.com/reesscot/nextjs-storage-browser.git (fetch)
origin  https://github.com/reesscot/nextjs-storage-browser.git (push)

 
ここで最初に作成した自身のリポジトリに変更しましょう。
コマンドはこちらです。

git remote set-url origin <最初に控えたリポジトリのURL>

 
再度どこのgithubと紐づいているか確認しましょう。

git remote -v

 
下記のように返ってくることを確認できればOKです。

origin  <最初に控えたリポジトリのURL> (fetch)
origin  <最初に控えたリポジトリのURL> (push)

 
次に認証情報を登録していきましょう。

git config --global credential.helper store
git pull

 
ここでUsernameとPasswordを聞かれますので、
Usernameは自身のgithubアカウントのID
Passwordは最初に発行して控えていたTokenIDを貼り付けましょう。

Username for 'https://github.com/MOKOMAP/StorageBrowserS3.git': <ユーザ名>
Password for 'https://MOKOMAP@github.com/MOKOMAP/StorageBrowserS3.git': <最初に控えたTokenID>

 
自身のgithubリポジトリにpushしましょう

git add .
git commit -m "StorageBrowserS3-test"
git push --force origin main #強制上書きでOKです。

ここまで出来たらCUIでの作業は完了です。

実装(Amplifyへのデプロイ)

AWS マネジメントコンソールからAmplifyのコンソールに移りましょう。

 
<新しいアプリを作成>から設定していきましょう。

 
最初に作成したリポジトリが選べるようになっていればOKです。

 
ここは何も変えず次へ

 
保存してデプロイしましょう。

 
デプロイ済みになればOKです。

ここまで出来たら完了です!!!

実機確認

<デプロイされたURLにアクセス>を押下しましょう。
 
ログイン画面が出てきましたね!

Create Accountのタブからアカウントを新規作成してログインしましょう。
 
しっかりS3の設定ファイルの中身通り出来ていますね!

 
ファイルのアップロードも出来ています!

 
S3にもちゃんと反映されていますね!

 
今度はS3に直接アップロードしてみましょう。

 
アプリ側にも反映されています!完璧です!!!

 
Cognitoのユーザプールも作成されていて
先ほどWebアプリ上で作成したユーザもしっかり存在している事が確認できました!

いいですね~。

補足

今回の実装だとURLさえ知っていれば、誰でもアカウントを作成して
アクセスできてしまいますので、追加で以下対応をおすすめします。


AWS Amplifyの設定でファイアウォールを設定する。
こちらはAmplifyでAWS Web Application Firewall (WAF) の設定が出来ます。
IPアドレス等でアクセスを制限できればより安全ですね!
国制限するだけでも国外からのDDos等も防ぐことが出来ますね!


今回ご案内したGit内のアプリのコードを調整して、
新規アカウントをWebアプリから作成できないようにすることで
Cognitoのコンソールからのみしかユーザ作成が出来なくなるので
こちらの方法も安全になりそうです!

あとがき

いかがでしたでしょうか。
こちらのWebアプリがあればAWSのマネジメントコンソールにアクセス等も不要で
ファイルの共有が簡単にできるようになります。
コードの改修は必要ですが、UIも自由に変更が出来ますので
フロントの知識があれば、カスタマイズをして、チームが使いやすいようなレイアウトにも出来ると思います。
また料金もS3とAmplifyのみを使っているだけなので、使い方によっては
GoogledriveやOneDriveを使うより、かなりお得になりそうですね~。

AWSって面白いですね。
今回の記事で一人でも多くの方がAWSを好きになってもらえると嬉しいです。

この記事は下記ドキュメントを参考にしています。

https://github.com/aws-amplify/amplify-ui/issues/5731

Discussion