LaravelͱNuxt.jsΛಉҰϨ ϙδτϦͰӡ༻ͨ࣌͠ͷߏ ੒ͱͭ·͖ͣϙΠϯτ @kotamat 

͜͡͠ΐ͏͔͍ • SCOUTER CTO • جຊ͸ΠϯϑϥɺόοΫΤϯυ • جຊLaravel 5.4 or 5.5, Vue.js 2.4 or 2.5Ͱ։ൃ • 

4$065&3 ஌ͬͯΔਓ 

స৬ر๬ͷ༑ਓ஌ਓΛ
اۀʹ঺հ͠ใुΛಘΒΕΔ $UP#ਓࡐ঺հαʔϏε 

ਓࡐ঺հձࣾ
 اۀ ٻ ৬ ऀ ঺հͯ͠ใुΛಘΔʹ͸໔ڐ͕ඞཁ ʹ ༗ྉ৬ ۀ঺ հ 

εΧ΢λʔ
ొ࿥ऀ اۀ ٻ ৬ ऀ ݸਓ͕঺հͯ͠ใुΛड͚औΕΔ ʹ 

ࠓ೔࿩͢͜ͱ • Laravel, Nuxt.jsͷ؆୯ͳ঺հ • LaravelͱNuxt.jsΛಉ࣌ʹ࢖͏ࡍͷߏ੒ • ߏ੒࣌ͷͭ·͖ͮϙΠϯτ 

-BSBWFM
஌ͬͯΔਓ 

Web৬ਓͷͨΊͷϑϨʔϜϫʔΫ • ˑ36,323 • Web։ൃͰ࢖༻͢Δ͞·͟·ͳجຊػೳΛଟ਺౥ࡌͨ͠ॏྔڃPHPϑ ϨʔϜϫʔΫ • ORMɺϧʔςΟϯάɺδϣϒΩϡʔɺ௨஌ɺϚΠάϨʔγϣϯ etc.. • ॆ࣮ͨ͠υΩϡϝϯτ • https://laravel.com ެࣜ • https://readouble.com/ ೔ຊޠ 

No content

7VFKT
஌ͬͯΔਓ 

Progressive JS Framework • ˑ74,322 • HTMLϑΝΠϧͷΑ͏ͳهड़Ͱॻ͚Δ • पลϥΠϒϥϦͱͷซ༻ͰSPA΍SSR౳͕؆୯ʹ࣮ݱͰ͖ Δ • ॆ࣮ͨ͠υΩϡϝϯτ • https://jp.vuejs.org/ 

/VYUKT
஌ͬͯΔਓ 

Universal Vue.js Framework • ˑ7,786 • Next.js(React)ͷVue.js൛ • Universal Javascript: αʔόʔͱϑϩϯτͷ ίʔυΛڞ༗͢Δ 

/VYUKT
஌ͬͯΔਓ 

Nuxt.js Λ࢖͏͜ͱͷϝϦοτ • SSRΛखܰʹVue.jsϕʔεͰ࣮૷Ͱ͖Δ • ΞϓϦέʔγϣϯ࣮૷ʹूதͰ͖Δ؀ڥΛ؆୯ʹߏ ஙͰ͖Δ • ௨৴ͷ࠷దԽ • ৄ͘͠͸ http://techblog.scouter.co.jp/entry/ 2017/11/13/120000 

Laravel + Nuxt.jsΛબΜͩഎܠ 

దԠϓϩδΣΫτͷ֓ཁ • ؅ཧը໘Λ0͔Β࡞੒͢ΔϓϩδΣΫτ • ϑϩϯτΤϯδχΞ1໊ + αʔόʔαΠυ1໊ • UIϨΠΞ΢τ <<< ػೳੑ < ։ൃεϐʔυ • ࣾ಺ʹ͸Laravel, Vue.jsͷ஌ݟ͸ཷ·͍ͬͯΔ 

