© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify による GraphQL API 開発 2021/3/31 @Serverless Meetup #19 Jaga (Daisuke Nagayama) @jagaimogmog Amazon Web Services Japan - Startup Solutions Architect

© 2021, Amazon Web Services, Inc. or its Affiliates. Jaga (Daisuke Nagayama) @jagaimogmog Startup Solutions Architect Amazon Web Service Japan K.K. > Health Care Startupでエンジニア・事業開発 > AWSでStartupの技術⽀援・Mobile Specialist Amazon Chime SDK AWS Amplify Amazon Pinpoint

© 2021, Amazon Web Services, Inc. or its Affiliates. Goal • GraphQL API 開発を例に、Amplify を使って爆速開発︕するイメージをお伝 えすること • Amplify CLIの得意なことを知っていただくこと Agenda • Amplify CLI で GraphQL API を⾼速セットアップ︕ • Amplify CLI でローカル開発︕ • Amplify CLI でチーム開発︕

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify のおさらい

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify Amplify ライブラリ Web・モバイルアプリとAWSを統合するためのOSSライブラリ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するためのOSSツールチェーン Amplify Console フルスタックサーバーレスWebアプリをビルド、テスト、 デプロイ、ホスティングするためのAWSサービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUIツール AWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォーム New!

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI と GraphQL API

© 2021, Amazon Web Services, Inc. or its Affiliates. API開発と付加価値を⽣まない重労働(Undifferentiated Heavy Lifting) API データベース管理 認証 & 認可 ユーザー管理 全⽂検索

© 2021, Amazon Web Services, Inc. or its Affiliates. API (GraphQL) • API カテゴリ (GraphQL) は AWS AppSync と統合された API を構築 • GraphQL サーバーでは通常、schema と resolver (VTLファイル) を編集 • API (GraphQL) カテゴリを使うことでシンプルに設定が可能 Amazon DynamoDB Query 外部API API Gateway etc … AWS Lambda schema resolvers Amazon Elasticsearch Service AWS AppSync Amazon Cognito 認証

© 2021, Amazon Web Services, Inc. or its Affiliates. 便利な Directive を活⽤する @model のように、Amplify CLI ⽤ schema.grahqlにディレクティブを付 与することで様々な機能を GraphQL APIに付与することが可能 本セクションでは以下5つを深掘り • @model • @auth • @key • @searchable • @function

© 2021, Amazon Web Services, Inc. or its Affiliates. Directive #1 @model 1. Postテーブルの作成 Query 外部API API Gateway etc … AWS Lambda Amazon Elasticsearch Service Amazon DynamoDB 2. CRUD⽤のschema, resolverの作成 schema resolvers AWS AppSync https://docs.amplify.aws/cli/graphql-transformer/directives#model

© 2021, Amazon Web Services, Inc. or its Affiliates. Directive #1 @model 1. Postテーブルの作成 Query 外部API API Gateway etc … AWS Lambda Amazon Elasticsearch Service Amazon DynamoDB 2. CRUD⽤のschema, resolverの作成 resolvers AWS AppSync https://docs.amplify.aws/cli/graphql-transformer/directives#model Amplify CLIが利用するシンプルなスキーマファイル AppSync が利用するスキーマファイル schema

© 2021, Amazon Web Services, Inc. or its Affiliates. おまけ: @model が⽣成する schema.graphql https://docs.amplify.aws/cli/graphql-transformer/directives#model

© 2021, Amazon Web Services, Inc. or its Affiliates. おまけ: @modelが⽣成するresolvers https://docs.amplify.aws/cli/graphql-transformer/directives#model

© 2021, Amazon Web Services, Inc. or its Affiliates. Directive #2 @key 1. PK/SKの指定・GSIの作成 2. Query/Resolverの作成 Query 外部API API Gateway etc … AWS Lambda Amazon Elasticsearch Service Amazon DynamoDB schema resolvers AWS AppSync https://docs.amplify.aws/cli/graphql-transformer/directives#key

© 2021, Amazon Web Services, Inc. or its Affiliates. queryFieldを指定しない@keyではlistPostsなど @model で追加したCRUDに使える引数を指定す ることが可能 • Partition Key: organizationId • Sort Key: createdAt queryFieldを指定した@keyは、listPostsとは別 のフィールドを⽤いたQueryを追加することが可 能 • Partition Key: owner • Sort Key: createdAt • インデックスの名前: listByOwner • queryの名前: listPostsByOwner https://docs.amplify.aws/cli/graphql-transformer/directives#key Directive #2 @key

© 2021, Amazon Web Services, Inc. or its Affiliates. schema Amazon DynamoDB Directive #3 @auth 認可ロジックを Resolver に追加 Query 外部API API Gateway etc … AWS Lambda Amazon Elasticsearch Service resolvers AWS AppSync https://docs.amplify.aws/cli/graphql-transformer/directives#auth

