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

【Nuxt.js/Vue.js】スタートアップ企業導入事例
登壇枠で使用

参考URL
https://re-build.connpass.com/event/111146/

Transcript

1. SPA開ൃ未ܦݧ者による Nuxt.jsを使った自社サʔビス開ൃ 嘉਺侑起 2019/01/30
2. "HFOEB 
   ࣗݾ঺հɾձࣾ঺հ
   
   /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ
   
   /VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ
   
   ͓·͚
   ࣗࣾαʔϏεʹ͓͚Δ/VYUKT
   
   Ћ
   
   ·ͱΊ
   
3. ࣗݾ঺հɾձࣾ঺հ
4. ࣗݾ঺հ ◆໊લ Յ਺ ါى(Kakazu Yuki) @kkznch ◆ࣗݾ঺հ ɾ1990೥ͷԭೄݝੜ·Εԭೄҭͪ ɾ2016೥ʹԭిάϩʔόϧγεςϜζגࣜձࣾʹೖࣾɺ2018 ೥ʹגࣜձࣾRe:Build΁స৬ͯ͠ݱࡏʹࢸΔ ◆झຯ όϨʔϘʔϧɺϐΞϊɺཱྀߦɺΧϑΣ८ΓɺήʔϜ ◆εΩϧ ɾPHPɺGolangɺJavaScriptɺC/C++ɺPythonɺRuby ɾLaravelɺVue.jsɺNuxt.js ◆࠷ۙͷ೰Έ ɾࣸਅࡱΒΕΔͱ͖ʹ΍΍ѱ͍সإʹͳΔ
5. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ ໊̑ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
6. 
   /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ
7. ։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ 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͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍
8. ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴
9. (1)PUSH (2)GitLab CI࣮ߦ Gitlab ECS ϦϙδτϦ σϓϩΠϑϩʔ ECR (3)ίϯςφΛPUSH (4)ίϯςφىಈ αΠτӾཡ Nuxt.js͸͜͜ͰϏϧυ
10. ‣ ં֯ͳͷͰྲྀߦΓʹͷͬͯSPAԽ͔ͨͬͨ͠ ‣ ։ൃϝϯόʹVue.jsͰͷ։ൃܦݧΛ࣋ͭਓ͕͍Δ ‣ SPAͷϊ΢ϋ΢͕ແ͍ͨΊɺن໿ʹԊ͏͜ͱͰػೳΛ࣮ ݱͰ͖ΔNuxt.js͕࠷దͩͱߟ͑ͨ Nuxt.jsΛબఆͨ͠ཧ༝
11. ‣ σΟϨΫτϦɾϑΝΠϧߏ੒ ͔Βࣗಈੜ੒ ن໿ྫᶃ ϧʔςΟϯάͷࣗಈੜ੒ Build
12. ‣ ը໘͕ϨϯμϦϯά͞ΕΔલʹ ॲཧΛڬΊΔ ‣ ը໘શମ·ͨ͸ݸผʹڬΊΔ ن໿ྫᶄ ϛυϧ΢ΣΞ
13. ‣ ࣗલϥΠϒϦɺ֎෦Ϟδϡʔϧͱ߹Θͤͯ࢖༻͢Δ ن໿ྫᶅ ϓϥάΠϯ axiosʹಠࣗॲཧΛ௥Ճ͢Δ࣌
14. ʮ͜͜ʹ͜͏ஔ͚͹͜͏͍͏͜ͱ͕࣮ݱͰ͖Δʯ
15. 
    /VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ
