Laravel_Nuxtjsでの構成とつまづきポイント

Laravel Vue.js勉強会#2にて発表した内容です。

Transcript

1. LaravelͱNuxt.jsΛಉҰϨ ϙδτϦͰӡ༻ͨ࣌͠ͷߏ ੒ͱͭ·͖ͣϙΠϯτ @kotamat
2. ͜͡͠ΐ͏͔͍ • SCOUTER CTO • جຊ͸ΠϯϑϥɺόοΫΤϯυ • جຊLaravel 5.4 or 5.5, Vue.js 2.4 or 2.5Ͱ։ൃ •
3. 4$065&3 ஌ͬͯΔਓ
4. స৬ر๬ͷ༑ਓ஌ਓΛ
   اۀʹ঺հ͠ใुΛಘΒΕΔ $UP#ਓࡐ঺հαʔϏε
5. ਓࡐ঺հձࣾ
 اۀ ٻ ৬ ऀ ঺հͯ͠ใुΛಘΔʹ͸໔ڐ͕ඞཁ ʹ ༗ྉ৬ ۀ঺ հ
6. εΧ΢λʔ
   ొ࿥ऀ اۀ ٻ ৬ ऀ ݸਓ͕঺հͯ͠ใुΛड͚औΕΔ ʹ
7. ࠓ೔࿩͢͜ͱ • Laravel, Nuxt.jsͷ؆୯ͳ঺հ • LaravelͱNuxt.jsΛಉ࣌ʹ࢖͏ࡍͷߏ੒ • ߏ੒࣌ͷͭ·͖ͮϙΠϯτ
8. -BSBWFM
   ஌ͬͯΔਓ
9. Web৬ਓͷͨΊͷϑϨʔϜϫʔΫ • ˑ36,323 • Web։ൃͰ࢖༻͢Δ͞·͟·ͳجຊػೳΛଟ਺౥ࡌͨ͠ॏྔڃPHPϑ ϨʔϜϫʔΫ • ORMɺϧʔςΟϯάɺδϣϒΩϡʔɺ௨஌ɺϚΠάϨʔγϣϯ etc.. • ॆ࣮ͨ͠υΩϡϝϯτ • https://laravel.com ެࣜ • https://readouble.com/ ೔ຊޠ
11. 7VFKT
    ஌ͬͯΔਓ
12. Progressive JS Framework • ˑ74,322 • HTMLϑΝΠϧͷΑ͏ͳهड़Ͱॻ͚Δ • पลϥΠϒϥϦͱͷซ༻ͰSPA΍SSR౳͕؆୯ʹ࣮ݱͰ͖ Δ • ॆ࣮ͨ͠υΩϡϝϯτ • https://jp.vuejs.org/
13. /VYUKT
    ஌ͬͯΔਓ
14. Universal Vue.js Framework • ˑ7,786 • Next.js(React)ͷVue.js൛ • Universal Javascript: αʔόʔͱϑϩϯτͷ ίʔυΛڞ༗͢Δ
15. /VYUKT
    ஌ͬͯΔਓ
