2018/9/21 JAWS-UG長野でのLT
【2018 秋の部】AWS Cloud Express Roadshow in 長野 後夜祭 https://jawsug-nagano.connpass.com/event/99668/
AppSyncʹೖͰ͖ͳ͔ͬͨͷͰGraphQLʹೖͨ͠## Shintaro TANAKA (@_sin_tanaka)
View Slide
AWS AppSync
AppSync• 4݄ʹҰൠެ։• GraphQLϚωʔδυαʔϏε• HTTP(S)ϦΫΤετΛड͚ͯAWSαʔϏεʢLambda,DynamoDB, ElasticSearchʣʹͭͳ͗͜Έ͕Ͱ͖Δ• GraphQLͷεΩʔϚఆٛ• ΫΤϦΛࢼͤΔίϯιʔϧ͖• GraphQLͷSubscriptionͱ͍͏ΈΛͬͯσʔλͷมߋΛݕˠը໘ͷө·Ͱग़དྷΔ
ΊͬͪΌັྗతʂʂ
ͬͯΈΔ͔͠ͳ͍ʂʂ
Γ͔ͨͬͨ͜ͱAppSyncʹೖ͠·ͨ͠ʂʂ
Ͱ͖·ͤΜͰͨ͠!
Կނ͔• ͦͦͷݟ• AppSyncͬͯΈ͍ͨ• Vuejsॻ͚Δ͠ɺAppSync͕όοΫΤϯυͬͯ͘ΕΔͳΒదʹVueͷαϯϓϧಈ͔ͤཧղͰ͖ΔͰ͠ΐ• Vueͷαϯϓϧ͕ͳ͍• ٧Μͩ
ؾ͖͔ͮͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋ΔɾReactʑͷϑϨʔϜϫʔΫɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣɾGraphQL
ؾ͖͔ͮͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋ΔɾReactʑͷϑϨʔϜϫʔΫɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣɾGraphQLແཧήʔ
GraphQLʹ͍ͭͯௐΑ͏ʂ
1. GraphQL֓ཁ2. ఏএ͍ͯ͠ΔΈͳͲ3. REST vs GraphQLͷਤࣜຊʹਖ਼͍͠ͷ͔ʁΞδΣϯμ
ాத ৻ଠ(@_sin_tanaka)ʢגʣຊγεςϜٕݚ / GeekLab.NAGANO ελοϑGitHub / Medium: @sin_tanakaԻָͱਂϥδΦ͕͖serverless-wsgi ʹϓϧϦΫग़ͨ͠Γͨ͠PyCon JP 2018 ͰτʔΫηογϣϯ ← NEW!!
ࠓͷత
GraphQLશʹཧղͨ͠ʂʂ
GraphQLͱ• Facebook͕༷ࡦఆ͍ͯ͠ΔΫΤϦݴޠ• ҰͭͷΤϯυϙΠϯτʹରͯ͠ɺΫϥΠΞϯτଆͰඞཁͳσʔλΛࢦఆ͢Δ• RFCͰنఆ͞Εͯͳ͍ͷͰαʔϏε͝ͱʹεΩʔϚͷॻ͖ํ·ͪ·ͪ• ࣮αʔόαʔϏεʹΑΔ
GraphQLͷ͍ํ1 type Query {2 me: User3 }45 type User {6 id: ID7 name: String8 }9foo.schemeεΩʔϚ: αʔόϚωʔδυαʔϏεଆʹఆٛ͢Δ
GraphQLͷ͍ํ1 {2 me {3 name4 }5 }ΫΤϦ: ΫϥΠΞϯτଆ͔Β͛Δσʔλ1 {2 "me": {3 "name": "Luke Skywalker"4 }5 }https://hogehoge.com/graphql?{me{name}}
PROS• endpoint͕୯Ұ• ඞཁͳσʔλΛҰճͰऔಘՄೳ• ϦΫΤετճ͕ݮΔ• సૹྔ͕ݮΔ• औಘ݅ࢦఆՄೳ
CONS• RFCͰఆΊΒΕͯͳ͍• FacebookͷRFCʹґଘ• ࣮ϥΠϒϥϦґଘ• ఆٛ͞Ε͍ͯΔ͕࣮͞Ε͍ͯͳػೳ
GraphQLͷ༷ʢͰ͖Δ͜ͱʣ
Query• εΩʔϚʹఆٛ͞Ε͍ͯΔtype QueryΛΫϥΠΞϯτଆͰࢦఆ͢Δ• ΫΤϦΛ؆୯ʹߏங͢ΔΈ͋ΔʢΫΤϦมɺFragmentͳͲʣ
Query• ྫ:type Query {allUser(id: Int, first: Int): [User]getUser(role: String)me: User}type User {id: IDname: String}foo.scheme
Query• ྫ:{allUser(id: 1) {name}}
Query - Alias• ྫ: ಉ͡ΫΤϦ͕ෳ͋ΔͷμϝͳͷͰAliasΛ͏{getUser(role: admin) {idfirstNamelastNamephoneusername}getUser(role: accountant) {idfirstNamelastNamephoneusername}}
Query - Alias• ྫ: ಉ͡ΫΤϦ͕ෳ͋ΔͷμϝͳͷͰAliasΛ͏{admins: getUser(role: admin) {idfirstNamelastNamephoneusername}accountants: getUser(role: accountant) {idfirstNamelastNamephoneusername}}
Query - Fragment• ྫ: ·ͱΊ͍ͨ߹{admins: getUser(role: admin) {idfirstNamelastNamephoneusername}accountants: getUser(role: accountant) {idfirstNamelastNamephoneusername}}
Query - Fragment• ྫ: ·ͱΊ͍ͨ߹{admins: getUser(role: admin) {…user}accountants: getUser(role: accountant) {…user}}fragment user on User {idfirstNamelastNamephoneusername}
Mutation• ࡞ / มߋεΩʔϚʹఆٛ͢Δtype Mutation {createReview(episode: String, review): Review}mutation CreateReviewForEpisode($ep: Episode!,$review: ReviewInput!) {createReview(episode: $ep, review: $review) {starscommentary}}ΫΤϦ
ͦͷଞ• ଞʹ• Subscription• DirectiveͳͲ͕͋Δ
GraphQL vs REST?
GraphQL vs REST?• REST• endpoint͕ෳ• ԿΛͲ͏ฦ͔͢αʔό͕ܾΊΔ• GraphQL• endpoint͕୯Ұ• ԿΛͲ͏ฦ͔͢ΫϥΠΞϯτ͕ܾΊΔ
GraphQL vs REST?• REST→αʔόαΠυଆͷ࣮ͷ• GraphQL→ϑϩϯτΤϯυଆͷ࣮ͷ࣮తͳʹͳΔͱɾɾඨ͕ҧ͏ʂʂ
ࢥͬͨ͜ͱ
GraphQL vs RESTGraphQL͕উͬͨ߹
ࢥͬͨ͜ͱ• AppSync• GraphQLϚωʔδυαʔϏε• →εΩʔϚͷఆٛΛݩʹɺDynamoDBͱ͔LambdaɺElasticSearchͭͳ͗͜Έ͕Ͱ͖Δ• ଞʹGraphQLͷϚωʔδυαʔϏε૿͑ͭͭ͋Δ• GraphQLͰϦΫΤετͰ͖ΔCMSͱ͔αʔόʔαΠυͷ࣮͕ෆཁ→αʔόʔαΠυΤϯδχΞधཁԼ͕Γͭͭ͋Δʁ
ࠓޙษڧͯͬͨ͠΄͏͕ྑͦ͞͏• ϑϩϯτΤϯυ• FacebookͳͷͰReactͱ૬ੑ͍͍Μ͡Όͳ͍͔ͱউखʹࢥ͍ͬͯΔ• DynamoDBͳͲNoSQLͰͷσʔλઃܭ• ෳͷAWSαʔϏεͷϚωʔδυ• CloudFormationͷ͍ํɺ։ൃڥͷ্ཱͪ͛
ԶͨͪͷAppSync·ͩ͜Ε͔Βͩʂʂ