SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development

by kkznch

Slide 1

Slide 1 text

SPA開ൃ未ܦݧ者による Nuxt.jsを使った自社サʔビス開ൃ 嘉਺侑起 2019/01/30

Slide 2

Slide 2 text

"HFOEB ࣗݾ঺հɾձࣾ঺հ /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ /VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ ͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKTЋ ·ͱΊ

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

ࣗݾ঺հ ◆໊લ Յ਺ ါى(Kakazu Yuki) @kkznch ◆ࣗݾ঺հ ɾ1990೥ͷԭೄݝੜ·Εԭೄҭͪ ɾ2016೥ʹԭిάϩʔόϧγεςϜζגࣜձࣾʹೖࣾɺ2018 ೥ʹגࣜձࣾRe:Build΁స৬ͯ͠ݱࡏʹࢸΔ ◆झຯ όϨʔϘʔϧɺϐΞϊɺཱྀߦɺΧϑΣ८ΓɺήʔϜ ◆εΩϧ ɾPHPɺGolangɺJavaScriptɺC/C++ɺPythonɺRuby ɾLaravelɺVue.jsɺNuxt.js ◆࠷ۙͷ೰Έ ɾࣸਅࡱΒΕΔͱ͖ʹ΍΍ѱ͍সإʹͳΔ

Slide 5

Slide 5 text

Slide 6

Slide 6 text

/VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ

Slide 7

Slide 7 text

