Storage Browser for Amazon S3を触ってみた ＋ α

2024/12/27 JAWS-UG名古屋12月会AWS re:Invent2024 Recap&忘年会
https://jawsug-nagoya.connpass.com/event/336978/

Transcript

1. Storage Browser for Amazon S3を 触ってみた KMiura(@k_miura_io)
2. 自己紹介 • 三浦 耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋＆神戸 運営 • 好きなAWSのサービス：AWS IoT, Lambda, ECS @k_miura_io koki.miura05
3. Storage Browser for Amazon S3ってなに？ • アプリケーションからS3バケットにアクセス してCRUDをできるUIコンポーネント • Amplify UI のReactコンポーネントとして提 供しており、React、Next.jｓに対応している
4. バックエンドの定義 • Amplifyの認可モデルに従って必要 なアクセスルールをバケットに定義 する • ここで定義したモデルに従ってバ ケット内のディレクトリが作成される • entity_idはCognitoユーザープール のIDに置き換わる https://docs.amplify.aws/react/build-a-backend/storage/authorization/
5. UIのコンポーネント • Amplify Authとの統合をカプセル 化してページに追加できるコン ポーネントを用意する • Amplifyのバックエンド定義 （amplify_outputs.json）を読み込ま せる必要がある
6. あっという間にできた
7. DEMO
8. ここがいまいち… • 50個近くのファイルを一気にアップロード、閲 覧しようとすると、UIの上部が見切れるｗ • 多分UIのサイズ、ページネーションを調整すれ ばスクロールできるはずだと思うけど、ここも デフォルトで対応できるといいけどな…
9. まとめ • 自前で実装すること無く簡単にS3にアクセスするためのコンポーネントが使えるよ うになった • Amplifyの権限周りを調整することでファイル、ディレクトリのアクセス権も調整でき て便利 • Wernerのキーノートの内容を実現したアプローチの一つのメソッドかも
10. ソースコード https://github.com/Miura55/amplify-storage-browser-demo
11. END
12. Storage Browser for Amazon S3を 触ってみた + α KMiura(@k_miura_io)
13. 那須塩原に 行ってきま した
14. ことの発端
15. 別荘へ
16. 昼は真面目 に仕事
17. 夜は飲んで 食って人狼
18. re:Inventの ウォッチパーティ
19. 帰り道
20. 3大事件 • ICカード精算できない問題 • 最終夜寝落ち • 後で気づく忘れ物ラッシュ
21. ICカード精算できない問題 • 最寄りの上三依塩原温泉口駅は無人駅でかつ改札機 すらないのでICカードが精算できなかった • 車掌さんに相談したら関東圏内の鉄道会社に言えば 対応可能といってたが実際は東武鉄道の駅で対応す るのが早いということが発覚（帰りは新横浜から新幹線 で直帰） • 2週間後、名駅で精算できるように手配してもらい無事 精算
22. 最終夜寝落ち • 連日8時起き、翌深夜2時就寝を続けていたら最後の夜は流石に眠すぎてキー ノート前に仮眠 • 人狼じゃなくてマーダーミステリーやってたようでやりたかった… • キーノートはちゃんと見た
23. 後で気づく忘れ物ラッシュ • 各々撤収作業中に先に帰ったメンバーから次々に忘れ物の連絡が来る • 無事に処遇も決まり別荘の忘れ物ゼロ • 僕が缶ビールの忘れ物をするｗ
24. 来年re:Invent行くか迷う…
25. お土産買って きました！
26. 宣伝 https://jawsdays2025.jaws-ug.jp/
27. END