16. Nuxt.js Λ࢖͏͜ͱͷϝϦοτ • SSRΛखܰʹVue.jsϕʔεͰ࣮૷Ͱ͖Δ • ΞϓϦέʔγϣϯ࣮૷ʹूதͰ͖Δ؀ڥΛ؆୯ʹߏ ஙͰ͖Δ • ௨৴ͷ࠷దԽ • ৄ͘͠͸ http://techblog.scouter.co.jp/entry/ 2017/11/13/120000
17. Laravel + Nuxt.jsΛબΜͩഎܠ
18. దԠϓϩδΣΫτͷ֓ཁ • ؅ཧը໘Λ0͔Β࡞੒͢ΔϓϩδΣΫτ • ϑϩϯτΤϯδχΞ1໊ + αʔόʔαΠυ1໊ • UIϨΠΞ΢τ <<< ػೳੑ < ։ൃεϐʔυ • ࣾ಺ʹ͸Laravel, Vue.jsͷ஌ݟ͸ཷ·͍ͬͯΔ
19. Laravel, Nuxt.jsΛ࢖͏͜ͱͰ • ඞཁͳґଘؔ܎͕࠷ॳ͔Βೖ͍ͬͯΔͷͰɺ ։ൃͷ্ཱ͕ͪΓ͕ૣ͍ • UIϑϨʔϜϫʔΫΛೖΕΔ͜ͱͰɺͦΕͳΓ ʹ͍͍ײ͡ͷUIʹͳΔ • αʔόʔͱΫϥΠΞϯτͷؔ৺ͷ෼཭͕Ͱ͖ Δ
20. LaravelͱNuxt.jsͷߏ੒
21. ૒ํͱ΋ಉҰϦϙͰ؅ཧ • APIͷόʔδϣϯΛߟ͑ͨ͘ͳ͍ɻ • ԾʹංେԽͯ͠ɺΫϥαό෼཭ͨ͘͠ͳͬͯ΋ɺ ؆୯ʹ෼཭Ͱ͖ΔΑ͏ͳঢ়گʹ͸͍ͨ͠ • `composer`΍`yarn`౳ͷίϚϯυ͸ϓϩδΣΫ τϧʔτͰ࣮ߦͰ͖ΔΑ͏ʹ͍ͨ͠ɻ
22. ૒ํͱ΋ಉҰϦϙͰ؅ཧ |-- app |-- artisan |-- bootstrap |-- composer.json |-- composer.lock |-- config |-- database |-- phpunit.xml |-- public |-- resources |-- routes |-- server.php |-- storage |-- tests |-- vendor |-- client |-- node_modules |-- nuxt.config.js |-- package.json `-- yarn.lock
23. ૒ํͱ΋ಉҰϦϙͰ؅ཧ |-- app |-- artisan |-- bootstrap |-- composer.json |-- composer.lock |-- config |-- database |-- phpunit.xml |-- public |-- resources |-- routes |-- server.php |-- storage |-- tests |-- vendor |-- client |-- node_modules |-- nuxt.config.js |-- package.json `-- yarn.lock client༻ͷϑΝΠ ϧ͸ҰՕॴʹ·ͱ ΊΔ
24. /client഑ԼʹNuxtϓϩδΣΫτ client/ |-- assets |-- components |-- css |-- layouts |-- middleware |-- mixins |-- pages |-- plugins |-- static |-- store `-- utils
25. ͜ͷߏ੒ͷͨΊʹ΍Δ͜ͱ • ઃఆϑΝΠϧʹͯ client/ ΛಡΈʹߦ͘Α͏ʹઃఆ • LaravelʹσϑΥϧτͰఏڙ͞Ε͍ͯΔϑϩϯτؔ࿈ͷ ϑΝΠϧͷ࡟আ • Ϋϥαό௨৴ͷͨΊͷϞδϡʔϧ௥Ճ • `nuxt generate`Ͱ੩తϑΝΠϧͷੜ੒ • NginxͰ locationʹΑΔ෼ذ
26. ઃఆϑΝΠϧʹͯ client/ Λಡ Έʹߦ͘Α͏ʹઃఆ module.exports = { srcDir: 'client/', } nuxt.config.js
27. LaravelʹσϑΥϧτͰఏڙ͞Εͯ ͍Δϑϩϯτؔ࿈ͷϑΝΠϧͷ࡟আ rm -rf resources/assets/ rm package.json
28. Ϋϥαό௨৴ͷͨΊͷϞδϡʔ ϧ௥Ճ yarn add @nuxtjs/axios module.exports = { srcDir: 'client/', modules: [ '@nuxtjs/axios', ], axios: { } } nuxt.config.js
29. nuxt generateͰ੩తϑΝΠϧ ͷੜ੒ • ؅ཧը໘ͳͷͰSSRෆཁ • ੩తϑΝΠϧʹ͢Δ͜ͱͰɺຊ൪αʔόʔͷ ઃఆΛ؆ུԽ • ϧʔςΟϯά͝ͱʹ࠷దԽ͞ΕͨϑΝΠϧΛ / dist/ ʹग़ྗ
30. NginxͰlocationʹΑΔ෼ذ server { location /api/ { root <σϓϩΠઌDir>/public/; index index.php; try_files $uri $uri/ /api/index.php?$query_string; location ~ \.php$ { ... } } location / { alias <σϓϩΠઌDir>/dist/; index index.html; try_files $uri $uri/ /index.html = 404; } }
31. NginxͰlocationʹΑΔ෼ذ server { location /api/ { root <σϓϩΠઌDir>/public/; index index.php; try_files $uri $uri/ /api/index.php?$query_string; location ~ \.php$ { ... } } location / { alias <σϓϩΠઌDir>/dist/; index index.html; try_files $uri $uri/ /index.html = 404; } } /apiͷϦΫΤετ ͸LaravelΛಡΈʹ ߦ͘
32. NginxͰlocationʹΑΔ෼ذ server { location /api/ { root <σϓϩΠઌDir>/public/; index index.php; try_files $uri $uri/ /api/index.php?$query_string; location ~ \.php$ { ... } } location / { alias <σϓϩΠઌDir>/dist/; index index.html; try_files $uri $uri/ /index.html = 404; } } ͦΕҎ֎͸nuxt generate͞Εͨ ϑΝΠϧΛಡΈʹ ߦ͘
33. NginxͰlocationʹΑΔ෼ذ server { location /api/ { root <σϓϩΠઌDir>/public/; index index.php; try_files $uri $uri/ /api/index.php?$query_string; location ~ \.php$ { ... } } location / { alias <σϓϩΠઌDir>/dist/; index index.html; try_files $uri $uri/ /index.html = 404; } } ϑΝΠϧΛಡΈʹ ߦͬͯଘࡏ͠ͳ͚ Ε͹/index.html ͰSPA
34. ೝূج൫
35. αʔόʔ: Laravel Passport • Passport: LaravelެࣜఏڙͷOauth2ϓϥάΠϯ • Laravel5.5ͩͱcomposer install͢Δ͚ͩͰΤ ϯυϙΠϯτ͕ੜ੒͞ΕΔ • ୯७ͳύεϫʔυೝূͰ͋Ε͹PasswordClient Ͱ
36. ΫϥΠΞϯτ: @nuxtjs/auth ..? • ೝূʹඞཁͳػೳΛઃఆϑΝΠϧʹهड़͢Δ͚ͩͰ࣮ݱ • ϩάΠϯɺϩάΞ΢τAPI΁ͷϦΫΤετ • औಘͨ͠τʔΫϯͷӬଓԽ(Cookie, localStorage) • ೝূɺඇೝূ࣌ͷϦμΠϨΫτmiddleware • nuxt_community͕ఏڙ • ͔͠͠ɺAPIͷํͰϩάΠϯϢʔβΛGET͢ΔΤϯυϙΠϯτ͕ଘࡏ͍ͯ͠Δඞཁ ͕͋ͬͨΓɺࡉ͔͍ڍಈʹؔͯ͠͸੍ޚ͕Ͱ͖ͳ͍ • ࠓճ͸ࣗ࡞
37. ͭ·͖ͮϙΠϯτ
38. rc11Ͱ͸Vue.js 2.4ܥ • ElementUI: 2.0ͳͲNuxtҎ֎ͷύοέʔδͰ Vue.js2.5͕લఏͷ৔߹͸ෆ۩߹͕ग़Δ͜ͱ͕ ͋Δɻ • nuxt.jsͷdevϒϥϯνͰ͸2.5ʹ্͕͍ͬͯΔ ͷͰɺ࣍ͷϦϦʔεͰ͸ղফ͞ΕΔɻ →ؤுΔ
39. nuxt generateͱnuxtίϚϯυ ͷڍಈͷ͕͍ͪ • `nuxt`ίϚϯυͷ৔߹: • Ϗϧυ࣌ʹಡΈࠐΉϑΝΠϧશମʹbabelΛదԠͯ͘͠ΕΔɻ • `nuxt generate`ίϚϯυͷ৔߹: • Nuxt.jsϓϩδΣΫτ഑ԼҎ֎ͷϑΝΠϧ(node_module಺౳)ͰES6ܗࣜͷ JSͩͱΤϥʔ • ίϯϙωϯτΛimport͢Δͱ͜ΖͰେจࣈͷϑΝΠϧ໊Λࢦఆ͠ɺ࣮ࡍͷ ϑΝΠϧ໊͕খจࣈͩͱΤϥʔ →`nuxt generate`ίϚϯυ΋CIͰνΣοΫ
40. 1.0.0-rc3Ͱͷมߋ఺ͱυΩϡϝ ϯτ
41. 1.0.0-rc3Ͱͷมߋ఺ͱυΩϡϝ ϯτ • Aliases are now ~, ~~, @, @@, assets and static (~plugins should be renamed to ~/ plugins for example) • Programmatic Usage is different now, see custom-server example and updated express template • build.loaders has been removed in nuxt.config.js, use build.extend instead • injectAs has been removed in plugins, you can inject your plugins by accessing app • process.BROWSER_BUILD has been removed in flavour of process.browser • process.SERVER_BUILD has been removed in flavour of process.server • Remove ~store and ~router aliases, use plugins to access router and store →1.0·Ͱ͸APIมߋͳ͍͕ɺҰԠϦϦʔεϊʔτ͸ݟΑ͏
42. SSRͷͭΒΈ • SSRͰͷΈൃੜ͢ΔΤϥʔΛͨͲΔͷ͕େม(ϒϥ΢βͷσϕϩούʔ πʔϧʹ͸දࣔ͞Εͳ͍) • nuxt/youch(Nuxt७ਖ਼ΤϥʔϨϙʔςΟϯά)Ͱ͸Χόʔ͖͠Εͳ͍࣌ ͕͋Δ • 1.0ʹ্͕ΔλΠϛϯάͰSSRϞʔυͷOn Off͸બ୒Ͱ͖ΔΑ͏ʹ • ҰԠݱঢ়Ͱ΋`nuxt —spa`ͰΫϥΠΞϯτͷΈϏϧυ͸Մೳ (> rc7 ) • process.mode = ‘spa’Ͱ΋spaϞʔυͰ࣮ߦՄೳ ( > rc7 ) →nuxt generate || <no-ssr/> || spaϞʔυ
43. localStorage vs Cookie • Node.jsαʔόʔΛ࢖༻͢Δ৔߹͸ localStorage͸࢖༻ग़དྷͳ͍ͷͰɺCookieʹ σʔλΛอଘ͢Δඞཁ͕͋Δ import JsCookie from 'js-cookie' import Cookie from ‘cookie' … if (process.client) { window.localStorage.setItem('access_token', authData.access_token) JsCookie.set('access_token', authData.access_token) } else { this.$context.res.setHeader('Set-Cookie', Cookie.serialize('access_token', authData.access_token)) }
44. Credential • CookieΛผυϝΠϯ͔ΒLaravelʹૹ৴͍ͨ͠৔߹͸ CORSͷઃఆ͕ඞཁ • barryvdh/laravel-cors Λ࢖͏৔߹͸࠷௿ݶԼهͷΑ͏ʹઃ ఆ return [ - 'supportsCredentials' => false, - 'allowedOrigins' => ['*'], + 'supportsCredentials' => true, + 'allowedOrigins' => [ + env('APP_URL'), + ], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'], 'exposedHeaders' => [], 'maxAge' => 0, ];
45. ·ͱΊ • Laravel + Nuxt.jsΛ΍ΔͳΒͪΐͬͱͨ͠Լ४ උΛ͠Α͏ • SSRΛલఏͱ͍ͯ͠ͳ͍αΠτͰ΋Laravel + Nuxt.jsͰͷߏ੒͸Մೳ • ͨͩ͠ɺNuxt.jsͷόʔδϣϯʹ͸஫ҙ