HIGOBASHI.AWS 第5回「AngularとAWS AppSyncで作るサーバーレスアプリケーション」

HIGOBASHI.AWSで発表したスライドです。

Transcript

1. 2018/7/27 西村祐二 AngularとAWS AppSyncで作る サーバーレスアプリケーション
2. ♣自己紹介
    • 西村祐二(27) • サーバーレス開発部所属 • 元情シス、インフラエンジニア • 入社1年2ヶ月 • AWS歴1年2ヶ月 • 東京から大阪にUターン転職 • 前職はISPの会社で顧客システムの運用・保守
3. 
    Angular 使ったことある人✋
4. 
    GraphQL 使ったことある人✋
5. 
    AWS AppSync 使ったことある人✋
6. 簡単なAWS AppSyncの説明
    ✦GraphQLのマネージドサービス ✦GraphQLを通してAWSサービスを使える ✦複数人リアルタイム、オフライン対応アプリ作れる ✦コンフリクトもクラウドで解消できる ✦エンタープライズレベルのセキュリティ機能
7. 簡単なAWS AppSyncの説明
    ✦GraphQLのマネージドサービス ✦GraphQLを通してAWSサービスを使える ✦複数人リアルタイム、オフライン対応アプリ作れる ✦コンフリクトもクラウドで解消できる ✦エンタープライズレベルのセキュリティ機能
8. 
    デモアプリ作ってきました！
9. 作ったデモアプリ
    ✦リアルタイムいいね！アプリ ‣をタップすると「いいね！」が増えます ‣他の人がタップした値も反映されます
10. 
     みんなも触ってみてね http://ux.nu/Y4Fic ✦数字が更新されないときはリロードしてね ✦発表で「いいね！」と思ったら都度タップしてね σϞΞϓϦ͸ൃද࣌ͷΈެ։ͱͳΓ·͢ɻ
    "OHVMBSͷιʔε͸(JUIVCʹެ։͍ͯ͠ΔͷͰ
    ͦͪΒΛ֬͝ೝ͍ͩ͘͞ɻ
    IUUQTHJUIVCDPNOJTIJNVSBZVKJ%FNP"QQ4ZOD"OHVMBS"QQ
11. ‣シンプルな構成で実現 ‣API Gatewayの代わりにAppSync ‣クライアントはGraphQLでリクエスト 構成図
     S3 Amazon
 DynamoDB Amazon CloudFront AWS AppSync query subscription mutation
12. ‣シンプルな構成で実現 ‣API Gatewayの代わりにAppSync ‣クライアントはGraphQLでリクエスト 構成図
     S3 Amazon
 DynamoDB Amazon CloudFront AWS AppSync query subscription mutation
13. 
    
14. GraphQLの概要
     ‣API用のクエリ言語 ‣クライアントがサーバからデータを •Query（取得） •Mutation（追加、変更） •Subscription（購読） できるようになる ‣クライアント側がレスポンス形式指定 •必要データだけ取得（メモリ、帯域節約）
15. APIの形式
     /blogs /commentsOnBlog /blogByAuthor /blogInfo 従来：サーバ主体 GraphQL：クライアント主体 やりたいこと ほしい情報をリクエスト
16. リクエスト例
     query { getBlog( id:”1” ){ title category } } サーバ側 クライアント レスポンス type Query { getBlog(id:ID):[blog] } type blog { id: ID! author: String title: String category: String createdAt: Int! } } スキーマ、型定義 { “title”: “hoge”, “category”: “AWS” } 必要な情報だけ リクエスト リクエストした データのみ返却
17. ‣ほぼリアルタイムでのデータ購読 ‣Mutationをトリガーに通知 Subscription
     mutation { addBlog( title:”test” author:”hoge” category:”AWS” ){ title author category } } AWS AppSync push
18. 実際の実装をみていこう
     AWS AppSync
19. 作業内容
     ✦AppSyncでやること ‣データソースの設定 ‣スキーマ設定 ‣リゾルバ設定
20. データソースの設定
     ✦設定できるデータソース（現在時点） ‣DynamoDB、ES、Lambda、HTTP endpoint Amazon ES AWS Lambda Amazon
 DynamoDB Amazon API Gateway
