Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
December 06, 2018
1.6k

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

December 06, 2018
Tweet

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