Save 37% off PRO during our Black Friday Sale! »

noteをNuxt.jsで再構築した話

107ba69ff7888cacdb4307a28adf5527?s=47 Retu Fukui
November 03, 2018

 noteをNuxt.jsで再構築した話

2018-11-03にVueFesJapan2018にてお話しました

107ba69ff7888cacdb4307a28adf5527?s=128

Retu Fukui

November 03, 2018
Tweet

Transcript

  1. noteΛNuxt.jsͰ࠶ߏஙͨ͠࿩ VueFesJapan2018 ෱Ҫ ྽(@fukuiretu)

  2. ෱Ҫ ྽ (@fukuiretu) • piece of cake, inc. • since

    2015.3~ • Engineer ◦ Rails occasionally AWS ◦ Vue.js history 7 months ◦ Nuxt.js history 7 months • Live in Aomori ◦ RemoteWorker
  3. ͍͔ͭ੨৿ͰVue.jsͷ Πϕϯτ΍Γ͍ͨ

  4. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ

  5. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ • จষɺࣸਅɺΠϥετͳͲͷ࡞඼Λ౤ߘ͢ Δ͜ͱ͕Ͱ͖Δ • ౤ߘͨ͠࡞඼Λ؆୯ʹൢച͢Δ͜ͱ͕
 Ͱ͖Δ ͩΕ΋͕૑࡞Λ͸͡Ίɺ
 ଓ͚ΒΕΔΑ͏ʹ͢Δɻ

  6. ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ
 2. Nuxt.js΁ͷҠߦܭը
 3. ઃܭɾ࣮૷ͷτϐοΫ
 4. ·ͱΊ

  7. ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ
 2. Nuxt.js΁ͷҠߦܭը
 3. ઃܭɾ࣮૷ͷτϐοΫ
 4. ·ͱΊ

  8. ։ൃ౰࣌ͷϑϩϯτΤϯυ৘੎ 2013. 7 2013. 10 2013. 12 React.js v0.3 Angular.js

    v1.2.3rc Vue.js v0.6 2014. 4 note։ൃ ~ ϦϦʔε note͸Angular.jsΛબ୒ (౰࣌೔ຊͰ͸Backbone.js͕ओྲྀ)
  9. Angular.jsΛબ୒ͨ͠ཧ༝ • UI͕ͦΕͳΓʹෳࡶ • 2-way binding͸ັྗత • αʔόαΠυ͸APIʹઐ೦ • ωΠςΟϒΞϓϦͷߟྀ

    • ΤϯδχΞ࠾༻໨త • ౰࣌ίϯγϡʔϚ޲͚Ͱ͸௝͔ͬͨ͠
  10. ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1ܥ • CoffeeScript • HAML

    • Backend • Ruby on Rails • Infrastructure • AWS
  11. ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1.4ܥ • CoffeeScript • HAML

    • Backend • Ruby on Rails 4.2ܥ • Capistrano • Infrastructure • AWS Client Side Rendering only
 Single Page Application
  12. Կ͕՝୊͔

  13. ՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ •

    Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن໿ • ίϯϙʔωϯτઃܭ
  14. ෛ࠴ͱͳ͍ͬͯΔίʔυͷҰྫ

  15. طଘͷٕज़ͷԆ௕Ͱ͸ղܾ͕ ࠔ೉ͳঢ়گ

  16. දࣔ଎౓͸ਖ਼ٛ

  17. දࣔ଎౓͸ਖ਼ٛ

  18. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ελʔτΞοϓͷن໛Ͱ͸ ͳ͔ͳ͔౿Έ੾Εͳ͍ͷ͕Ұൠత

  19. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓ͸ػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब೚

  20. ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓ͸ػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब೚ ҙ֎ͱ͋ͬ͞ΓͱGoαΠϯ

  21. ͜͏ͯ͠ ϑϩϯτΤϯυΛશ໘తʹ ࡮৽͢Δํ޲Ͱݕ౼ (2018/03)

  22. ٕज़બఆཁ݅ͷચ͍ग़͠ • Server Side Rendering (Ҏ߱SSR) • ֶश/ӡ༻ίετ • σβΠφʔ΁ͷ഑ྀ

    • ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘΋ϝϯςφ ϒϧʹ • ։ൃ/ίϛϡχςΟͷ׆ൃ͞
  23. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1.Express + VanillaJS
 2.React.js
 3.Angular
 4.Vue.js

  24. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1. Express + VanillaJS
 2. React.js
 3. Angular
 4.

    Vue.js ೔ܦ͞ΜͷࣄྫΛࢀߟʹ
  25. ͕͔ͩ͠͠… • ϑϩϯτΤϯυͷॲཧ͕ଟ͍ • ΠϯλϥΫςΟϒͳUI΋ͦͦ͋͜͜Δ • ։ൃޮ཰্͕͕Βͣʹஅ೦

  26. ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1.Express + VanillaJS
 2.React.js
 3.Angular
 4.Vue.js CTOͷ஌ਓʹVue.jsʹਫ਼௨͍ͯ͠Δํ͕ଟ ͘ɺનΊΒΕͨͷ͕͖͔͚ͬ

  27. ࠾༻

  28. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶃ • Vue Server RendererʹΑΔSSRͷαϙʔτ • Virtual DOMʹΑΔޮ཰తͳࠩ෼ߋ৽ • ίϯϙʔωϯτࢦ޲

    • Single File Components • Scoped CSS ࣮ߦ଎౓ͱ։ൃޮ཰ͷཱ྆
  29. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶄ • template͕HTMLͰॻ͚Δ • σβΠφʔʹ΋༏͍͠ • HAML < HTMLͩͱฉ͍͍ͯͨ •

    ߏจ(v-xxx)͕Angular.js(ng-xxx)ͱ͍ۙ͠ ֶशίετͷ௿͞ͱ਌͠Έ΍͢͞
  30. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶅ • ࠔͬͨΒެࣜͷυΩϡϝϯτΛݟΕ͹
 େ֓ղܾ͢Δ • ೔ຊޠϩʔΧϥΠζ൛͕༻ҙ͞Ε͍ͯΔ υΩϡϝϯτͷॆ࣮౓

  31. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶆ • ษڧձ΍Πϕϯτͷଟ͞ = ৘ใྔ͕ଟ͍ • ௐ΂Ε͹৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ ҆৺ײ ࠃ಺ίϛϡχςΟͷ׆ൃ౓

  32. Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ • ͱ͋Δ@kitak͞Μͱ͍͏ํ • ࣮૷ͷQ & A • ઃܭͷαϙʔτ •

    ϋϯζΦϯ։࠵ʹΑΔجૅ஌ࣝ޲্ Vue.jsͷΤΩεύʔτ͕ίϯαϧʹ
  33. Nuxt.js͸??

  34. Nuxt.jsΛ৮Δ͖͔͚ͬ • Vue.jsͰSSR͢Δ৔߹Ͳ͏͢Ε͹ʁ • Nuxt.jsΛ࢖͏ͱ؆୯ʹͰ͖ΔΒ͍͠... • ݕূͯ͠ΈͨΒͬ͘͞ͱSSR͕Ͱ͖ͨ… • kitak͞Μ΋SSR͢ΔͳΒNuxt.js͍͍ͧͱݴͬ ͍ͯͨ͠...

  35. ࠾༻

  36. Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶃ • SSR͕؆୯ʹ • pages഑ԼʹίϯϙʔωϯτΛஔ͘ • asyncData() / fetch() ͰඞཁͳσʔλΛఆٛɾऔಘ͢Δ

    • DIRߏ੒, ϧʔςΟϯάͷࣗಈੜ੒, ϓϥάΠϯ ػߏ etc.. ن໿͕खʹೖΔ
  37. Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ • Vue.jsͷΤίγεςϜΛϏϧτΠϯ • Vue Router, Vuex, Vue Server Renderer,

    vue-meta • Ϗϧυ(webpack)͸Α͠ͳʹ • minify, jsϑΝΠϧ෼ׂ, cssͷΠϯϥΠϯԽ, 
 τϥϯεύΠϧ, preload etc… Ϟμϯͳ؀ڥ͕खʹೖΔ
  38. ΍͍͖ͬͯએݴ Nuxt.jsҠߦϓϩδΣΫτ͕ελʔτ
 (2018/4)

  39. ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ
 2. Nuxt.js΁ͷҠߦܭը
 3. ઃܭɾ࣮૷ͷτϐοΫ
 4. ·ͱΊ

  40. ࡮৽ͷํ਑ • طଘͷRailsαʔό͸API༻్Ͱ͜Ε·Ͱ௨Γར༻ • View૚ΛNuxt.js(ϨϯμϦϯάαʔό)΁Ҡߦ

  41. Ҡߦखॱ • طଘUIΛ࣮֬ʹҠߦͤ͞Δ • େ෯ͳUI/UXͷվम͸ؚΊͳ͍ • ϖʔδຖʹύε(URL)ϕʔεͰLBͰৼΓ෼͚Δ • ࣾ಺޲͚ϦϦʔε ⇢

    Dog Fooding ⇢ Ұൠެ։
  42. ։ൃମ੍ • ΤϯδχΞ: 3໊ • σβΠφʔ: 2໊(ଞϓϩδΣΫτͱ݉຿) • ि1ͰMTG •

    ৘ใڞ༗͸Crowi(ࣾ಺Wiki)Ͱ
  43. ۤ࿑ϙΠϯτ • ฒߦͯ͠ݱߦ൛(Angular.js)ͷվम͸ผνʔϜ Ͱ೔ʑଓ͍͍ͯΔ • Ҡߦ͕׬શʹ׬ྃ͢Δ·Ͱೋॏϝϯς

  44. 2018೥11݄3೔ஈ֊Ͱͷਐḿ ͓͢͢ΊҰཡ ݕࡧ https://note.mu/recommend_nuxt https://note.mu/search_nuxt ຊ൪Քಇத (υοάϑʔσΟϯά༻ͷΤΠϦΞε)

  45. 2018೥11݄3೔ஈ֊Ͱͷਐḿ هࣄৄࡉ https://note.mu/notedemo/n/n81f8264b9b9e ຊ൪Քಇத (σϞ༻ΞΧ΢ϯτͷΈ)

  46. 2018೥11݄3೔ஈ֊Ͱͷਐḿ • શମͷن໛ײ • ίϯϙʔωϯτ਺: 216 • LOC: 43672 •

    *.vue: 36153 • *.js: 6823 • *.scss: 696 more... (2018/4 ~)
  47. ݱ࣌఺Ͱͷ ύϑΥʔϚϯεൺֱ

  48. Lighthouseͷൺֱ Angular.js൛ Nuxt.js൛

  49. WebPageTestͷൺֱ Angular.js൛ Nuxt.js൛ ৚݅ From: Tokyo, Japan - EC2 -

    Chrome - Emulated iPhone X - 3GFast - Mobile Start Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ Speed Index = ίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
  50. ·ͩ·ͩຬ଍Ͱ͖Δ ϨϕϧͰ͸ͳ͍͕ ࣮֬ʹΧΠθϯ͍ͯ͠Δ

  51. ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ
 2. Nuxt.js΁ͷҠߦܭը
 3. ઃܭɾ࣮૷ͷτϐοΫ
 4. ·ͱΊ

  52. ͓඼ॻ͖ • ։ൃ؀ڥ • ίϯϙʔωϯτઃܭ • ϢχόʔαϧJavaScript • ϑΝΠϧαΠζͷѹॖ •

    Polyfill • Infrastructure
  53. ։ൃ؀ڥ

  54. ։ൃ؀ڥ • Nuxt.js v2.2.0 • Jest • ESLint (vue/recommended) •

    Prettier • CircleCI • Sentry

  55. ίϯϙʔωϯτઃܭ

  56. Angular.js൛ͷίϯϙʔωϯτ • directiveΛར༻͠ɺίϯϙʔωϯτϕʔεͰ ։ൃ • ཻ౓ʹϧʔϧ͕ͳ͍ • ཻ౓͸࣮૷ऀͷԘക • ނʹॏෳίʔυ͕ࢄࡒ

    • props(scope)ͷόέπϦϨʔ͕ਏ͍ Կ͔͠Βͷ࢓૊Έͱϧʔϧ͕ཉ͍͠
  57. Vuex & AtomicDesign

  58. Vuexͷओͳϧʔϧ • ϞδϡʔϧϞʔυΛ࠾༻ • mutaions/actions/getttersͷλΠϓʹ͸ఆ਺Λ࢖༻ • grepability • ΤσΟλͷิ׬ •

    ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷ൑அج४ A. ίϯϙʔωϯτΛ௒͑ͯڞ༗͍ͨ͠΋ͷ͕͋Δ
 (͍ΘΏΔόέπϦϨʔରࡦ) B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ࢖͍ํ C. APIݺͼग़͠
  59. ঢ়ଶ؅ཧʹடং͕

  60. VuexϞδϡʔϧͷංେԽ໰୊ 845ߦ....

  61. Nuxt.js v2.0.0

  62. VuexϞδϡʔϧͷϦϑΝΫλ • ͓खܰʹݟ௨͠ྑ͘͢Δ͜ͱ͕Ͱ͖Δ • ංେԽ͢Δͷ͸ॲཧ͕ूத͢Δactions • ߃ٱతʹ͸ػೳ୯ҐͰϞδϡʔϧ෼ׂ
 Ͱ͖ͳ͍͔ݕ౼ 461ߦ

  63. Atomic Designͱ͸ ίϯϙʔωϯτΛ̑ͭͷϨΠϠʔʹ෼ྨ͠ ίϯϙʔωϯτͷ૊Έ߹ΘͤͰ ϖʔδΛߏ੒͍ͯ͘͠ઃܭख๏ • Atomic Design http://atomicdesign.bradfrost.com/

  64. σΟϨΫτϦߏ੒

  65. ࠷ॳ͸ͱʹ͔͘ख୳Γ શһͰίϯϙʔωϯτ෼͚ͯ͠ೝࣝΛͦΖ͑Δ

  66. Atomsͷϧʔϧ • ಺෦ʹଞͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Stateless • VuexϞδϡʔϧ΁ͷࢀরېࢭ •

    σʔλͷ఻೻͸emit
  67. Moleculesͷϧʔϧ • ಺෦ʹAtomsҎ֎ͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Statelessਪ঑ ▪ ঢ়گʹΑͬͯlocal state(data)͸Մ

    • VuexϞδϡʔϧ΁ͷࢀরېࢭ • σʔλͷ఻೻͸emit
  68. Organismsͷϧʔϧ • ಺෦ʹOrganismsҎ্ͷίϯϙʔωϯτΛؚ· ͳ͍ʢਪ঑ʣ • ࠶ར༻ੑ͸Ճຯ͠ͳͯ͘΋ྑ͍ • StatefulͰ΋Α͍ • VuexϞδϡʔϧΛࢀরͰ͖Δ

  69. ෼ྨͨ͠ίϯϙʔωϯτͷҰྫ Atoms Molecules Organisms

  70. ΠϯεύΠΞ Atomic Design ʙݎ࿚Ͱ࢖͍΍͍͢UIΛޮ཰ྑ͘ઃܭ͢Δ https://www.amazon.co.jp/dp/B07CJ5TLK2/ Vue.js ͔ΒΈͨ AtomicDesign https://medium.com/@t_sugawara/vue-js- %E3%81%8B%E3%82%89%E3%81%BF%E3%81%9F-atomicdesign-

    e90517842801
  71. Atomic DesignͷಋೖޮՌ • ֤ϨΠϠʔͷ੹຿͕͋Δఔ౓໌֬ʹ • ֤ϨΠϠʔʹ໊শ͕͋Δ͜ͱͰίϛϡχέʔγϣ ϯ͕ԁ׈ʹ ͜Εͬͯ.PMFDVMFTͰ ͋Δ΂͖͡Όͳ͍ʁ ͏ʔΜɺOrganisms

    Ͱ΋Αͦ͞͏͚ͩͲ
  72. ίϯϙʔωϯτͷࢹೝੑ໰୊ ୭΋೺ѲͰ͖͓ͯΒͣ

  73. Storybook https://storybook.js.org/

  74. ίϯϙʔωϯτͷՄࢹԽ • Ұ౓࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ

  75. ίϯϙʔωϯτͷՄࢹԽ • Ұ౓࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕໘౗ • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ

    Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ Storybook v4.0.0͸ Nuxt.js v2Ͱ͍͚Δ • ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ ର৅ΛAtomsͱMoleculesʹߜΔ
  76. ग़དྷ্͕ͬͨStorybook ڧ͍ؾ࣋ͪΛ΋ͬͯ΍͍ͬͯͧ͘

  77. ϢχόʔαϧJavaScript

  78. ϢχόʔαϧJavaScriptͱ͸ • ΫϥΠΞϯτʢϒϥ΢βʣͱαʔό ʢNode.jsʣͷͲͪΒͰ΋࣮ߦͰ͖Δίʔυ • SSRʹ͓͍ͯ͸ରԠඞਢ

  79. SSR࣌ʹwindow, document͕ undefined • DBʹอଘ͞ΕͨهࣄͷHTML ΛΫϥΠΞϯτͰDOMૢ࡞ ▪ document.xxx࢖ͬͯΔ • ↑Λv-htmlͰల։

    ⾠هࣄϖʔδͰ࣮ࡍʹى͖ͨ໰୊ ίί
  80. SSR࣌ʹwindow, document͕ undefined DOMͷAPIͱޓ׵ੑͷ͋ΔHTMLύʔα jsdom/jsdom https://github.com/jsdom/jsodom

  81. SSR࣌ʹwindow, document͕ undefined

  82. ແࣄSSR͕Ͱ͖ͨ

  83. SSRͷϥΠϑαΠΫϧ ੺࿮͸αʔόɺϒϥ΢βͲͪΒ΋௨ա͢Δ
 (ϢχόʔαϧରԠ͕ඞཁͳ)෦෼

  84. ϑΝΠϧαΠζͷѹॖ

  85. bundleϑΝΠϧͷ෼ੳ OVYUCVJMEŠBOBMZ[F

  86. ෼ੳ݁ՌΛड͚ͯ • highlight.js • codeͷγϯλοΫεϋΠϥΠτʹར༻ • શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ • ରԠݴޠΛߜͬͯ57KBʹ •

    moment.js • λΠϜκʔϯͷߟྀ͸ෆཁͩͬͨͷͰܰྔͳdate-fns΁ • dayjs͸͞ΒʹܰྔͳͷͰͦͪΒͰ΋ྑ͍͔΋? • lodash.js • PolyfillͰे෼ΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ

  87. Polyfill

  88. Polyfill.io
 https://polyfill.io

  89. Polyfill.ioͱ͸ • UserAgentຖʹඞཁͳPolyfill͚ͩΛ·ͱΊͯฦ ͯ͘͠ΕΔ • ඞཁͳPolyfill͸ΦϓγϣϯͰࡉ͔͘ௐ੔Մೳ • Fastly(CDN)͔Β഑৴͞ΕΔͷͰඇৗʹߴ଎

  90. Polyfill.ioͱ͸

  91. ࠾༻ͷϞνϕʔγϣϯ • ΋ͱ΋ͱ͸babel-preset-envͰઃఆ͍ͯͨ͠ • ϒϥ΢βຖͷAPIରԠঢ়گΛ஫ࢹͯ͠؅ཧ͢Δ ͷ͸खؒ

  92. e.g. ChromeͱSafariͷPolyfill Chrome/69.0.3497.1 Safari/605.1.15

  93. Infrastructure

  94. Nuxt on Lambda

  95. AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service •

    ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ
  96. Serverless Framework • ߏ੒؅ཧ΍σϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛෋ • AWSͷଞɺAzure Functions, Google

    Cloud Functionʹ΋ରԠ͍ͯ͠Δ
  97. ࠾༻ͷϞνϕʔγϣϯ • ౰ॳ͸EC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠ ◦ Node.jsͷӡ༻ϊ΢ϋ΢0 ◦

    Կ౓͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ ◦ AWS LambdaͷػӡͰ͸ʁͱ͍͏ࡶஊ͔Βελʔτ
  98. ͬ͘͟ΓLambda্ͷಈ࡞ͷ࢓૊Έ • awslabs/aws-serverless-express Λར༻͠
 expressΛಈ͔͢ • Nuxt.jsΛexpressͷmiddlewareͱͯ͠ಈ͔͢ • ref: API:

    nuxt.render(req, res)
  99. ৄ͘͠͸mya-ake͞ΜͷϒϩάͰ Nuxt.js on AWS Lambda with Serverless Framework
 https://mya-ake.com/posts/nuxtjs-on-aws-lambda

  100. αʔόߏ੒ https://note.mu/recommend https://note.mu/recommend_nuxt

  101. ӡ༻͸ָʹͳΔ …͕͍͔ͭ͘τϨʔυΦϑ΋

  102. τϨʔυΦϑ • Node.jsͷversion͕Lambdaʹґଘͯ͠͠·͏ • ݱঢ়͸v8.10.0 • Nuxt.jsͷ࠷৽versionʹ௥ैͰ͖ͳ͘ͳΔՄೳੑ • LambdaʹσϓϩΠग़དྷΔύοέʔδ༰ྔͷ
 ࠷େ͕50MB

    • ݱ࣌఺Ͱ32MB • cold start໰୊ʹΑΔϨΠςϯγͷѱԽ
  103. ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ
 2. Nuxt.js΁ͷҠߦܭը
 3. ઃܭɾ࣮૷ͷτϐοΫ
 4. ·ͱΊ

  104. ·ͱΊ • ϝϦοτ • طଘͷݴޠ΍ϑϨʔϜϫʔΫͷ੍໿ʹറ ΒΕͳ͍ • υοάϑʔσΟϯά͕༰қʹͰ͖Δ • ϩʔϧόοΫ͕༰қʹͰ͖Δ

    • σϝϦοτ • ׬શҠߦ͢Δ·Ͱ͸2ॏϝϯςʹͳΓ͏Δ ύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ͸༗ޮ
  105. ·ͱΊ • SSR͕ඞཁͳΒಋೖ͠ͳ͍ख͸ͳ͍ • ಋೖ͸؆୯ֶ͕ͩश/ӡ༻ίετ͸͕͋Δ • ϢχόʔαϧରԠ • Node.jsͷӡ༻ •

    τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda͸༗༻ • SSR͕ຊ౰ʹඞཁ͔Ͳ͏͔͸ཁݕ౼ • SPAϞʔυ (mode: ‘spa’) • ੩తαΠτ (nuxt generate) SSRͷಋೖ͸ຊ౰ʹ؆୯
  106. ·ͱΊ • ίετΛ͔͚ͣʹϞμϯͳ։ൃ؀ڥ͕खʹೖΔ
 ⇢ ͙͢ʹ૸Γग़ͤΔ • ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛ ॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ

    • Vuexͷऔѻ΍ίϯϙʔωϯτͷཻ౓ͳͲ Nuxt.js͕ؔ༩͠ͳ͍෦෼ͷϧʔϧࡦఆ͸ผ్ ඞཁ ؀ڥج൫ͷαϙʔτɺن໿͕ඇৗʹڧྗ
  107. ՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ •

    Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن໿ • ίϯϙʔωϯτઃܭ ॳظදࣔ଎౓ͷ஗͞ ٕज़త੍໿ ٕज़తෛ࠴ Nuxt.jsʹཔΕΔ෦෼ͱ͍͏ ҙຯͰ͸˓ɻΩϟογϡͱ͔ը ૾ͷ࠷దԽͱ͔… ViewΛRails͔Β੾Γ཭͠ɺ Nuxt.js(Vue.js)ʹΑΓϞμϯͳ ؀ڥΛ࣮ݱɻ Nuxt.jsʹΑΓن໿Λɻ VuexͱAtomic DesignʹΑΓઃܭ ϧʔϧΛɻ ݱ࣌఺ͰͷධՁ
  108. ·ͱΊ ࠾༻ͯ͠Α͔ͬͨ ʙ note Nuxt.jsҠߦνʔϜҰಉ ʙ

  109. ϦϦʔεϊʔτެ։த URL: https://note.mu/noteeng/m/me7637ba82821 RSS: https://note.mu/noteeng/m/me7637ba82821/rss

  110. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞืूͯ͠·͢ ٸ੒௕தͷʮnoteʯͷϑϩϯτΤϯυΛ࡮৽͢ΔΤϯδχΞΛืूʂ https://www.wantedly.com/projects/208206