16. Nuxt.jsΛ࢖ͬͯΈͯײͨ͡ϝϦοτ
17. ‣ ϑΝΠϧߏ੒͔ΒϧʔςΟϯάͷࣗಈੜ੒ ‣ ϛυϧ΢ΣΞʹΑΔϨϯμϦϯάલޙͷॲཧ ‣ ϓϥάΠϯʹΑΔ֎෦ύοέʔδɺಠࣗϥΠϒϥϦར༻ ن໿ͷ͓͔͛Ͱ೰Ή࣌ؒΛ୹ॖ Ͳ͜ʹԿΛஔ͍ͯͲ͏ॻ͔͕ܾ͘·ͬͯΔͷͰ೰·ͳ͍
18. ‣ ಠࣗϧʔϧɺΦϨΦϨΞʔΩςΫνϟͷഉআ ‣ શମతʹϑΝΠϧߏ੒΍ίʔυͷॻ͖ํ͕౷Ұ͞ΕΔ - ٕज़Ϩϕϧ͕௿ͯ͘΋͋Δఔ౓͸ίʔυͷ඼࣭ΛอͯΔ νʔϜͰͷ։ൃΛޮ཰Խ Ͳ͜ʹॻ͚͹͍͍͔෼͔Βͳ͍ศརͦ ͏ͳίʔυ͸UtilΫϥεʹ·ͱΊΔͱ Αͦ͞͏ˑ ←Α͘ͳ͍
19. ೔ຊޠͷެࣜυΩϡϝϯτɺॻ੶͕ྑ͍ ʮNuxt.jsϏΪφʔζΨΠυʯ ʮجૅ͔ΒֶͿVue.jsʯ
20. Nuxt.jsΛ࢖ͬͯΈͯײͨ͡σϝϦοτ ※࣮ࡍ͸σϝϦοτΛײ͡Δ৔໘ʹ·ͩૺ۰͍ͯ͠ͳ͍
21. ‣ ໰୊ൃੜ࣌ͷݪҼಛఆ͕೉ͦ͠͏ ‣ ผϑϨʔϜϫʔΫ΁ͷҠߦ͕ۤ͘͠ͳΓͦ͏ - Nuxt.jsͷίʔυΛಡΈղ͔͘͠ͳ͍ɺͦΕͳΒNuxt.js࢖ ΘͣʹVue.jsͰॻ͘ํ͕Α͍...ʁ Nuxt.jsͱ͍͏ϒϥοΫϘοΫε
22. ‣ Ϗϧυʹ͕͔͔࣌ؒΔ ‣ ϏϧυޙͷϑΝΠϧαΠζ͕ංେԽ͢Δ - ϖʔδ๚໰࣌ͷ࠷ॳͷಡΈࠐΈʹ͕͔͔࣌ؒΔ ϑΝΠϧαΠζ͕ංେԽ͍ͯ͘͠ ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍
23. ‣ ҟͳΔυϝΠϯʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ ҟͳΔϓϩτίϧʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ όοΫΤϯυͱΠϯϑϥଆͷઃఆ͕ඞཁͳ৔߹΋͋Δ CORSͳͲΠϯϑϥབྷΈͷΤϥʔ͕໘౗ ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍
24. ن໿͔Βड͚ΔԸܙ͸େ͖͍͕ɺ ࠇശ෦෼Λ৮Δඞཁ͕ग़ͯ͘ΔͱΩπΠ͔΋
25. 
    ͓·͚
    ࣗࣾαʔϏεʹ͓͚Δ/VYUKT
    
    Ћ
26. JWTΛ࢖ͬͨϢʔβͷೝূɺAPIͷ࣮ߦ
27. ‣ ిࢠॺ໊෇͖ͷURL- safeͳJSONΛ࢖ͬͨ ೝূํࣜ ‣ ిࢠॺ໊͕͍͍ͭͯΔ ͷͰվ͟ΜΛ๷ࢭՄೳ JWTʢJson Web Tokenʣͱ͸
28. JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ JWTΛ࢖͏ϝϦοτ ※Ҿ༻ݩ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
29. 1. ΫϥΠΞϯτ͔Βೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)͕ૹ ৴͞ΕΔ 2. αʔό͸ೝূ৘ใ͔ΒϢʔβ৘ใͱ༗ޮظݶΛؚΉJSON Λൿີ伴Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δ 3. ΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ JWTͷೝূϑϩʔ
30. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ
31. ຖճɺToken͕localStrageʹ ͋Δ͔νΣοΫɻ ͳ͚Ε͹ɺϩάΠϯը໘ʹ ϦμΠϨΫτ͢Δ middlewareͰͷϩάΠϯνΣοΫͷྫ
32. plugin (axios)Ͱͷtokenઃఆྫ ϦΫΤετ࣌ʹtokenΛ Authorizationϔομʔʹઃఆ tokenͷظݶ੾ΕͳͲͰ ΤϥʔͰམͪͨ৔߹ʹద੾ͳ ϖʔδʹϦμΠϨΫτ͢Δ
33. ը໘Πϝʔδ
34. ը໘Πϝʔδ
35. ը໘Πϝʔδ
36. FirebaseΛ࢖ͬͨνϟοτػೳ
37. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ ɾ൑அج४ - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕௿͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
38. ٞ࿦ͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
39. FirebaseͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ϑΟʔϧυ͸̍֊૚ઌ·Ͱ͔͠ࢦఆͰ͖ͳ͍ɻ - ͦͷଞʹ΋ݕࡧ৚݅ʹ੍ݶ͋Γɻ
40. 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": { ... } }, } αʔόαΠυ
41. ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷDatabaseྫ
42. 
    ·ͱΊ
43. ‣ SPA։ൃܦݧ͕ͳͯ͘΋ɺVue.jsΛ৮ͬͨ͜ͱ͕͋ΔͳΒ Nuxt.jsΛ࢖͏͜ͱΛݕ౼ͯ͠΋͍͍͔΋͠Εͳ͍ʢSPA ϞʔυʹݶΔʣ ‣ Firebaseʹ͸͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