1Amplify + React Nativeで挑む!新規事業アプリの開発2023.03.17 Amplify Boost Up #02Copyright © MEC Co., Ltd. All Rights reserved.
View Slide
2Copyright © MEC Co., Ltd. All Rights reserved.自己紹介足立 優司 (@adt0705 )所属 メック株式会社オトとりっぷの技術責任者よく使う AWS, React / React Native技術, 言語 Python, TypeScriptAmplify歴 3年ぐらい
アジェンダCopyright © MEC Co., Ltd. All Rights reserved.直面した課題と解決策( LSI問題 )Amplifyを用いた新規事業アプリ今後の展望
5Copyright © MEC Co., Ltd. All Rights reserved.留守番インターフェースアプリ♫♩♪♬♩
6Copyright © MEC Co., Ltd. All Rights reserved.システム概略図inputoutputinputoutputAWSinterface interface
7Copyright © MEC Co., Ltd. All Rights reserved.アーキテクチャinputoutputinputoutput
8Copyright © MEC Co., Ltd. All Rights reserved.使用しているAmplify Library• 認証(Cognito)• GraphQL API(AppSync)• データベース(DynamoDB)• ストレージ(S3)フロントからアクセスする場所に使用お気に入りは、Amplify API
アジェンダCopyright © MEC Co., Ltd. All Rights reserved.直面した課題と解決策( LSI問題 )LSI:Local Secondary IndexAmplifyを用いた新規事業アプリ今後の展望
10Copyright © MEC Co., Ltd. All Rights reserved.背景:画像情報を保存するためのDB作成Get Image Info Put Image Info画像情報に関するDynamoDB Tableを作成するケース
11Copyright © MEC Co., Ltd. All Rights reserved.背景:画像情報を保存するためのDB作成Get Image Info Put Image Infoschema.graphqlの中身は、こんな感じフロントエンドにも型が生成されて安全に開発!
12Copyright © MEC Co., Ltd. All Rights reserved.問題:LSI追加できないPut Image Infoあとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」と、いうことでスキーマを変更Get Image InfoList Image InfoBy Tag
13Copyright © MEC Co., Ltd. All Rights reserved.問題:LSI追加できないPut Image Infoあとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」と、いうことでスキーマを変更Get Image InfoList Image InfoBy Tag
14Copyright © MEC Co., Ltd. All Rights reserved.問題:LSI追加できないPut Image Infoあとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」と、いうことでスキーマを変更→ が、この変更はできない!(LSI追加扱いになるため)Get Image InfoList Image InfoBy Hashtag
15考えられる解決策Copyright © MEC Co., Ltd. All Rights reserved.• クエリパラメータにFilterを渡す• 「@searchable」で検索可能にする• そもそもDynamoDBをGSI オーバーロードで設計しておく• フィルタリングするLambdaを作成する
16考えられる解決策Copyright © MEC Co., Ltd. All Rights reserved.• クエリパラメータにFilterを渡す→ nextToken処理をフロントエンドで処理するの大変• 「@searchable」で検索可能にする→ 冗長• そもそもDynamoDBをGSI オーバーロードで設計しておく→ フロントエンドへの型が。。。• フィルタリングするLambdaを作成する→ やりがちでもFilterに頼ってる & Amplifyぽくない
17考えられる解決策Copyright © MEC Co., Ltd. All Rights reserved.• クエリパラメータにFilterを渡す→ next処理をフロントエンドで処理するの大変• 「@searchable」で検索可能にする→ 冗長• そもそもDynamoDBをGSI オーバーロードで設計しておく→ フロントエンドへの型が。。。• フィルタリングするLambdaを作成する→ やりがちでもFilterに頼ってる & Amplifyぽくない• もう一つDBつくればいいんじゃない?
18Copyright © MEC Co., Ltd. All Rights reserved.結論:別Tableを作成FavoritePicture Tableを追加して、DynamoDB Stream - Lambdaで変更内容を監視、別Tableに記載(別の解決方法思案中。。。)Put Image InfoGet Image InfoList Image InfoBy Tag
20Copyright © MEC Co., Ltd. All Rights reserved.展望:今後やりたいこと• DynamoDB Table乱立対策• スパイク対策• レイテンシ対策• 分散システムのデプロイ方法これらを解決していきたいwith Amplify
21オトとりっぷに協力してくれる人を募集しています!OTO TRIP AmbassadorCopyright © MEC Co., Ltd. All Rights reserved.ご興味ある方は、お声がけお願いします!!オトとりっぷ公式Twitterもしよかったら、個人の方もお願いします
ありがとうございました!