Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
AmplifyによるGraphQL API開発 / GraphQL Development Using Amplify @Serverless Meetup#19
Jaga
March 31, 2021
Technology
0
720
AmplifyによるGraphQL API開発 / GraphQL Development Using Amplify @Serverless Meetup#19
Jaga
March 31, 2021
Tweet
Share
More Decks by Jaga
See All by Jaga
AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief
jaguar_imo
1
890
Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS
jaguar_imo
5
760
Amplify Updates at Amplify Meetup #02
jaguar_imo
0
2.9k
Amplify CLI Deep Dive - AWSDevDay 2020
jaguar_imo
1
860
AWS Amplify 実践編 #AWSDevDay / Practical AWS Amplify at AWS Dev Day 2020
jaguar_imo
5
2.9k
Startup.fm #09 - Amazon Pinpoint編 エンジニアにこそ学んでほしいデジタルユザーエンゲージメント! / Startup fm - Amazon Pinpoint
jaguar_imo
1
950
Other Decks in Technology
See All in Technology
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
190
OpenShiftでスポットVMを使おう.pdf
jpishikawa
1
210
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
220
目指せCoverage100%! AutoScale環境におけるSavings Plans購入戦略 / JAWS-UG_SRE_Coverage
taishin
0
420
CES_2023_FleetWise_demo.pdf
sparkgene
0
100
インフラ技術基礎勉強会 開催概要
toru_kubota
0
140
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
13k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
0
130
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
110
lt53
98_justdoit
0
110
- Rでオブジェクト指向プログラミング- クラス設計入門の入門
kotatyamtema
1
710
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
150
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Code Review Best Practice
trishagee
50
11k
A better future with KSS
kneath
230
16k
We Have a Design System, Now What?
morganepeng
37
5.9k
A designer walks into a library…
pauljervisheath
198
16k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Why Our Code Smells
bkeepers
PRO
326
55k
Documentation Writing (for coders)
carmenintech
51
2.9k
BBQ
matthewcrist
75
8.1k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Transcript
© 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<type名> という名前の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 <function-name> 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)
[email protected]