Nuxt.jsでSPA_Webアプリを初期構築した話.pdf

Transcript

1. Nuxt.jsでSPA Webアプリを 初期構築した話 鈴木孝之 2018/12/06
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   /VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ
    αʔόߏ੒
    +85ೝূ
   ͦͷଞ޻෉ͨ͠఺
   
   NJYJOͳͲ
3. ࣗݾ঺հɾձࣾ঺հ
4. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js Nuxtྺ 2ϲ݄͘Β͍ʂʂʂ
5. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
6. /VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ
7. ։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ PHP(Laravel5.5) ɾϑϩϯτΤϯυ JavaScript(jQuery,Vue.js,Nuxt.js) ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,laradock(docker),webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳͲ),Slack,phpStorm ɾSPAͷWebΞϓϦܦݧऀ Ұਓ ɾαʔόαΠυ͸ಘҙͳਓ͕ଟ͍ ɾVue.js͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍
8. ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴
9. JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷURL- safeͳJSONΛ࢖ͬͨೝূํࣜͰ ͢ɻ Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕͍ͭ ͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ͕େ ͖͍Ͱ͢ɻ
10. JWTͱ͸ [ೝূϑϩʔͷ࢓૊Έ] ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴Ͱ҉߸Խͯ͠JWT ͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ɻ
11. JWTͱ͸ ▪JWT࢖༻ͷϝϦοτ JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
12. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ
13. MiddleWareͷൃಈλΠϛϯά ɾೝূͳͲͷϨϯμϦϯάΑΓ΋લʹ࣮ߦ ͍ͨؔ͠਺Λ͜͜ʹஔ͖·͢ɻ ϛυϧ΢ΣΞ͸Լهͷॱʹ࣮ߦ͞Ε·͢ 1.nuxt.config.js 2.Ϛονͨ͠ϨΠΞ΢τ 3.Ϛονͨ͠ϖʔδ
14. plugin(axios)Ͱͷtokenઃఆྫ ϦΫΤετ࣌ʹtokenΛ Authorizationϔομʔʹઃఆ tokenͷظݶ੾ΕͳͲͰ ΤϥʔͰམͪͨ৔߹ʹద੾ͳϖʔ δʹϦμΠϨΫτ͢Δ
15. middlewareͰͷϩάΠϯνΣοΫͷྫ ຖճɺToken͕localStrageʹ ͋Δ͔νΣοΫɻ ͳ͚Ε͹ɺϩάΠϯը໘ʹ ϦμΠϨΫτ͢Δ
16. LaravelଆͰ΍͍ͬͯΔ͜ͱ ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ ɾ/api/me Ϣʔβʔͷ৘ใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ
17. LaravelଆͰͷ࣮૷खॱ ᶃೝূػೳΛ࡞੒ ᶄcomposerͰjwt-authΛΠϯετʔϧ ᶅEmployeeϞσϧΛमਖ਼ ᶆguardΛमਖ਼ ᶇApiControllerΛੜ੒ ᶈroutes/api.phpΛฤू
18. ը໘Πϝʔδ
19. ը໘Πϝʔδ
20. ը໘Πϝʔδ
21. ͦͷଞ޻෉ͨ͠఺
22. mixinͰϖʔδભҠ࣌ʹSpinnerΛൃಈͤ͞Δ ▪લఏ৚݅ ɾಠࣗͷSpinnerΛ࢖͍͍ͨɻ ɾຖճɺ֤ίϯϙʔωϯτʹಠࣗSpinnerىಈɾऴྃͷఆٛΛ͢ Δͷ͕໘౗ͳͷͰmixinΛ࢖͍ɺ ͳΔ΂͘ɺιʔεతʹ͸҉໧తʹൃಈͤ͞Δɻ
23. mixinͰϖʔδભҠ࣌ʹSpinnerΛൃಈͤ͞Δ ▪࣮૷खॱ 1.ಠࣗϩʔσΟϯά༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ 2. nuxt.conf.jsͷloadingʹ্هίϯϙʔωϯτΛࢦఆ͢Δɻ 3.mixin༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ 4.ϩʔσΟϯάΛݺͼग़͍֤ͨ͠ίϯϙʔωϯτͰmixinΛࢦఆ͢Δɻ
24. ը໘Πϝʔδ
25. ը໘Πϝʔδ
26. mixinͱ͸ʁ ɾϛοΫεΠϯ (mixin) ͸ɺVue ίϯϙʔωϯτʹ࠶ར༻ՄೳͰॊೈ ੑͷ͋ΔػೳΛ࣋ͨͤΔͨΊͷํ๏Ͱ͢ɻ ɾϛοΫεΠϯΦϒδΣΫτ͸೚ҙͷίϯϙʔωϯτΦϓγϣϯΛؚ Ή͜ͱ͕Ͱ͖·͢ɻίϯϙʔωϯτ͕ϛοΫεΠϯΛ࢖༻͢Δͱ͖ɺ ϛοΫεΠϯͷશͯͷΦϓγϣϯ͸ίϯϙʔωϯτࣗ਎ͷΦϓγϣϯ ʹ”ࠞͥΒΕ”·͢ɻ ɾίϯϙʔωϯτʹΦϓγϣϯΛ͚ͭΒΕΔΑ͏ͳΠϝʔδʂ
27. ▪खॱ1 ಠࣗϩʔσΟϯά༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ components/loading.vueΛҎԼͷΑ͏ʹฤू͢ Δɻ start()ͱfinish()͸ఆٛඞਢɻ components/loading.vue
28. ▪खॱ2 nuxt.conf.jsͷloadingʹ্هίϯϙʔωϯ τΛࢦఆ͢Δ nuxtͰಈ͘σϑΥϧτͷSpinnerʹɺઌఔ ࡞੒ͨ͠loading.vueΛࢦఆ͢Δɻ nuxt.conf.jsΛҎԼͷΑ͏ʹฤू͢Δɻ nuxt.conf.js
29. ▪खॱ3 mixin༻ίϯϙʔωϯτΛ༻ҙ͢Δ components/loadingMixin.jsΛ࡞੒͢Δɻ ɾൃಈλΠϛϯάΛίϯτϩʔϧ͍ͯ͠ΔΠ ϝʔδʂ ɾ͜ΕʹΑΓmixinΛ࢖༻͢Δίϯϙʔωϯτ ͕Ϛ΢ϯτ͞ΕͨλΠϛϯάͰಠࣗSpinner͕ ඳը͞ΕΔɻ ͳ͓this.$nuxt.$loading.start()͸nuxt.conf.jsͰ ࢦఆͨ͠ಠࣗSpinnerͷඳըΛ։࢝Λɺ this.$nuxt.$loading.finish()͸ඳըͷऴྃΛ ߦ͍ͬͯΔɻ components/loadingMixin.js
30. ▪खॱ4 ϩʔσΟϯάΛݺͼग़͍֤ͨ͠ίϯϙʔωϯτͰmixinΛࢦఆ͢Δ ҎԼͷΑ͏ʹpages/index.vue, pages/about.vueΛ࡞੒͢Δɻ pages/about.vue pages/index.vue
31. Nuxt.jsͷ؅ཧը໘ςϯϓϨʔτΛ࢖༻ ͜ΕΛ࢖͏͜ͱͰॳظͷcomponentͷ੾Γ෼͚ɺ ֤छઃఆϑΝΠϧͷಋೖͷखؒΛল͚ͨɻ ؅ཧը໘ͩͱಛʹࣅͨΑ͏ͳσβΠϯʹͳΔͷͰɺ ج൫ͷιʔε͸ςϯϓϨʔτΛ࢖͏ࣄΛ͓קΊ͠· ͢ɻ https://github.com/muhibbudins/nuxt-coreui
32. ·ͱΊ
    
33. ᶃJWTೝূΛ؆୯ʹ࣮ݱͰ͖Δʂ ᶄMixinʹڞ௨ॲཧΛ·ͱΊ͓ͯ͘ͱྑͦ͞͏ʂ ·ͱΊ
34. ࢀߟ ɾJWTɺJSON΢ΣϒτʔΫϯ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token ɾJWT(JSON Web Token)Λཧղ͢Δɻ https://scrapbox.io/fendo181/JWT(JSON_Web_Token) %E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3 %80%82 ɾϦϏϧυࣾһϒϩά http://kkznch.hatenablog.com/entry/2018/11/27/143022