Laravel, Nuxt.jsΛ࢖͏͜ͱͰ • ඞཁͳґଘؔ܎͕࠷ॳ͔Βೖ͍ͬͯΔͷͰɺ ։ൃͷ্ཱ͕ͪΓ͕ૣ͍ • UIϑϨʔϜϫʔΫΛೖΕΔ͜ͱͰɺͦΕͳΓ ʹ͍͍ײ͡ͷUIʹͳΔ • αʔόʔͱΫϥΠΞϯτͷؔ৺ͷ෼཭͕Ͱ͖ Δ 

LaravelͱNuxt.jsͷߏ੒ 

૒ํͱ΋ಉҰϦϙͰ؅ཧ • APIͷόʔδϣϯΛߟ͑ͨ͘ͳ͍ɻ • ԾʹංେԽͯ͠ɺΫϥαό෼཭ͨ͘͠ͳͬͯ΋ɺ ؆୯ʹ෼཭Ͱ͖ΔΑ͏ͳঢ়گʹ͸͍ͨ͠ • `composer`΍`yarn`౳ͷίϚϯυ͸ϓϩδΣΫ τϧʔτͰ࣮ߦͰ͖ΔΑ͏ʹ͍ͨ͠ɻ 

૒ํͱ΋ಉҰϦϙͰ؅ཧ |-- 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 

૒ํͱ΋ಉҰϦϙͰ؅ཧ |-- 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༻ͷϑΝΠ ϧ͸ҰՕॴʹ·ͱ ΊΔ 

