Slide 1

Slide 1 text

ࠓͦ͜͸͡ΊΑ͏ʂ ࣮ફʂαʔόϨεΞʔΩςΫνϟ @Amimoto_Ami amimoto-ami.com

Slide 2

Slide 2 text

ࣗݾ঺հ • ໊લɿງՈོ޺ • ॴଐɿAMIMOTO TEAM • Githubɿhttps://github.com/horike37 • Qiitaɿhttp://qiita.com/horike37 • ಘҙͳ͜ͱɿAWS, JavaScript, WordPress

Slide 3

Slide 3 text

࠷ۙ։ൃͨ͠ αʔόϨεͳ OSSϓϩμΫτ

Slide 4

Slide 4 text

https://github.com/horike37/simple-api-gateway Simple API Gateway • API GatewayͷઃఆΛ؆୯ʹ͢Δͱ͍ ͏ίϯηϓτ • ର࿩ίϚϯυʹΑΔઃఆͷखҾ • ϚοϐϯάςϯϓϨʔτ΍CORSͷઃ ఆΛҙࣝ͠ͳͯ͘ྑ͍

Slide 5

Slide 5 text

https://github.com/horike37/serverless-command-line-event-args • Serverless FrameworkͷϓϥάΠϯ • Serverless FrameworkʹΑΔ։ൃͷޮ ཰Խ͕Մೳʹ • Lambdaʹ౉͢Ҿ਺ΛίϚϯυϥΠϯ Ͱ౉͢͜ͱ͕͖ͰΔ Serverless CommandLine Event Args

Slide 6

Slide 6 text

ຊ୊

Slide 7

Slide 7 text

αʔόϨε ΞʔΩςΫνϟ ͱ͸

Slide 8

Slide 8 text

• Ϋϥ΢υͰఏڙ͞ΕΔαʔϏεར༻Λલఏʹߏங͢ΔαʔϏεٴͼΞϓϦέʔγϣϯ • Ծ૝ϚγϯΛ࢖ΘͣʹΞʔΩςΫνϟΛߏ੒ EC2

Slide 9

Slide 9 text

Կ͕خ͍͠ͷ͔

Slide 10

Slide 10 text

ຊདྷ΍Γ͔ͨͬͨίʔυΛॻ͘͜ͱʹ ूதग़དྷΔ؀ڥΛ࡞Δ

Slide 11

Slide 11 text

• webαʔϏεΛ։ൃӡ༻ͯ͠ϏδωεΛ੒ޭͤ͞Δ͜ͱ • ͦͷͨΊʹΞϓϦέʔγϣϯͷίʔυΛॻ͘͜ͱ ຊདྷ΍Γ͔ͨͬͨ͜ͱ ͔͠͠ݱ࣮ʹ͸ίʔυΛॻ͚ͩ͘Ͱ͸ແ͍

Slide 12

Slide 12 text

• OS΍ωοτϫʔΫͷઃఆɾ؅ཧ • αʔόͷߏஙɾϥϯλΠϜ؀ڥͷηοτΞοϓ • ϛυϧ΢ΣΞ΍ΞϓϦέʔγϣϯͷηΩϡϦςΟΞοϓσʔτ • Πϯϑϥͷϝϯςφϯε • ΞΫηε਺΍Ϣʔβ਺ͷ৳ͼʹର͢Δαʔόߏ੒ͷมߋɾΩϟύγςΟ ؅ཧ • ݸਓ৘ใͷ؅ཧ αʔό͕ଘࡏ͢Δ৔߹ʹൃੜ͢ΔλεΫ

Slide 13

Slide 13 text

αʔό͕ଘࡏ͢ΔwebαʔϏεͷ্ཱͪ͛౰ॳ ίʔυͷ࣮૷ αʔόϝϯςφϯε αʔόͷߏங ΩϟύγςΟϓϥϯχϯά අ΍ͤΔ࣌ؒͷׂ߹ • ଟ͘ͷ࣌ؒΛίʔυͷ࣮૷ʹඅ΍ͤΔ

Slide 14

Slide 14 text

αʔό͕ଘࡏ͢ΔwebαʔϏε͕੒௕͢Δͱ αʔόͷ؂ࢹ αʔόϝϯςφϯε ίʔυͷ࣮૷ ΩϟύγςΟ ϓϥϯχϯά අ΍ͤΔ࣌ؒͷׂ߹ • ૿͑ߦ͘ΞΫηε΍Ϣʔβ਺ʹର͢Δ αʔόͷߏ੒มߋɾΩϟύγςΟϓϥ ϯχϯά • ϞϊϦγοΫͳγεςϜʹର͢Δϝϯ ςφϯείετ • γϏΞͳݸਓ৘ใͷ؅ཧ • αʔόͷ؂ࢹ΍ͦΕʹର͢Δ24/365ͷ ରԠͷඞཁੑ ηΩϡϦςΟΞλοΫ ΁ͷରԠ

