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

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

2b061d517e360c493bb567aa6c3e540d?s=47 kotamat
November 24, 2017

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

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

2b061d517e360c493bb567aa6c3e540d?s=128

kotamat

November 24, 2017
Tweet

More Decks by kotamat

Other Decks in Programming

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/ ೔ຊޠ
  10. None
  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ͷόʔδϣϯʹ͸஫ҙ