Nuxt.jsでモダンなWebアプリ設計

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
November 05, 2018

 Nuxt.jsでモダンなWebアプリ設計

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

November 05, 2018
Tweet

Transcript

  1. Nuxt.jsでモダンなWebアプリ設計 鈴木孝之 2018/11/05

  2. "HFOEB ࣗݾ঺հɾձࣾ঺հ /VYUKTͷ֓ཁ /VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ  αʔόߏ੒  +85ೝূ

  3. ࣗݾ঺հɾձࣾ঺հ

  4. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ

    ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js,Nuxt.js,
  5. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕

    ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
  6. /VYUKTͷ֓ཁ

  7. Nuxt.jsͱ͸ Nuxt.js ͱ͸Ϣχόʔαϧͳ Vue.js Ξϓ ϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔ ϜϫʔΫͰ͢ɻ Nuxt.js ͸ αʔόʔαΠυϨϯμϦϯά

    ͢Δ Vue.js ΞϓϦέʔγϣϯͷ։ൃΛ ΋ͬͱָ͘͢͠ΔͨΊʹඞཁͳઃఆΛɺ ͋Β͔͡Ίηοτ͍ͯ͠·͢ɻ
  8. ओͳػೳ ɾVue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱ ɾίʔυΛࣗಈతʹ෼ׂ͢Δ͜ͱ ɾαʔόʔαΠυϨϯμϦϯά ɾඇಉظσʔλΛϋϯυϦϯά͢ΔύϫϑϧͳϧʔςΟϯά ɾ੩తϑΝΠϧͷ഑৴ ɾES6/ES7 ͷτϥϯεύΠϨʔγϣϯ ɾJS

    ͱ CSS ͷόϯυϧٴͼϛχϑΝΠ ɾHead ཁૉͷ؅ཧ ɾ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά ɾSASS, LESS, Stylus ͳͲͷϓϦϓϩηοαͷαϙʔτ ɾHTTP/2 push headers ready ɾϞδϡʔϧߏ଄Ͱ֦ுͰ͖Δ͜ͱ
  9. routingͷઃఆͰ೰·ͳͯ͘ ࡁΉɻ componentͳͲͷओཁͳϩ δοΫͷ෦෼ͷ࣮૷ʹूத Ͱ͖Δ ͚ͬ͜͏ɺwebpackͷઃఆͱ ͔؅ཧʹ͕͔͔࣌ؒΓ͕ͪͩ ͕ɺͦ͜ΛলུͰ͖Δɻ PWAʹରԠ͢Δ͜ͱͰɺओʹ ࣍ͷΑ͏ͳϝϦοτ͕ੜ·Ε

    ·͢ɻ ɾΦϑϥΠϯͰ΋ӾཡՄೳ ɾϓογϡ௨஌ ɾΠϯετʔϧՄೳ pagesσΟϨΫτϦ ʹϑΝΠϧ௥Ճ͢Δ ͱࣗಈϧʔςΟϯά PWAಋೖ͕؆୯ʹͰ͖Δ ϝϦοτɾಛ௃ Webpack/Babelͷઃ ఆॻ͘ඞཁͳ͠ 2 ʙϝϦοτʙ 1 3
  10. VueΠϯελϯεͷϥΠϑαΠΫϧ

  11. ॻ͖ํ

  12. ॻ͖ํ

  13. ࣗಈͰroutingͯ͘͠ΕΔͷͰɺ componentͳͲͷओཁͳϩδοΫ ͷ෦෼ͷ࣮૷ʹूதͰ͖Δ σΟϨΫτϦߏ੒

  14. /VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ

  15. ݱࡏɺ։ൃதͷαʔϏε ▪ٕज़ཁ݅ ɾαʔόαΠυ 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͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍
  16. ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴

  17. JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷURL- safeͳJSONΛ࢖ͬͨೝূํࣜͰ ͢ɻ Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕͍ͭ ͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ͕େ

    ͖͍Ͱ͢ɻ
  18. JWTͱ͸ [ೝূϑϩʔͷ࢓૊Έ] ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴Ͱ҉߸Խͯ͠JWT ͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ɻ

  19. JWTͱ͸ ▪JWT࢖༻ͷϝϦοτ JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ

    https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
  20. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ
  21. MiddleWareͷൃಈλΠϛϯά ɾೝূͳͲͷϨϯμϦϯάΑΓ΋લʹ࣮ߦ ͍ͨؔ͠਺Λ͜͜ʹஔ͖·͢ɻ ϛυϧ΢ΣΞ͸Լهͷॱʹ࣮ߦ͞Ε·͢ 1.nuxt.config.js 2.Ϛονͨ͠ϨΠΞ΢τ 3.Ϛονͨ͠ϖʔδ

  22. localStrageͷઃఆΠϝʔδ

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

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

  25. ͦͷଞͷ޻෉ Nuxt.jsͷ؅ཧը໘ςϯϓϨʔτΛ࢖༻ ͜ΕΛ࢖͏͜ͱͰॳظͷcomponentͷ੾Γ෼͚ɺ ֤छઃఆϑΝΠϧͷಋೖͷखؒΛল͚ͨɻ ؅ཧը໘ͩͱಛʹࣅͨΑ͏ͳσβΠϯʹͳΔͷͰɺ ج൫ͷιʔε͸ςϯϓϨʔτΛ࢖͏ࣄΛ͓קΊ͠· ͢ɻ https://github.com/muhibbudins/nuxt-coreui

  26. ·ͱΊ

  27. ᶃNuxt.jsΛ࢖͏ͱ։ൃޮ཰্͕͕Δʂ ᶄJWTೝূΛ؆୯ʹ࣮ݱͰ͖Δʂ ·ͱΊ

  28. ࢀߟ ɾ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