Slide 15

Slide 15 text

͍ͭͷؒʹ͔ଟ͘ͷ࣌ؒΛ෇ՃՁ஋ͷੜ·ͳ͍ ॏ࿑ಇʹඅ΍͍ͯ͠Δ

Slide 16

Slide 16 text

Ͳ͏ղܾ͢Δͷ͔

Slide 17

Slide 17 text

αʔό͕ଘࡏ͢ΔwebαʔϏεͷ੒௕ظ αʔόͷ؂ࢹ αʔόϝϯςφϯε ίʔυͷ࣮૷ ΩϟύγςΟ ϓϥϯχϯά අ΍ͤΔ࣌ؒͷׂ߹ • ૿͑ߦ͘ΞΫηε΍Ϣʔβ਺ʹର͢Δ αʔόͷߏ੒มߋɾΩϟύγςΟϓϥ ϯχϯά • ϞϊϦγοΫͳγεςϜʹର͢Δϝϯ ςφϯείετ • γϏΞͳݸਓ৘ใͷ؅ཧ • αʔόͷ؂ࢹ΍ͦΕʹର͢Δ24/365ͷ ରԠ໺ඞཁੑ %%PT߈ܸͷରԠ ͢΂ͯΛΫϥ΢υαʔϏε΁ Ξ΢τιʔε

Slide 18

Slide 18 text

݁Ռ΋ͨΒ͞ΕΔϝϦοτ Ϗδωε΁ͷ෇ՃՁ஋Λ͚ͭΔίʔυͷ࣮૷ʹ ଟ͘ͷ࣌ؒΛඅ΍ͤΔΑ͏ʹͳΔ

Slide 19

Slide 19 text

࣮ફฤ

Slide 20

Slide 20 text

Ұൠతͳϒϥ΢βΞϓϦέʔγϣϯΛαʔόϨεΞʔΩςΫνϟͰ ࣮૷ͨ͠৔߹ͷߏ੒Λݟ͍͖ͯ·͠ΐ͏

Slide 21

Slide 21 text

ϒϥ΢βΞϓϦέʔγϣϯͷߏ੒ਤ

Slide 22

Slide 22 text

ϒϥ΢βΞϓϦέʔγϣϯͷߏ੒ਤ CognitoʹΑΔ ೝূɾೝՄ

Slide 23

Slide 23 text

ϒϥ΢βΞϓϦέʔγϣϯͷߏ੒ਤ ಈతॲཧ͸API Gateway Λ௨ͯ͠LambdaͰॲཧ

Slide 24

Slide 24 text

ϒϥ΢βΞϓϦέʔγϣϯͷߏ੒ਤ HTML,CSSͳͲ ੩తϦιʔε͸S3ʹઃஔ

Slide 25

Slide 25 text

Cognito 
 User Pools ೝূɾೝՄ

Slide 26

Slide 26 text

Cognito User Pools • ಠࣗͷϢʔβσΟϨΫτϦΛ࡞੒Ͱ͖ΔϑϧϚωʔδυαʔ Ϗε • ਺ԯϢʔβ·Ͱεέʔϧ • ೝূɾೝՄγεςϜΛεέʔϧͤ͞ɺηΩϡΞʹ͢Δͱ͍͏ ॏ࿑ಇΛ͢΂ͯ΍ͬͯ͘ΕΔαʔϏε

Slide 27

Slide 27 text

Cognito User Pools • جຊతʹ͸1ͭͷΞϓϦέʔγϣϯʹ͖ͭ1ͭͷUser Pool Λ࡞Δ • αΠϯΞοϓͷࡍͷύεϫʔυͷϙϦγʔ΍ೋஈ֊ೝূͳ ͲηΩϡϦςΟʹؔ͢ΔઃఆΛ֤User Poolຖʹઃఆ͢Δ • αΠϯΞοϓࡁΈͷϢʔβͷҰཡ͸Ϛωδϝϯτίϯιʔ ϧ͔Β֬ೝͰ͖Δ

Slide 28

Slide 28 text