21. スキーマ設定
     ‣サーバの機能を記述し、リクエストが有効か どうかを判断するために使用 ‣SDL（Schema Definition Language）で記述 •json形式 type Query { getBlog(id:ID):[blog] } type blog { id: ID! author: String title: String category: String createdAt: Int! } }
22. スキーマの型定義
     ✦型定義の書き方 ‣スカラー型、オブジェクト型、列挙型など利用可能 ‣Not Null制約は感嘆符「！」で表現 •ID! ‣リストは角括弧で表現 •[String] type Todo { id:ID! name: String status: TodoStatus } enum TodoStatus { done pending } type Query { getTodos:[Todo] }
23. Subscriptionのスキーマ設定
     ‣購読したいmutationを@aws_subscribe()で 囲むだけ type Subscription { addedPost:Post @aws_subscribe(mutations:[addPost]) } type Mutation { addPost(id:ID!): Post }
24. リゾルバ設定
     ‣データソースとの接続可能にする設定 •GraphQLリクエストをデータソースの命令 に変換 •リゾルバマッピングテンプレートを記載 •Apache Velocoty Template Lang(VTL) •2種類のテンプレートを設定 リクエストテンプレート レスポンステンプレート
25. 例
     ‣デモアプリのリゾルバ（リクエスト） ‣mutationがきたら、DynamoDBで UpdateItemするようにリゾルバ設定してい るだけ { "version" : "2017-02-28", "operation" : "UpdateItem", "key" : { "id" : { "S" : "${context.arguments.id}" } }, "update" : { "expression" : "ADD #votefield :plusOne", "expressionNames" : { "#votefield" : "vote" }, "expressionValues" : { ":plusOne" : { "N" : 1 } } } }
26. 動作確認
     ✦マネージメントコンソールからテスト ‣subscriptionのテストもできる
27. クライアント側の実装
    
28. Angular
     ✦Angularの概要 ‣フルスタックフレームワーク ‣TypeScript標準 ‣RxJS標準 フルスタックだけど GraphQLのクライアントライブラリは デフォルトではない
29. GraphQLクライアントライブラリ
    
30. AWS Amplify
     ✦GraphQLのクライアントとして使用 ‣他にいろんな機能盛りだくさん •Analytics系 •API系 •Authentication系 •chatbot系 •PubSub、PushNotifications系 •strage系 •など
31. どう使うのか
     ‣基本の流れは同じ •environmentにAppSyncの情報 •Serviceでリクエストのロジック記載 •Componentでロジックを利用し、レスポン スを画面に表示
32. Service
     ‣AWS AmplifyのGraphQLリクエストの基本形 ‣API.graphql(graphqlOperation(リクエスト)) ‣基本これでGraphQLリクエストできる ‣リクエストもそのまま渡せばOK
33. Service
     ‣従来のAPIリクエストより簡単にかける
34. ちょっとした罠
     ‣subscriptionときだけObservableでかえっ てくる ‣Angularで扱いやすいけどイレギュラー https://aws-amplify.github.io/amplify-js/api/classes/apiclass.html#graphql
35. AWS Amplifyの中身を調査
     ‣どうやってsubscriptionを実現してるのか •ソースをみると •paho-mqtt、zen-observable •RxJSじゃなくzen-observableなので、pipe メソッドなど使えないので注意 https://github.com/aws-amplify/amplify-js/blob/400b1cb2f393d33efe5aa824f730b3155a2f9822/packages/ pubsub/src/Providers/AWSAppSyncProvider.ts
36. 
     AppSyncを使ってアプリ 作ってみた所感
37. 
     予想以上に簡単に実装できた
38. 
     簡単なCRUD操作は API Gateway → AppSync に置き換えて良さそう
39. 
     本番投入時に 気になること 使えそうなこと
40. 
     AWS AppSyncの制限
41. AWS AppSyncの制限(2018/7/27時点)
     リソース デフォルト制限 リージョンあたりのAPIの最大数 アカウントあたり25 APIキーの最大数 APIあたり50 スキーマドキュメントの最大サイズ 1MB GraphQLクエリの最大実行時間 10秒（APG29秒） req/resのマッピングテンプレートの 最大サイズ 64KB サブスクリプションの 最大ペイロードサイズ 128KB マッピングテンプレートにおける foreach…endループの最大数 1,000