© 2021, Amazon Web Services, Inc. or its Affiliates. • allow: owner groups private public • provider: apiKey iam oidc userPools • operations: create update delete read • Field Level Authorization Amazon Cognito User Poolやサードパー ティのOIDCプロバイダによって認証された ユーザーに対し、ユーザーの認証メタデータ を使⽤してGraphQL APIのアクションに対 する認可ルールを設定 Directive #3 @auth https://docs.amplify.aws/cli/graphql-transformer/directives#auth

© 2021, Amazon Web Services, Inc. or its Affiliates. Directive #4 @searchable 2. Elasticsearchにデータを流すDynamoDB Streams + Lambdaをセットアップ 1. Amazon Elasticsearch Serviceの追加 Query 外部API API Gateway etc … AWS Lambda Amazon DynamoDB schema resolvers AWS AppSync AWS Lambda Amazon Elasticsearch Service 3. Elasticsearch ⽤ schema, resolver の追加 https://docs.amplify.aws/cli/graphql-transformer/directives#searchable

© 2021, Amazon Web Services, Inc. or its Affiliates. @searchableをつけるとElasticsearchの構⽂を利 ⽤した全⽂検索が可能に Search という名前のQueryで呼び出し 可能 裏ではAmazon Elasticsearch Serviceと DynamoDB Streamsをセットアップ @searchableをつけた後のデータしか検索できな いので注意 Directive #4 @searchable https://docs.amplify.aws/cli/graphql-transformer/directives#searchable

© 2021, Amazon Web Services, Inc. or its Affiliates. 外部API API Gateway etc … Amazon DynamoDB Directive #5 @function Lambda 関数を呼び出すための schema、resolver の追加 (Lambda関数⾃体はFunctionsカテゴリで作成) Query AWS Lambda Amazon Elasticsearch Service schema resolvers AWS AppSync https://docs.amplify.aws/cli/graphql-transformer/directives#function

© 2021, Amazon Web Services, Inc. or its Affiliates. $ amplify add function で作成したLambda関 数を呼び出し 末尾に env 名をつけることに注意 複数の@functionをチェインして、処理をパイ プすることが可能 (authorizer を実⾏してから addCommentを実⾏するなど) Directive #5 @function https://docs.amplify.aws/cli/graphql-transformer/directives#function

© 2021, Amazon Web Services, Inc. or its Affiliates. Lambda関数には event 引数で呼び出し元の 認証情報や、GraphQLのオペレーションを呼 ぶ際に渡した引数が格納されている Directive #5 @function https://docs.amplify.aws/cli/graphql-transformer/directives#function

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI とローカル開発

© 2021, Amazon Web Services, Inc. or its Affiliates. APIの開発を効率化するには︖ schema.graphql $ amplify push 1. クラウドリソースの参照と差分確認 2. 設定ファイルの書き出し 3. クラウドリソースへ変更を反映 AWS CloudFormation Stacks

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI – Mock commands $ amplify mock $ amplify mock api $ amplify mock storage $ amplify mock function https://aws-amplify.github.io/docs/cli-toolchain/usage?sdk=js#mocking-and-testing

© 2021, Amazon Web Services, Inc. or its Affiliates. API Mocking (1) ①GraphQL transformationを実⾏ • schema.graphqlから以下を作成 • AppSyncに関する設定ファイル (schema, resolvers, CFn templateなど) • フロントエンドからGraphQLを呼び出す際に使うJavaScriptのコード ②Amazon DynamoDB Localの⽴ち上げ • データはamplify/mock-data/fake-****.db のSQLiteに保存 • データはvscode-sqliteなどのプラグインで確認・編集可能 $ amplify mock api すると… https://aws.amazon.com/jp/blogs/aws/new-local-mocking-and-testing-with-the-amplify-cli/

© 2021, Amazon Web Services, Inc. or its Affiliates. API Mocking (2) ③Amplify GraphiQL Explorerの⽴ち上げ • OneGraph graphiql-explorer を ベースに開発 • http://localhost:20002で⽴ち上る • Query, Mutation, Subscriptionを簡 単に実⾏可能なインタフェース • Update AuthでAPI(GraphQL)の認 証⽅法(Amazon Cognito User Pool/OIDC/API KEY/IAM)を切り替 え可能 $ amplify mock api すると… https://aws.amazon.com/jp/blogs/aws/new-local-mocking-and-testing-with-the-amplify-cli/

