1.
Amplifyで自社サービスを開発してみた
NkawaK

2.
西川健太(@NkawaK)
所属: 株式会社ギークフィード
担当: ReactやAWSの開発など
趣味: アニメ鑑賞、ゲームなどなど
自己紹介

3.
今回開発した自社サービス

4.
Amplifyを採用してよかったところ
・バックエンド部分をいい感じに自動生成してくれる
・GitHubと連携することで簡単に CI/CDが実現できる
・スケールが容易

5.
Amplifyを採用してよかったところ
・バックエンド部分をいい感じに自動生成してくれる
・GitHubと連携することで簡単に CI/CDが実現できる
・スケールが容易

6.
各種コマンドでバックエンドを作成
amplify init : Amplifyの環境構築
amplify add auth: Cognitoを使った認証の追加
amplify add api: GraphQLとAppSyncを使用したAPIの作成 or API GatewayとLambdaの追加

7.
Amplify init
プロジェクトのディレクトリで
Amplify initを実行するだけ
これだけで環境が作られます

8.
Amplify add auth
amplify add authを実行するだけで
Cognitoのユーザープールが作られ
ます
Social Sign In やSAML、MFAにも対
応してます

9.
Amplify add api
amplify add apiでGraphQLを選ぶと
AppSyncのAPIが作られます

10.
Amplify add api
amplify add apiの後にamplify pushで
GraphQLのクエリとDynamoDBのテーブ
ルを作成

11.
Amplify add api
WebScoketを使ったリアルタイムデータの取得も簡単 !

12.
Amplify add api
amplify add apiでRESTを選ぶとLambdaが
作成されます
↑の後にamplify pushでAPI Gatewayが作
成されます

13.
各種コマンドでバックエンドを作成
amplify init : Amplifyの環境構築
amplify add auth: Cognitoを使った認証の追加
amplify add api: GraphQLとAppSyncを使用したAPIの作成 or API GatewayとLambdaの追加
バックエンドの作成を Amplifyに任せることで大幅な工数の削減
UI/UXの開発に注力することができた

14.
Amplifyを採用してよかったところ
・バックエンド部分をいい感じに自動生成してくれる
・GitHubと連携することで簡単に CI/CDが実現できる
・スケールが容易

15.
Amplifyのコンソールでらくらく CI/CD
コンソールでGitHubを選んで認証すれば OK
テストも自動で作ってくれます

16.
Amplifyを採用してよかったところ
・バックエンド部分をいい感じに自動生成してくれる
・GitHubと連携することで簡単に CI/CDが実現できる
・スケールが容易

17.
Amplifyで主に使用するAWSサービス
AppSync、Lambda、API Gateway、DynamoDBなど
これらはスケーラブルサービスなので将来的なスケールアップが容易
AppSync、API Gateway → キャッシュの有効化
Lambda → メモリを増やす
DynamoDB → Auto Scalingを設定、レプリカの追加

18.
Amplifyのつらみ
・ある程度のAWSサービスへの理解が必要になる
・Amplify UIがReact V18に現在対応していない

19.
Amplifyのつらみ
・ある程度のAWSサービスへの理解が必要になる
・Amplify UIがReact V18に現在対応していない

20.
いずれ来るAmplifyのチュートリアルを越える時 ...
Amplifyアプリと他のAWSサービスを連携したい!
🤔

21.
筆者の場合
・Amazon ConnectのAPIの同時実行数を制限したい
・Amazon Connectの通話履歴データを画面上で再生したい
・CognitoのユーザーにAmazon Connectのユーザー情報を持たせたい
・Amplify pushでエラーが起こった時の調査

22.
筆者の場合
・Amazon ConnectのAPIの同時実行数を制限したい
・Amazon Connectの通話履歴データを画面上で再生したい
・CognitoのユーザーにAmazon Connectのユーザー情報を持たせたい
・Amplify pushでエラーが起こった時の調査
Lambda → SQS → Lambda → DynamoDBの構成で同時実行数を制限

23.
筆者の場合
・Amazon ConnectのAPIの同時実行数を制限したい
・Amazon Connectの通話履歴データを画面上で再生したい
・CognitoのユーザーにAmazon Connectのユーザー情報を持たせたい
・Amplify pushでエラーが起こった時の調査
API Gateway → Lambda → S3の構成で通話音声を取得

24.
筆者の場合
・Amazon ConnectのAPIの同時実行数を制限したい
・Amazon Connectの通話履歴データを画面上で再生したい
・CognitoのユーザーにAmazon Connectのユーザー情報を持たせたい
・Amplify pushでエラーが起こった時の調査
Amazon Connectにログインして、APIからユーザー情報を取得
Cognitoにサインアップする際に Amazon ConnectのユーザーIDを入力

25.
筆者の場合
・Amazon ConnectのAPIの同時実行数を制限したい
・Amazon Connectの通話履歴データを画面上で再生したい
・CognitoのユーザーにAmazon Connectのユーザー情報を持たせたい
・Amplify pushでエラーが起こった時の調査
エラーが起こっている AWSリソースを特定したり、エラーの修正に AWSサービ
スの理解が必要だった

26.
Amplifyのつらみ
・ある程度のAWSサービスへの理解が必要になる
・Amplify UIがReact V18に現在対応していない

27.
Amplify UI

28.
Amplify UI
React V18にインストールしようとしたらエラーに、 V16.8 ~ V17にしか対応してないっぽい ?🤔

29.
まとめ
・Amplifyならバックエンドを自動で作ってくれて工数を短縮できる
・CI/CDを簡単に実現できて、開発効率が上がる
・使用するAWSサービスがスケーラブル
・Amplifyで凝ったことをやると、なんやかんやで AWSへの理解が必要になる

30.
社員募集してます
とりあえず話を聞きたいって方は筆者 (@NkawaK)にDM送ってもらってもOKで
す󰢏