։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ PHP(Laravel5.5) ɾϑϩϯτΤϯυ JavaScript(jQuery, Vue.js, Nuxt.js) ɾΠϯϑϥ AWS(ECS, ECR, S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7, nginx, mariadb, laradock(docker), webpack ɾͦͷଞ GitLab, GitLabCI(ࣗಈσϓϩΠͳͲ), Slack, PhpStorm ɾSPAͷWebΞϓϦܦݧऀ Ұਓ ɾαʔόαΠυ͸ಘҙͳਓ͕ଟ͍ ɾVue.js͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍

Slide 8

Slide 8 text

ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴

Slide 9

Slide 9 text

(1)PUSH (2)GitLab CI࣮ߦ Gitlab ECS ϦϙδτϦ σϓϩΠϑϩʔ ECR (3)ίϯςφΛPUSH (4)ίϯςφىಈ αΠτӾཡ Nuxt.js͸͜͜ͰϏϧυ

Slide 10

Slide 10 text

‣ ં֯ͳͷͰྲྀߦΓʹͷͬͯSPAԽ͔ͨͬͨ͠ ‣ ։ൃϝϯόʹVue.jsͰͷ։ൃܦݧΛ࣋ͭਓ͕͍Δ ‣ SPAͷϊ΢ϋ΢͕ແ͍ͨΊɺن໿ʹԊ͏͜ͱͰػೳΛ࣮ ݱͰ͖ΔNuxt.js͕࠷దͩͱߟ͑ͨ Nuxt.jsΛબఆͨ͠ཧ༝

Slide 11

Slide 11 text

‣ σΟϨΫτϦɾϑΝΠϧߏ੒ ͔Βࣗಈੜ੒ ن໿ྫᶃ ϧʔςΟϯάͷࣗಈੜ੒ Build

Slide 12

Slide 12 text

‣ ը໘͕ϨϯμϦϯά͞ΕΔલʹ ॲཧΛڬΊΔ ‣ ը໘શମ·ͨ͸ݸผʹڬΊΔ ن໿ྫᶄ ϛυϧ΢ΣΞ

Slide 13

Slide 13 text

‣ ࣗલϥΠϒϦɺ֎෦Ϟδϡʔϧͱ߹Θͤͯ࢖༻͢Δ ن໿ྫᶅ ϓϥάΠϯ axiosʹಠࣗॲཧΛ௥Ճ͢Δ࣌

Slide 14

Slide 14 text

ʮ͜͜ʹ͜͏ஔ͚͹͜͏͍͏͜ͱ͕࣮ݱͰ͖Δʯ

Slide 15

Slide 15 text

/VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ

Slide 16

Slide 16 text

Nuxt.jsΛ࢖ͬͯΈͯײͨ͡ϝϦοτ

Slide 17

Slide 17 text

‣ ϑΝΠϧߏ੒͔ΒϧʔςΟϯάͷࣗಈੜ੒ ‣ ϛυϧ΢ΣΞʹΑΔϨϯμϦϯάલޙͷॲཧ ‣ ϓϥάΠϯʹΑΔ֎෦ύοέʔδɺಠࣗϥΠϒϥϦར༻ ن໿ͷ͓͔͛Ͱ೰Ή࣌ؒΛ୹ॖ Ͳ͜ʹԿΛஔ͍ͯͲ͏ॻ͔͕ܾ͘·ͬͯΔͷͰ೰·ͳ͍

Slide 18

Slide 18 text

‣ ಠࣗϧʔϧɺΦϨΦϨΞʔΩςΫνϟͷഉআ ‣ શମతʹϑΝΠϧߏ੒΍ίʔυͷॻ͖ํ͕౷Ұ͞ΕΔ - ٕज़Ϩϕϧ͕௿ͯ͘΋͋Δఔ౓͸ίʔυͷ඼࣭ΛอͯΔ νʔϜͰͷ։ൃΛޮ཰Խ Ͳ͜ʹॻ͚͹͍͍͔෼͔Βͳ͍ศརͦ ͏ͳίʔυ͸UtilΫϥεʹ·ͱΊΔͱ Αͦ͞͏ˑ ←Α͘ͳ͍

Slide 19

Slide 19 text

೔ຊޠͷެࣜυΩϡϝϯτɺॻ੶͕ྑ͍ ʮNuxt.jsϏΪφʔζΨΠυʯ ʮجૅ͔ΒֶͿVue.jsʯ

Slide 20

Slide 20 text

Nuxt.jsΛ࢖ͬͯΈͯײͨ͡σϝϦοτ ※࣮ࡍ͸σϝϦοτΛײ͡Δ৔໘ʹ·ͩૺ۰͍ͯ͠ͳ͍

Slide 21

Slide 21 text

‣ ໰୊ൃੜ࣌ͷݪҼಛఆ͕೉ͦ͠͏ ‣ ผϑϨʔϜϫʔΫ΁ͷҠߦ͕ۤ͘͠ͳΓͦ͏ - Nuxt.jsͷίʔυΛಡΈղ͔͘͠ͳ͍ɺͦΕͳΒNuxt.js࢖ ΘͣʹVue.jsͰॻ͘ํ͕Α͍...ʁ Nuxt.jsͱ͍͏ϒϥοΫϘοΫε

Slide 22

Slide 22 text

‣ Ϗϧυʹ͕͔͔࣌ؒΔ ‣ ϏϧυޙͷϑΝΠϧαΠζ͕ංେԽ͢Δ - ϖʔδ๚໰࣌ͷ࠷ॳͷಡΈࠐΈʹ͕͔͔࣌ؒΔ ϑΝΠϧαΠζ͕ංେԽ͍ͯ͘͠ ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍

Slide 23

Slide 23 text

‣ ҟͳΔυϝΠϯʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ ҟͳΔϓϩτίϧʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ όοΫΤϯυͱΠϯϑϥଆͷઃఆ͕ඞཁͳ৔߹΋͋Δ CORSͳͲΠϯϑϥབྷΈͷΤϥʔ͕໘౗ ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍

Slide 24

Slide 24 text

ن໿͔Βड͚ΔԸܙ͸େ͖͍͕ɺ ࠇശ෦෼Λ৮Δඞཁ͕ग़ͯ͘ΔͱΩπΠ͔΋

Slide 25

Slide 25 text

͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKTЋ

Slide 26

Slide 26 text

JWTΛ࢖ͬͨϢʔβͷೝূɺAPIͷ࣮ߦ

Slide 27

Slide 27 text

‣ ిࢠॺ໊෇͖ͷURL- safeͳJSONΛ࢖ͬͨ ೝূํࣜ ‣ ిࢠॺ໊͕͍͍ͭͯΔ ͷͰվ͟ΜΛ๷ࢭՄೳ JWTʢJson Web Tokenʣͱ͸

Slide 28

Slide 28 text

JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ JWTΛ࢖͏ϝϦοτ ※Ҿ༻ݩ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token

Slide 29

Slide 29 text

1. ΫϥΠΞϯτ͔Βೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)͕ૹ ৴͞ΕΔ 2. αʔό͸ೝূ৘ใ͔ΒϢʔβ৘ใͱ༗ޮظݶΛؚΉJSON Λൿີ伴Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δ 3. ΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ JWTͷೝূϑϩʔ

Slide 30