42. 
     デプロイ
43. 
     AWS
 CloudFormation
44. 
     ‣AWS CloudFormationテンプレートをサポート •スキーマ •データソース •リゾルバ 定義することができる
45. 
     ϦιʔελΠϓ આ໌ "84"QQ4ZOD(SBQI2-"QJ σʔλιʔεͷ؍఺Ͱɺ"QQ4ZOD
    "1*
    Λఆٛ "84"QQ4ZOD"QJ,FZ
    σʔλιʔεʹΞΫηε͢ΔͨΊʹඞཁͳ ΞΫηεΩʔΛఆٛ "84"QQ4ZOD(SBQI2-4DIFNB (SBQI2-
    εΩʔϚΛఆٛ "84"QQ4ZOD%BUB4PVSDF σʔλιʔεΛఆٛ "84"QQ4ZOD3FTPMWFS εΩʔϚͱσʔλιʔεΛࢀর͢Δ͜ͱʹ ΑΓϦκϧόΛఆٛ
46. 
     ‣テンプレートの中にスキーマが混在するので メンテナンス時のことを考慮する必要あり AppSyncSchema: Type: "AWS::AppSync::GraphQLSchema" DependsOn: - AppSyncGraphQLApi Properties: ApiId: !GetAtt AppSyncGraphQLApi.ApiId Definition: | schema { query: Query mutation: Mutation } type Query { singlePost(id: ID!): Post allPosts: [Post] } type Mutation { putPost(id: ID!, title: String!): Post }
47. 
     ログ・監視
48. 
     Amazon CloudWatch
49. ログの設定
     ‣マネージメントコンソールから簡単に設定で きる ‣ログレベルの設定も可能 •ALL、Error、Noneの3段階
50. ログの設定
     ‣Cloudformationでも有効にできるので設定 にしておく ‣ログレベルも設定可能 Type: "AWS::AppSync::GraphQLApi" Properties: UserPoolConfig: UserPoolConfig OpenIDConnectConfig : OpenIDConnectConfig Name: String AuthenticationType: String LogConfig: LogConfig CloudWatchLogsRoleArn: String FieldLogLevel: String
51. メトリック
     ✦サポート内容 ‣HTTPステータスコード •４XX：無効なリクエスト関係 •５XX：GraphQLクエリの実行中のエラー ‣レイテンシー •クライアントから要求を受信してからクライ アントに応答を返すまでの時間
52. 
     認証
53. 認証
     ✦設定できる認証 ‣API_KEY ‣AWS_IAM ‣COGNITO_USER_POOL
54. API_KEY
     ‣認証設定せずにGraphQLを作成すると自動 的に設定される
55. AWS＿IAM
     ‣Cognito Federated Identitiesの一時トーク ンを使用してアクセス。 ‣IAM Policyを使って認可 https://www.slideshare.net/AmazonWebServicesJapan/20180523-aws-black-belt-online-seminar-aws-appsync
56. COGUNITO_USER_POOL
     ‣ユーザグループで制御可能 ‣@aws_auth(cognito_group:[グループ名]) https://www.slideshare.net/AmazonWebServicesJapan/20180523-aws-black-belt-online-seminar-aws-appsync
57. 
     APIドキュメントの管理
58. APIドキュメント
     ‣SchemaファイルからAPIドキュメント生成 できるソフトウェアがいくつかある ‣graphdocが良さそう https://github.com/2fd/graphdoc
59. 
     AppSyncで大変だったこと
60. 大変だったこと
     ‣AppSyncのリゾルバ設定 •リゾルバマッピングテンプレートをドキュメ ント参照しながら書く •でも、API Gatewayよりわかりやすい印象 ‣正直それぐらいです ‣デモアプリ1時間ぐらいで作れました
61. 
     さいごに
62. 
     AWS AppSync 新しいサービスどんどん使っていきましょう！
63. We Are Hiring !!!
     Ϋϥεϝιουͷձࣾઆ໌ձ΍Γ·͢ʂ 2018.8.22(ਫ)