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

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ϑΝΠϧͷ෼ੳ 
    OVYU
    CVJME
    Š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