© 2021, Amazon Web Services, Inc. or its Affiliates. API Mocking (3) ④GraphQL Endpointの⽴ち上げ ⑤aws-exportsをMock⽤に更新 • Amplify Frameworkでは、Amplify CLIから吐き出 されるaws-exportsでクライアントの初期設定を⾏う • $ amplify mock api してる間だけ、mockが終わる とクラウドのリソースを指す $ amplify mock api すると… https://aws.amazon.com/jp/blogs/aws/new-local-mocking-and-testing-with-the-amplify-cli/

© 2021, Amazon Web Services, Inc. or its Affiliates. おまけ: GraphQL API のユニットテスト • Jest と Amplify Mocking を利⽤ したユニットテスト • Amplify Console を⽤いて継続 的な CI/CDにユニットテストを 組み込み https://qiita.com/nagym/items/58b7847d171b57f0019f

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI と チーム開発

© 2021, Amazon Web Services, Inc. or its Affiliates. プロダクトの成⻑とチーム開発 環境の分割 (prod/stg/dev) 環境の競合の防⽌ 様々なステークホルダの加⼊

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify の multi env 機能で環境を分割する $ amplify env add env を追加 (複数のアカウントにま たがることも可能) $ amplify env checkout env を切り替え $ amplify env import 他の開発者が作成した env を参照 https://aws-amplify.github.io/docs/cli-toolchain/quickstart#environments-and-teams 環境の分割 (prod/stg/dev) AWS AppSync Amazon DynamoDB Amazon Cognito dev AWS AppSync Amazon DynamoDB Amazon Cognito stg AWS AppSync Amazon DynamoDB Amazon Cognito prod 開発者

© 2021, Amazon Web Services, Inc. or its Affiliates. envとブランチの紐付け env と Amplify Consoleで接続す るブランチは1:Nの関係 Amplify Console でブランチを紐づ ける際、どの env と対応づけるか を選択可能( env の新規作成も可) https://aws-amplify.github.io/docs/cli-toolchain/quickstart#environments-and-teams 環境の分割 (prod/stg/dev)

© 2021, Amazon Web Services, Inc. or its Affiliates. ブランチベースの新しいenvのデプロイ 特定のパターンに⼀致するブランチの作成時、⾃動的に Amplify コンソールでデプロイ 「design/**」のようなパターンを定義して、 「design/」で始まる Git ブランチを⾃動的にデプロイ 接続するバックエンドの env は 新規作成 or 既存 env から選択 ⾃動作成されたアプリにベーシック認証 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/multi-environments.html#pattern-based-branch-feature-branch-deployments 環境の分割 (prod/stg/dev)

© 2021, Amazon Web Services, Inc. or its Affiliates. 開発者固有のenvで開発環境の競合を防ぐ Amplify では開発者ごとに env を分けることを推奨 開発者は他のチームメンバーの変更により競合する ことなく、互いに独⽴して作業することが可能 フロントエンドとバックエンドの両⽅に変更が⼊る ような開発が並列に進めやすくなる https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/multi-environments.html#sandbox 環境の競合の防⽌

© 2021, Amazon Web Services, Inc. or its Affiliates. Pull Request Previews でレビューを⾼速化 https://docs.aws.amazon.com/amplify/latest/userguide/pr-previews.html Pull Request Previews を設定すると、 Pull Request が作成されるたびに⼀時的 なウェブサイトをホスト ホストした URL を Git Hub の Pull Request ページに載せる Pull Request レビューが⾮常に楽になり、 ⾮エンジニア職でもレビューに参加する ことが可能 Pull Request が閉じたら⼀時的なウェブ サイトのホストも消える 様々なステークホルダの加⼊

© 2021, Amazon Web Services, Inc. or its Affiliates. まとめ

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI で GraphQL API を⾼速にセットアップ > ディレクティブ - @model, @key, @auth, @searchable, @function Amplify CLI でローカル開発 > Amplify Mocking Amplify CLI でチーム開発 > amplify env、Amplify Consoleを⽤いた CI/CD ワークフロー まとめ

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Meetup #03 2021年 4⽉ 2⽇（⾦）18:30 〜 20:30 オンライン開催 内容 - Amplify Meetup は Amplify ユーザーによるオンライン LT 会 - Amplify を本番環境で利⽤されているユーザーに、Amplify の良さ、運⽤の コツ、⼯夫したところなどについてざっくばらんに LT していただきます - Twitter ハッシュタグや Sli.do で募集した質問をモデレーターが登壇者に質 問する形での Q&A もありますので、気軽に LT 登壇者とコミュニケーショ ンしてみてください。 お申込みURL http://bit.ly/amplifyjp3 過去の開催記事: https://aws.amazon.com/jp/blogs/news/amplify-meetup-01/ https://aws.amazon.com/jp/blogs/news/amplify-meetup-02/

© 2021, Amazon Web Services, Inc. or its Affiliates. Thank you! Jaga (Daisuke Nagayama) Twitter@jagaimogmog