Amazon Cognito Identity SDK for JavaScript https://github.com/aws/amazon-cognito-identity-js • User PoolͱwebαΠτͱͷ࿈ܞΛߦ͏ϥΠϒϥϦ • αΠϯΠϯɺαΠϯΞοϓɺύεϫʔυϦϚΠϯμʔ ͳͲɺϢʔβ؅ཧΛߦ͏্Ͱඞཁͳϝιου͕શ ͯ༻ҙ͞Ε͍ͯΔ • JavaScriptͰϝιουΛهड़͢Δ͚ͩͰྑ͍ɻෳ ࡶͳϏδωεϩδοΫΛ࣮૷͢Δඞཁ͸ͳ͍

Slide 29

Slide 29 text

Customer Authorizer API 
 Gateway Cognito User Pools • API GatewayʹೝূೝՄͷ࢓૊ΈΛUser PoolsΛ࢖࣮ͬͯݱͰ͖Δ • ϩάΠϯࡁΈͰ͋Ε͹APIͷॲཧΛಈ࡞͞ ͤͯɺະϩάΠϯঢ়ଶͰ͋Ε͹ɺAPIͷॲ ཧΛ࣮ࢪͤ͞ͳ͍ͱ͍ͬͨ͜ͱ͕Մೳ

Slide 30

Slide 30 text

ຊ೔ϕʔλ͕औΕͯਖ਼ࣜϦϦʔε

Slide 31

Slide 31 text

DynamoDB ಈతॲཧ Lambda API 
 Gateway

Slide 32

Slide 32 text

API Gateway • ΞϓϦέʔγϣϯͷݰؔͱͯ͠ৼΔ෣͏ APIΛ࡞੒͢Δ͜ͱ ͕Ͱ͖ΔϚωʔδυαʔϏε • APIόοΫΤϯυγεςϜʹLambdaΛઃఆͯ͠֎෦͔Βͷೖ ྗσʔλΛॲཧͤ͞Δ • ͲͷΑ͏ͳεέʔϧͰ͋ͬͯ΋ɺ؆୯ʹ API ͷ࡞੒ɺ഑෍ɺ อकɺ؂ࢹɺอޢ͕ߦ͑Δ

Slide 33

Slide 33 text

Lambda • ΞϓϦέʔγϣϯίʔυΛ࣮ߦͰ͖ΔίϯϐϡʔταʔϏε • Ϣʔβ͸ΞϓϦέʔγϣϯίʔυͷΈΛAWSʹΞοϓϩʔ υ͢Ε͹ྑ͍ɻϢʔβ͕੹೚Λෛ͏ͷ͸ίʔυͷΈ • αʔόɺOSɺΩϟύγςΟʔͷϓϩϏδϣχϯά͓Αͼࣗ ಈεέʔϦϯάɺίʔυͷϞχλϦϯά͓Αͼϩάه࿥͸ AWS͕؅ཧٴͼ࣮ࢪ͢Δ

Slide 34

Slide 34 text

DynamoDB • ϑϧϚωʔδυͳNo SQLσʔλϕʔεαʔϏε • SPOF͕ଘࡏ͠ͳ͍ɻߴՄ༻ੑ 3 x ϨϓϦέʔγϣϯ • ετϨʔδ༰ྔ੍ݶͳ͠ • ਫฏεέʔϦϯάʹΑΔෛՙ෼ࢄ

Slide 35

Slide 35 text

• ͜ͷ3ͭͷαʔϏεΛ૊Έ߹ΘͤΔ͜ͱͰɺΞϓϦέʔγϣ ϯʹඞཁͳσʔλͷೖग़ྗɺॲཧɺӬଓԽ͕ՄೳʹͳΔ αʔόϨεΞʔΩςΫνϟࡾछͷਆث

Slide 36

Slide 36 text

αʔόϨεΞʔΩςΫνϟͰͷ։ൃΛΑΓޮ཰తʹ

Slide 37

Slide 37 text

։ൃπʔϧ΍ϑϨʔϜϫʔΫ Serverless Framework API GatewayٴͼLambdaɺͦͷଞAWSϦιʔεΛ࢖ͬͨ ΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ APEX LambdaϑΝϯΫγϣϯΛϏϧυɺσϓϩΠɺ؅ཧ͢ΔͨΊ ͷπʔϧ chalice Serverless FrameworkʹࣅͨϑϨʔϜϫʔΫ Lamvery LambdaͷσϓϩΠ΍Functionͦͷ΋ͷΛؚΊͨपลػೳͷ ઃఆɾ؅ཧΛࢧԉ͢Δπʔϧ Simple API Gateway API GatewayͷઃఆٴͼσϓϩΠΛ؆୯ʹ͢Δπʔϧ

