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

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ʹ͸͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