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

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

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