Slide 38

Slide 38 text

੩తϦιʔε S3 Bucket

Slide 39

Slide 39 text

Simple Strage Service • Πϯλʔωοτ༻ͷετϨʔδαʔϏε • εέʔϥϒϧͰ৴པੑ͕ߴ͘ɺ͔ͭߴ଎Ͱ҆Ձͳσʔλετ ϨʔδΠϯϑϥετϥΫνϟΛར༻Ͱ͖Δ
 • ϑϩϯτ༻ͷHTML͸S3όέοτʹ഑ஔ͢Δ͜ͱͰແݶͷε έʔϥϏϦςΟΛ࣮ݱ͢Δ

Slide 40

Slide 40 text

ϑϩϯτͷϒϥ΢βͱAPIΛޮ཰Α͘઀ଓͯ͘͠ΕΔ΋ͷ͕ඞཁ

Slide 41

Slide 41 text

ϑϩϯτͷϒϥ΢βͱAPIΛޮ཰Α͘઀ଓͯ͘͠ΕΔ΋ͷ͕ඞཁ Single Page ApplicationʹΑΔ ϒϥ΢βΞϓϦέʔγϣϯͷ։ൃ

Slide 42

Slide 42 text

• ୯ҰϖʔδʹΑΔWebΞϓϦέʔγϣϯ • ϖʔδ͸ϋογϡͷมߋ΍ DOM ͷૢ࡞ʹΑͬͯ੾ ΓସΘΔ • αʔόͱͷ௨৴͸ Ajax ΍ WebSocket ͳͲͰߦ͏ Single Page Applicationͱ͸

Slide 43

Slide 43 text

• APIͱϖʔδ͕׬શʹ෼཭͍ͯ͠ΔͨΊɺAPI ϑΝʔετͷߟ͑ํͰࣗવʹΞϓϦέʔγϣϯ͕૊ ΊΔ • ΫϥΠΞϯτͱAPIͦΕͧΕʹ։ൃϦιʔεΛ෼཭ ׂͯ͠Γ౰ͯΔ͜ͱ͕༰қ Single Page ApplicationͷϝϦοτ

Slide 44

Slide 44 text

ϓϦίϯύΠϧʹΑΔΫϥΠΞϯταΠυϨϯμϦϯά API Gateway͔Βͷσʔλऔಘ ίϯύΠϧͯ͠HTMLͷੜ੒ ϒϥ΢βͰͷඳը

Slide 45

Slide 45 text

·ͱΊ • ͜͜·Ͱʹ঺հͨ͠αʔϏε΍πʔϧΛ࢖͏͜ͱͰैདྷͷϒ ϥ΢βΞϓϦέʔγϣϯΛαʔόϨεΞʔΩςΫνϟͰ։ൃɺ ӡ༻͢Δ͜ͱ͕ՄೳʹͳΔ

Slide 46

Slide 46 text

·ͱΊ http://qiita.com/horike37 ࠓ೔঺հͨ͠ΞʔΩςΫνϟͷৄࡉ͸QiitaͷํʹιʔείʔυؚΊͯॻ͍͍ͯ·͢ ڵຯ͋Δํ͸ੋඇͷ͍ͧͯΈ͍ͯͩ͘͞

Slide 47

Slide 47 text

αʔόϨεΞʔΩςΫνϟͰ࠷΋େࣄͳ͜ͱ ࠷ޙʹ

Slide 48

Slide 48 text

αʔόϨεΞʔΩςΫνϟͰ΍͍ͬͯ͘ؾ࣋ͪʂ

Slide 49

Slide 49 text

ࣗ෼ͨͪͰ։୓͠ɺࣄྫΛ࡞͍ͬͯ͘ؾ࣋ͪʂ

Slide 50

Slide 50 text

ͦΜͳ೤͍ؾ࣋ͪΛ͞Βʹ੝Γ্͛ͯ͘ΕΔΠϕϯτ͕͋Γ·͢ʂ

Slide 51

Slide 51 text

Serverless Conf Tokyo͕։࠵͞Ε·͢ʂ http://tokyo.serverlessconf.io/

Slide 52

Slide 52 text

@Amimoto_Ami amimoto-ami.com THANK YOU! ࠓͦ͜͸͡ΊΑ͏ʂ ࣮ફʂαʔόϨεΞʔΩςΫνϟ