/client഑ԼʹNuxtϓϩδΣΫτ client/ |-- assets |-- components |-- css |-- layouts |-- middleware |-- mixins |-- pages |-- plugins |-- static |-- store `-- utils 

͜ͷߏ੒ͷͨΊʹ΍Δ͜ͱ • ઃఆϑΝΠϧʹͯ client/ ΛಡΈʹߦ͘Α͏ʹઃఆ • LaravelʹσϑΥϧτͰఏڙ͞Ε͍ͯΔϑϩϯτؔ࿈ͷ ϑΝΠϧͷ࡟আ • Ϋϥαό௨৴ͷͨΊͷϞδϡʔϧ௥Ճ • `nuxt generate`Ͱ੩తϑΝΠϧͷੜ੒ • NginxͰ locationʹΑΔ෼ذ 

ઃఆϑΝΠϧʹͯ client/ Λಡ Έʹߦ͘Α͏ʹઃఆ module.exports = { srcDir: 'client/', } nuxt.config.js 

LaravelʹσϑΥϧτͰఏڙ͞Εͯ ͍Δϑϩϯτؔ࿈ͷϑΝΠϧͷ࡟আ rm -rf resources/assets/ rm package.json 

Ϋϥαό௨৴ͷͨΊͷϞδϡʔ ϧ௥Ճ yarn add @nuxtjs/axios module.exports = { srcDir: 'client/', modules: [ '@nuxtjs/axios', ], axios: { } } nuxt.config.js 

nuxt generateͰ੩తϑΝΠϧ ͷੜ੒ • ؅ཧը໘ͳͷͰSSRෆཁ • ੩తϑΝΠϧʹ͢Δ͜ͱͰɺຊ൪αʔόʔͷ ઃఆΛ؆ུԽ • ϧʔςΟϯά͝ͱʹ࠷దԽ͞ΕͨϑΝΠϧΛ / dist/ ʹग़ྗ 

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; } } 

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ΛಡΈʹ ߦ͘ 

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͞Εͨ ϑΝΠϧΛಡΈʹ ߦ͘ 

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 

ೝূج൫ 

αʔόʔ: Laravel Passport • Passport: LaravelެࣜఏڙͷOauth2ϓϥάΠϯ • Laravel5.5ͩͱcomposer install͢Δ͚ͩͰΤ ϯυϙΠϯτ͕ੜ੒͞ΕΔ • ୯७ͳύεϫʔυೝূͰ͋Ε͹PasswordClient Ͱ 

ΫϥΠΞϯτ: @nuxtjs/auth ..? • ೝূʹඞཁͳػೳΛઃఆϑΝΠϧʹهड़͢Δ͚ͩͰ࣮ݱ • ϩάΠϯɺϩάΞ΢τAPI΁ͷϦΫΤετ • औಘͨ͠τʔΫϯͷӬଓԽ(Cookie, localStorage) • ೝূɺඇೝূ࣌ͷϦμΠϨΫτmiddleware • nuxt_community͕ఏڙ • ͔͠͠ɺAPIͷํͰϩάΠϯϢʔβΛGET͢ΔΤϯυϙΠϯτ͕ଘࡏ͍ͯ͠Δඞཁ ͕͋ͬͨΓɺࡉ͔͍ڍಈʹؔͯ͠͸੍ޚ͕Ͱ͖ͳ͍ • ࠓճ͸ࣗ࡞ 

ͭ·͖ͮϙΠϯτ 

rc11Ͱ͸Vue.js 2.4ܥ • ElementUI: 2.0ͳͲNuxtҎ֎ͷύοέʔδͰ Vue.js2.5͕લఏͷ৔߹͸ෆ۩߹͕ग़Δ͜ͱ͕ ͋Δɻ • nuxt.jsͷdevϒϥϯνͰ͸2.5ʹ্͕͍ͬͯΔ ͷͰɺ࣍ͷϦϦʔεͰ͸ղফ͞ΕΔɻ →ؤுΔ 

nuxt generateͱnuxtίϚϯυ ͷڍಈͷ͕͍ͪ • `nuxt`ίϚϯυͷ৔߹: • Ϗϧυ࣌ʹಡΈࠐΉϑΝΠϧશମʹbabelΛదԠͯ͘͠ΕΔɻ • `nuxt generate`ίϚϯυͷ৔߹: • Nuxt.jsϓϩδΣΫτ഑ԼҎ֎ͷϑΝΠϧ(node_module಺౳)ͰES6ܗࣜͷ JSͩͱΤϥʔ • ίϯϙωϯτΛimport͢Δͱ͜ΖͰେจࣈͷϑΝΠϧ໊Λࢦఆ͠ɺ࣮ࡍͷ ϑΝΠϧ໊͕খจࣈͩͱΤϥʔ →`nuxt generate`ίϚϯυ΋CIͰνΣοΫ 

1.0.0-rc3Ͱͷมߋ఺ͱυΩϡϝ ϯτ 

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มߋͳ͍͕ɺҰԠϦϦʔεϊʔτ͸ݟΑ͏ 

SSRͷͭΒΈ • SSRͰͷΈൃੜ͢ΔΤϥʔΛͨͲΔͷ͕େม(ϒϥ΢βͷσϕϩούʔ πʔϧʹ͸දࣔ͞Εͳ͍) • nuxt/youch(Nuxt७ਖ਼ΤϥʔϨϙʔςΟϯά)Ͱ͸Χόʔ͖͠Εͳ͍࣌ ͕͋Δ • 1.0ʹ্͕ΔλΠϛϯάͰSSRϞʔυͷOn Off͸બ୒Ͱ͖ΔΑ͏ʹ • ҰԠݱঢ়Ͱ΋`nuxt —spa`ͰΫϥΠΞϯτͷΈϏϧυ͸Մೳ (> rc7 ) • process.mode = ‘spa’Ͱ΋spaϞʔυͰ࣮ߦՄೳ ( > rc7 ) →nuxt generate || || spaϞʔυ 

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)) } 

Credential • CookieΛผυϝΠϯ͔ΒLaravelʹૹ৴͍ͨ͠৔߹͸ CORSͷઃఆ͕ඞཁ • barryvdh/laravel-cors Λ࢖͏৔߹͸࠷௿ݶԼهͷΑ͏ʹઃ ఆ return [ - 'supportsCredentials' => false, - 'allowedOrigins' => ['*'], + 'supportsCredentials' => true, + 'allowedOrigins' => [ + env('APP_URL'), + ], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'], 'exposedHeaders' => [], 'maxAge' => 0, ]; 

·ͱΊ • Laravel + Nuxt.jsΛ΍ΔͳΒͪΐͬͱͨ͠Լ४ උΛ͠Α͏ • SSRΛલఏͱ͍ͯ͠ͳ͍αΠτͰ΋Laravel + Nuxt.jsͰͷߏ੒͸Մೳ • ͨͩ͠ɺNuxt.jsͷόʔδϣϯʹ͸஫ҙ