はじめてのSPAを サーバーレスで作る with AngularJS + S3 + Lambda + API Gateway + Route 53

by Yonashiro Yuu

Slide 1

Slide 1 text

͸͡Ίͯͷ41"Λ  αʔόʔϨεͰ࡞Δ :POBTIJSP:VVBLB!DMPOFLP BU+"846(0LJOBXB

Slide 2

Slide 2 text

ࣗݾ঺հ w ᢛಹ৓༤BLB!DMPOFLP w Πϯϑϥ԰͞Μ೥͘Β͍ͱ  ઐ໳ֶߍͷߨࢣ೥͘Β͍  ΍ͬͯ·ͨ͠ɻ ։ൃܦݧͳ͠ w ޷͖ͳ"84ͷαʔϏε͸  4ͱ3PVUFɻ

Slide 3

Slide 3 text

ࠓ೔ͷྲྀΕ w 8FCΞϓϦΛ࡞Δ࣌ͷߏ੒#FGPSF"GUFS w 41"ΛαʔόʔϨεͰ࡞ͬͯΈͨ࿩ w "84Λ࢖ͬͯϋϚͬͨͱ͜ w ࡞ͬͯΈͯࢥͬͨ͜ͱ

Slide 4

Slide 4 text

8FCΞϓϦΛ࡞Δ࣌ͷߏ੒ #FGPSF"GUFS

Slide 5

Slide 5 text

8FCΞϓϦ࡞Δ࣌ʹඞཁͳḉ ඦઓ࿉ຏͳօ༷ʹ͸؆୯͗͢Δ͓࿩ͩͱࢥ͍·͕͢ʜ w ϦΫΤετ͞ΕͨϑΝΠϧΛఏڙ͢Δαʔόʔ w ϦΫΤετʹԠͯ͡ϓϩάϥϜΛ࣮ߦ͢Δ@@@@αʔόʔ w ໊લղܾͷͨΊͷαʔόʔ

Slide 6

Slide 6 text

8FCΞϓϦ࡞Δ࣌ʹඞཁͳḉ ඦઓ࿉ຏͳօ༷ʹ͸؆୯͗͢Δ͓࿩ͩͱࢥ͍·͕͢ʜ w ϦΫΤετ͞ΕͨϑΝΠϧΛఏڙ͢Δ8FCαʔόʔ w ϦΫΤετʹԠͯ͡ϓϩάϥϜΛ࣮ߦ͢Δ"1αʔόʔ w ໊લղܾͷͨΊͷ%/4αʔόʔ

Slide 7

Slide 7 text

8FCΞϓϦ΁ͷΞΫηεͷྲྀΕ ྫ5XJUUFSʹΞΫηεͯ͠ΈΔ %/4αʔόʔ UXJUUFSDPNͷ*1ΞυϨεڭ͑ͯΑ ͔  ͩΑ 8FCαʔόʔ UXJUUFSDPNͷίϯςϯπ͍ͩ͘͞ ͸͍Αͬ

Slide 8

Slide 8 text

8FCΞϓϦ΁ͷΞΫηεͷྲྀΕ ྫ5XJUUFSʹΞΫηεͯ͠ΈΔ 8FCαʔόʔ UXJUUFSDPNͷίϯςϯπ͍ͩ͘͞ ͸͍Αͬ ͋ͬɺ!DMPOFLP͞Μͩɻ !DMPOFLP͞Μ༻ͷ5-࡞Δ ϓϩάϥϜ࣮ߦͯ͠౉͞ͳ ͖Ό  Ͱ΋ը૾ͱ͔͸อଘͯ͋͠ Δͷͦͷ··౉ͪ͠Ό͑͹ 0,ͩΑͶ ϓϩάϥϜͰ࡞ͬͨσʔλ ੩తϑΝΠϧ

Slide 9

Slide 9 text

Slide 10

Slide 10 text

αʔόʔͰಈ͔࣌͢ͷߏ੒ w ϦΫΤετ͞ΕͨϑΝΠϧΛఏڙ͢Δ8FCαʔόʔ w "QBDIF)5514FSWFSOHJOY.JDSPTPGU**4FUDʜ w ϦΫΤετʹԠͯ͡ϓϩάϥϜΛ࣮ߦ͢Δ"1αʔόʔ w $(*͍ͬͯ͏ͷ͕͋ͬͨؾ͕͢ΔʜNPE@YYY ಛʹQIQ   5PNDBUͳͲαʔϒϨοτίϯςφ +BWBͱ͔ ଞ͍Ζ͍Ζ w ໊લղܾͷͨΊͷ%/4αʔόʔ w CJOE6OCPVOE/4%EKCEOTͬͯͷ͕͋ͬͨؾ ͕͢Δʜଞ͍Ζ͍Ζ

Slide 11

Slide 11 text

ΞϓϦ࡞ͬͯಈ͔͍ͨ͠ʜ  ͦΕ͚ͩͳΜͩ w αʔόʔͷηοτΞοϓͱ͔͸·͊ɺ࡞ͬͨΞϓϦ ಈ্͔͢Ͱ͸ઈରඞཁͰ͢ΑͶʜ w ͚ͩͲɺαʔόʔͷҡ࣋ɾӡ༻ͷͨΊͷ஌ࣝ΋ษڧ ͠ͳ͖Ό͍͚ͳ͍ʜͷ w νʔϜͷதʹઐ໳ͷਓ͕͍ΔͳΒ͍͍͚Ͳʜ

Slide 12

Slide 12 text

αʔόʔϨεͳΒ

Slide 13

Slide 13 text

αʔόʔϨεʹͳΔͱมΘΔ͜ͱ w αʔόʔͷηοτΞοϓͱ͔͸·͊ɺ࡞ͬͨΞϓϦಈ্͔͢Ͱ ͸ઈରඞཁͰ͢ΑͶʜ w ηοτΞοϓͱ͔͸ݮΒͤΔɻ  ͕ɺಈ͔͢؀ڥʹ߹ΘͤͨΞϓϦͷ։ൃΛ͠ͳ͍ͱ͍͚ͳ͘ͳΔ ·͊ͲΜͳΞϓϦͰ΋ ಉ͡Ͱ͕͢ w ͚ͩͲɺαʔόʔͷҡ࣋ɾӡ༻ͷͨΊͷ஌ࣝ΋ษڧ͠ͳ͖Ό͍ ͚ͳ͍ʜͷ w ಈ͔͢؀ڥͷಛੑ͸஌Δඞཁ͸͋Δ͕ɺ΄ͱΜͲ؅ཧ͸͠ͳͯ͘ྑ͘ͳΔʜͱ͍͍ͳ͊ʜ w νʔϜͷதʹઐ໳ͷਓ͕͍ΔͳΒ͍͍͚Ͳʜ w ˢͱಉ͡ײ͡

Slide 14

Slide 14 text

αʔόʔϨεͷߏ੒ "84റΓ w ϦΫΤετ͞ΕͨϑΝΠϧΛఏڙ͢Δ8FCαʔόʔ w 4 w ϦΫΤετʹԠͯ͡ϓϩάϥϜΛ࣮ߦ͢Δ"1αʔόʔ w -BNCEB"1*(BUFXBZ w ໊લղܾͷͨΊͷ%/4αʔόʔ w 3PVUF

Slide 15

Slide 15 text

41"ΛαʔόʔϨεͰ࡞ͬ ͯΈͨ࿩

Slide 16

Slide 16 text

ͦ΋ͦ΋41"ͬͯ ඦઓ࿉ຏͳօ༷ʹ͸؆୯͗͢Δ͓࿩ͩͱࢥ͍·͕͢ʜ w 41 8FC "ͷུশͰ͢ɻ

Slide 17

Slide 17 text

ͦ΋ͦ΋41"ͬͯ ඦઓ࿉ຏͳօ༷ʹ͸؆୯͗͢Δ͓࿩ͩͱࢥ͍·͕͢ʜ w 4JOHMF1BHF 8FC "QQMJDBUJPOͷུশͰ͢ɻ

Slide 18

Slide 18 text

Ͱɺ4JOHMFͳΜͱ͔ͬͯԿΑ w ௨ৗͷ8FCΞϓϦ͸ը໘ͷભҠͷࡍʹϖʔδશମ ΛαʔόʔʹϦΫΤετ͠·͢ɻ w ͬͯͳΔͱ)5.-΍Β+4΍Β$44΍Βը૾΍Β શ෦ϩʔυ͠ͳ͓͠͠ͳ͖ΌͳΒͳ͍ɻ w ޮ཰ѱ͘ͳ͍

Slide 19

Slide 19 text

41"͡Όͳ͍ྫ 8JLJQFEJB ίϯςϯπͷ෦෼Ҏ֎ڞ௨͡ΌͶ   ίϯςϯπͷ෦෼͚ͩσʔλऔಘͯ͠ॻ͖׵͑ͨΒϦΫ Τετ਺ݮΒͤΔΜ͡ΌͶ ˠϢʔβʔͷମײతʹշ దʹͳΔΜ͡ΌͶ

Slide 20

Slide 20 text

41"ʹ͢Δͱ w ࠩ෼͚ͩऔ͖ͬͯͨΓɺ৘ใΛΞϓϦଆʹૹͬͨ࣌ ʹ͢΂ͯͷཁૉ )5.-ࣗମɾ+4ը૾$44 ΛΛऔ ಘ͠ͳ͍͍ͯ͘ͷͰɺແବͳϦΫΤετ͕ݮΔ w Ϣʔβʔͷମײ଎౓্͕͕Δ w αʔόʔͷෛՙ΋ݮΒͤΔ ద੾ʹ࡞ΕͯΕ͹ Ͷʜ

Slide 21

Slide 21 text

Ͱɺ࡞ͬͯΈ·ͨ͠ w $#5 $PNQVUFS#BTF5FTUJOH ΞϓϦDMPCVUBΛ ։ൃͯ͠Έ·ͨ͠ɻ

Slide 22

Slide 22 text

DMPCVUBͬͯԿ w $#5 $PNQVUFS#BTF5FTUJOH γϛϡϨʔλʔ w Α͏͸໛ٖࢼݧΛίϯϐϡʔλʔͰ΍Δౕ w ΋ͱ΋ͱ͸$6*ͷ΋ͷ͕͋ͬͨͷΛ8FCͰͰ͖ΔΑ͏ʹ͠ ͔ͨͬͨɻ w IUUQCVUBDMPOFLPDPNͰΞΫηεͰ͖·͕͢ɺಈ͖·ͤ Μ ޙड़ w ΫϥΠΞϯτଆͷίʔυ͸(JUIVCʹ͋Γ·͢ɻ  IUUQTHJUIVCDPNDMPOFLPEBZT@OE

Slide 23

Slide 23 text

αʔόʔϨεଆ؀ڥ w ੩తϑΝΠϧͷ഑৴4 w ໰୊σʔλͷ഑৴ ޙड़ "1*(BUFXBZܦ༝-BNCEB Ͱ4ʹ͋Δ+40/σʔλΛऔಘ w %/4αʔόʔ3PVUF

Slide 24

Slide 24 text

ΫϥΠΞϯταΠυ w ZFPNBOͷ"OHVMBS+4ͷδΣωϨʔλʔͰ਽ܗੜ੒ w $P⒎FF4DSJQUͰهड़ w HSVOUͰσϓϩΠ༻σʔλͷੜ੒4΁ͷసૹ

Slide 25

Slide 25 text

΍ͬͯΔ͜ͱ w ΍Γ͍ͨࢼݧΛબ୒ͨ͠Β໰୊σʔλ +40/ Λऔ ಘͯ͠ࢼݧ΍ͬͯɺ࠾఺͍ͯ͠Δ͚ͩͰ͢ɻ

Slide 26

Slide 26 text

΍ͬͯΔ͜ͱ w ΍Γ͍ͨࢼݧΛબ୒ͨ͠Β໰୊σʔλ +40/ Λऔ ಘͯ͠ࢼݧ΍ͬͯɺ࠾఺͍ͯ͠Δ͚ͩͰ͢ɻ

Slide 27

Slide 27 text

"1*(BUFXBZ-BNCEBͰ ΍ͬͯΔ͜ͱ w ࣄલʹύεϫʔυΛ஌ͬͯΔਓʹ͔͠໰୊σʔλͷ ϦΫΤετΛฦ͞ͳ͍Α͏ʹ"1*(BUFXBZܦ༝ͷ -BNCEBͰύεϫʔυνΣοΫΛߦͳ͏ɻ w ਖ਼͍͠ύεϫʔυ͕ϦΫΤετʹؚ·Ε͍ͯΕ͹໰ ୊σʔλ͕อଘ͞Ε͍ͯΔ4όέοτ͔Β+40/ ϑΝΠϧΛऔಘͯ͠ฦ٫͢ΔΑ͏ʹ͍ͯ͠Δɻ w ਖ਼௚ɺˢͷࣄ৘͕ແ͚Ε͹4Ͱ׬݁͠·͢ɻ

Slide 28

Slide 28 text

ྲྀΕ ໰୊σʔλͷϦΫΤετ  ໰୊*%ύεϫʔυ ໰୊*%ύεϫʔυ ύεϫʔυ͕ਖ਼͚͠Ε͹  ໰୊σʔλ +40/ ΛϦΫΤετ ໰୊σʔλ+40/ ໰୊σʔλ+40/ ໰୊σʔλ+40/ ͜Ε͕΍Γ͍͚ͨͩͳͷʹαʔόʔ্ཱͪ͛Δͷ΋അࣛഅࣛ͠ ͍Ͱ͢ΑͶ

Slide 29

Slide 29 text

"1*(BUFXBZ-BNCEBͰ ΍Γ͍ͨ͜ͱ w ੒੷Λσʔλϕʔεʹ֨ೲͯ͠෼ੳ͍ͨ͠ w Ͳͷ໰୊͕Αؒ͘ҧ͍ͬͯΔ͔ͱ͔෼ੳ͍ͨ͠ʜ w ઈࢍอཹதͰ͢PS[

Slide 30

Slide 30 text

"84Λ࢖ͬͯϋϚͬ ͨͱ͜Ζ

Slide 31

Slide 31 text

"84"1*(BUFXBZΛ ࢖ͬͯϋϚͬͨͱ͜Ζ

Slide 32

Slide 32 text

͠ΐͬͪΎ͏๨Εͯ൓ө͞ΕͶʔͬͯΩϨͯΔʜ

Slide 33

Slide 33 text

͍Ζ͍Ζղܾࡦ͋Δʜ w ઌఔͷηογϣϯͰग़ͨ4JNQMF"1*(BUFXBZͱ͔ 4FSWFSMFTT'SBNFXPSL࢖͑͹Ͱ͖Δ΍ΜʜPS[ w ੢ౡ͞ΜͷηογϣϯIUUQXXXTMJEFTIBSFOFU,PJDIJSP/JTIJKJNB BXTMBNCEBJOHPMBOH w র԰͞ΜͷηογϣϯIUUQXXXTMJEFTIBSFOFUOBPUPUFSVZB TFSWFSMFTTGSBNFXPSLOPEFKT

Slide 34

Slide 34 text

͕ฦͤͳ͍ʜ w ౷߹ϨεϙϯεͰύεϫʔυ͕ ؒҧ͍ͬͯΔ࣌ʹ 'PSCJEEFO Λฦͦ͏ͱࢥͬ ͯΛฦ͢Α͏ʹઃఆ͢Δͱ Λฦ͞ͳ͍ ฦ͢ ʜ w Ҏ֎ͩͱͪΌΜͱಈ͍ͨ ͷͰɺෆຊҙ͚ͩͲʹ͠ ͯ·͢ʜ

Slide 35

Slide 35 text

αʔόʔϨε΍ͬͯΈ ͯࢥͬͨ͜ͱ

Slide 36

Slide 36 text

αʔόʔͷҡ࣋͠ͳ͍͍ͯ͘ʜ w Πϯϑϥ԰͞Μతʹࢮ׆؂ࢹͨ͠Γɺαʔόʔͷε ςʔλε؂ࢹͨ͠Γ͍Ζ͍Ζߟ͕͑ͪʹͳ͚ͬͯͨ Ͳɺ΄΅Կ΋ؾʹ͠ͳͯ͘΋͍͍ͷ͸௒ָɻ w ·͊ɺམͪͯͯ΋ͦΜͳʹจ۟ݴ͏ਓ͍ΔΑ͏ͳ ΋ΜͰ΋ͳ͍͔ΒͶʜ w %/4αʔόʔࣗ෼Ͱ࣋ͭΑΓ3PVUFʹ·͔ͤͯ Δ΄͏͕ѹ౗తʹָɻ͏Μɻ

Slide 37

Slide 37 text

ಛੑ͖ͪΜͱ஌ΒΜͱਏ͍ w -BNCEB͸·ͩૉ௚ͳײ͡ɻ w "1*(BUFXBZ͸ͳΜ͔͠ΐʔ΋ͳ͍ͱ͜Ͱͻ͔͔ͬΔɻ w ͋ͱ͸ṖɻཧղͰ͖ͳ͍͜ͱ΋ͳ͍͚Ͳɻ w "1*(BUFXBZ͍ͬͯ͏͘Β͍ͳͷͰ"1*Ҏ্ͷ͜ͱΛ͞ ͤΔͷ͸ଟ෼ແཧͳΜͩΖ͏ͳɻ w 41"ͱ͸૬ੑ͍͍͔΋ɻ

Slide 38

Slide 38 text

·ͱΊ

Slide 39

Slide 39 text

·ͱΊ w αʔόʔϨεɺӡ༻ָɻख์͠Ͱ͸ͳ͍͚Ͳɻ w 41"ͱαʔόʔϨεͷ૬ੑ͸Αͦ͞͏ɻ͚ͩͲ࢖͏ ؀ڥͷ͜ͱͪΌΜͱ஌͓ͬͯ͘ඞཁ͸͋Δɻ