Slide 30 text

ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ APIϦΫΤετ αʔόαΠυ Vuex Token͕ฦ٫͞ΕΔ Component Action Mutations State Plugin /login Routing Middleware Dispatch Render Commit Mutate eyJ0eXAiOiJKV1QiLCJhbGci OiJIUzI1NiJ9.eyJpc3MiOiJod HRwOlwvXC9sb2NhbGhvc3 RcL2FwaVwvdjFcL2xvZ2luIiw iaWF0IjoxNTQxMzk3NDAyLC JleHAiOjE1NDE0MDEwMDIs Im5iZiI6MTU0MTM5NzQwMi wianRpIjoiSGx1eUVXRU5Jc TdWRHZ6ZyIsInN1YiI6MSwi cHJ2IjoiMWFiMTVlMTVhNG NiODBjOWY3MTJkZTQ3OD ViMmIyMDk4ZGFlMjhjMyJ9. Qkbo7Mf4kMlTbWT- r4L6GhSUUlTUE7p7OHPdob FEXiI Tokenͷྫ HTML CSS JS TokenΛड͚औͬ ͯɺlocalStorage ʹઃఆ ຖճɺToken͕ localStrageʹ͋ Δ͔νΣοΫɻ ͳ͚Ε͹ɺϩά Πϯը໘ʹϦμ ΠϨΫτ ຖճɺlocalStorage Λ֬ೝ͠ɺtokenΛ Authorizationϔο μʔʹઃఆ localStrage token tokenΛऔಘ αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ tokenΛൃߦɻ ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ tokenΛઃఆ

Slide 31

Slide 31 text

ຖճɺToken͕localStrageʹ ͋Δ͔νΣοΫɻ ͳ͚Ε͹ɺϩάΠϯը໘ʹ ϦμΠϨΫτ͢Δ middlewareͰͷϩάΠϯνΣοΫͷྫ

Slide 32

Slide 32 text

plugin (axios)Ͱͷtokenઃఆྫ ϦΫΤετ࣌ʹtokenΛ Authorizationϔομʔʹઃఆ tokenͷظݶ੾ΕͳͲͰ ΤϥʔͰམͪͨ৔߹ʹద੾ͳ ϖʔδʹϦμΠϨΫτ͢Δ

Slide 33

Slide 33 text

ը໘Πϝʔδ

Slide 34

Slide 34 text

ը໘Πϝʔδ

Slide 35

Slide 35 text

ը໘Πϝʔδ

Slide 36

Slide 36 text

FirebaseΛ࢖ͬͨνϟοτػೳ

Slide 37

Slide 37 text

νϟοτػೳͷ࣮ݱํ๏Λٞ࿦ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ ɾ൑அج४ - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕௿͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ

Slide 38

Slide 38 text

ٞ࿦ͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ

Slide 39

Slide 39 text

FirebaseͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ϑΟʔϧυ͸̍֊૚ઌ·Ͱ͔͠ࢦఆͰ͖ͳ͍ɻ - ͦͷଞʹ΋ݕࡧ৚݅ʹ੍ݶ͋Γɻ

Slide 40

Slide 40 text

FirebaseΛ࢖ͬͨνϟοτػೳͷશମߏ੒(૝ఆ) ϩάΠϯ Token͕ฦ٫͞ΕΔ /message αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ tokenΛൃߦɻ νϟοτΛߦ͏ ϑϩϯτΤϯυ /login ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ϦΞϧλΠϜͰϝοηʔδͷ΍ΓͱΓ ఆظతʹDBʹϝοηʔδσʔ λΛॻ͖ࠐΈʹ͍͘ eyJ0eXAiOiJKV1QiLCJhbGci OiJIUzI1NiJ9.eyJpc3MiOiJod HRwOlwvXC9sb2NhbGhvc3 RcL2FwaVwvdjFcL2xvZ2luIiw iaWF0IjoxNTQxMzk3NDAyLC JleHAiOjE1NDE0MDEwMDIs Im5iZiI6MTU0MTM5NzQwMi wianRpIjoiSGx1eUVXRU5Jc TdWRHZ6ZyIsInN1YiI6MSwi cHJ2IjoiMWFiMTVlMTVhNG NiODBjOWY3MTJkZTQ3OD ViMmIyMDk4ZGFlMjhjMyJ9. Qkbo7Mf4kMlTbWT- r4L6GhSUUlTUE7p7OHPdob FEXiI Tokenͷྫ { "users": { "user_01": { "user_id": 23, "company_id": 43 "rooms": ["room01", "room02"] }, }, "rooms": { "room01": { "last_message": "͜Μʹͪ͸ʂ", "created_at": datetime }, "room02": { ... } }, } αʔόαΠυ

Slide 41

Slide 41 text

ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷDatabaseྫ

Slide 42

Slide 42 text

·ͱΊ

Slide 43

Slide 43 text

‣ SPA։ൃܦݧ͕ͳͯ͘΋ɺVue.jsΛ৮ͬͨ͜ͱ͕͋ΔͳΒ Nuxt.jsΛ࢖͏͜ͱΛݕ౼ͯ͠΋͍͍͔΋͠Εͳ͍ʢSPA ϞʔυʹݶΔʣ ‣ Firebaseʹ͸͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