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

Slide 1

Slide 1 text

Storage Browser for Amazon S3を触ってみた KMiura(@k_miura_io)

Slide 2

Slide 2 text

自己紹介 • 三浦耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋＆神戸運営 • 好きなAWSのサービス：AWS IoT, Lambda, ECS @k_miura_io koki.miura05

Slide 3

Slide 3 text

Storage Browser for Amazon S3ってなに？ • アプリケーションからS3バケットにアクセスしてCRUDをできるUIコンポーネント • Amplify UI のReactコンポーネントとして提供しており、React、Next.jｓに対応している

Slide 4

Slide 4 text

バックエンドの定義 • Amplifyの認可モデルに従って必要なアクセスルールをバケットに定義する • ここで定義したモデルに従ってバケット内のディレクトリが作成される • entity_idはCognitoユーザープールのIDに置き換わる https://docs.amplify.aws/react/build-a-backend/storage/authorization/

Slide 5

Slide 5 text

UIのコンポーネント • Amplify Authとの統合をカプセル化してページに追加できるコンポーネントを用意する • Amplifyのバックエンド定義（amplify_outputs.json）を読み込ませる必要がある

Slide 6

Slide 6 text

あっという間にできた

Slide 7

Slide 7 text

DEMO

Slide 8

Slide 8 text

ここがいまいち… • 50個近くのファイルを一気にアップロード、閲覧しようとすると、UIの上部が見切れるｗ • 多分UIのサイズ、ページネーションを調整すればスクロールできるはずだと思うけど、ここもデフォルトで対応できるといいけどな…

Slide 9

Slide 9 text

まとめ • 自前で実装すること無く簡単にS3にアクセスするためのコンポーネントが使えるようになった • Amplifyの権限周りを調整することでファイル、ディレクトリのアクセス権も調整できて便利 • Wernerのキーノートの内容を実現したアプローチの一つのメソッドかも

Slide 10

Slide 10 text

ソースコード https://github.com/Miura55/amplify-storage-browser-demo

Slide 11

Slide 11 text

END

Slide 12

Slide 12 text

Storage Browser for Amazon S3を触ってみた + α KMiura(@k_miura_io)

Slide 13

Slide 13 text

那須塩原に行ってきました

Slide 14

Slide 14 text

ことの発端

Slide 15

Slide 15 text

別荘へ

Slide 16

Slide 16 text

昼は真面目に仕事

Slide 17

Slide 17 text

夜は飲んで食って人狼

Slide 18

Slide 18 text

re:Inventのウォッチパーティ

Slide 19

Slide 19 text

帰り道

Slide 20

Slide 20 text

3大事件 • ICカード精算できない問題 • 最終夜寝落ち • 後で気づく忘れ物ラッシュ

Slide 21

Slide 21 text

ICカード精算できない問題 • 最寄りの上三依塩原温泉口駅は無人駅でかつ改札機すらないのでICカードが精算できなかった • 車掌さんに相談したら関東圏内の鉄道会社に言えば対応可能といってたが実際は東武鉄道の駅で対応するのが早いということが発覚（帰りは新横浜から新幹線で直帰） • 2週間後、名駅で精算できるように手配してもらい無事精算

Slide 22

Slide 22 text

最終夜寝落ち • 連日8時起き、翌深夜2時就寝を続けていたら最後の夜は流石に眠すぎてキーノート前に仮眠 • 人狼じゃなくてマーダーミステリーやってたようでやりたかった… • キーノートはちゃんと見た

Slide 23

Slide 23 text

後で気づく忘れ物ラッシュ • 各々撤収作業中に先に帰ったメンバーから次々に忘れ物の連絡が来る • 無事に処遇も決まり別荘の忘れ物ゼロ • 僕が缶ビールの忘れ物をするｗ