Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
noteをNuxt.jsで再構築した話
Search
Retu Fukui
November 03, 2018
Technology
22
56k
noteをNuxt.jsで再構築した話
2018-11-03にVueFesJapan2018にてお話しました
Retu Fukui
November 03, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜
fukuiretu
0
150
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.6k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.4k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
750
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.7k
191109_sacss.pdf
fukuiretu
1
2.3k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
181117_wannatech.pdf
fukuiretu
1
510
Other Decks in Technology
See All in Technology
手を動かしてレベルアップしよう!
maruto
0
210
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
600
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
110
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
150
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
140
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
OPENLOGI Company Profile for engineer
hr01
1
20k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
170
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Done Done
chrislema
182
16k
Producing Creativity
orderedlist
PRO
344
40k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Designing for Performance
lara
604
68k
Statistics for Hackers
jakevdp
797
220k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Cult of Friendly URLs
andyhume
78
6.2k
A Tale of Four Properties
chriscoyier
158
23k
The Language of Interfaces
destraynor
156
24k
Thoughts on Productivity
jonyablonski
69
4.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
noteΛNuxt.jsͰ࠶ߏஙͨ͠ VueFesJapan2018 Ҫ (@fukuiretu)
Ҫ (@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
͍͔ͭ੨ͰVue.jsͷ ΠϕϯτΓ͍ͨ
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ • จষɺࣸਅɺΠϥετͳͲͷ࡞Λߘ͢ Δ͜ͱ͕Ͱ͖Δ • ߘͨ͠࡞Λ؆୯ʹൢച͢Δ͜ͱ͕ Ͱ͖Δ ͩΕ͕࡞Λ͡Ίɺ ଓ͚ΒΕΔΑ͏ʹ͢Δɻ
ࠓ͓͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
ࠓ͓͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
։ൃ࣌ͷϑϩϯτΤϯυ 2013. 7 2013. 10 2013. 12 React.js v0.3 Angular.js
v1.2.3rc Vue.js v0.6 2014. 4 note։ൃ ~ ϦϦʔε noteAngular.jsΛબ (࣌ຊͰBackbone.js͕ओྲྀ)
Angular.jsΛબͨ͠ཧ༝ • UI͕ͦΕͳΓʹෳࡶ • 2-way bindingັྗత • αʔόαΠυAPIʹઐ೦ • ωΠςΟϒΞϓϦͷߟྀ
• ΤϯδχΞ࠾༻త • ࣌ίϯγϡʔϚ͚Ͱ͔ͬͨ͠
ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1ܥ • CoffeeScript • HAML
• Backend • Ruby on Rails • Infrastructure • AWS
ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1.4ܥ • CoffeeScript • HAML
• Backend • Ruby on Rails 4.2ܥ • Capistrano • Infrastructure • AWS Client Side Rendering only Single Page Application
Կ͕՝͔
՝ • ॳظදࣔͷ͞ • εϖοΫͷ͍Ͱݦஶʹ • ٕज़త੍ • Angular.js1ܥSSRΛαϙʔτ͍ͯ͠ͳ͍ •
Railsͷ্ʹͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن • ίϯϙʔωϯτઃܭ
ෛ࠴ͱͳ͍ͬͯΔίʔυͷҰྫ
طଘͷٕज़ͷԆͰղܾ͕ ࠔͳঢ়گ
දࣔਖ਼ٛ
දࣔਖ਼ٛ
ܦӦࢹͰͷϑϧϦχϡʔΞϧ ελʔτΞοϓͷنͰ ͳ͔ͳ͔౿ΈΕͳ͍ͷ͕Ұൠత
ܦӦࢹͰͷϑϧϦχϡʔΞϧ ֶੜ࣌ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब
ܦӦࢹͰͷϑϧϦχϡʔΞϧ ֶੜ࣌ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब ҙ֎ͱ͋ͬ͞ΓͱGoαΠϯ
͜͏ͯ͠ ϑϩϯτΤϯυΛશ໘తʹ ৽͢ΔํͰݕ౼ (2018/03)
ٕज़બఆཁ݅ͷચ͍ग़͠ • Server Side Rendering (Ҏ߱SSR) • ֶश/ӡ༻ίετ • σβΠφʔͷྀ
• ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘ϝϯςφ ϒϧʹ • ։ൃ/ίϛϡχςΟͷ׆ൃ͞
ީิͱ͕ͯ͋ͬͨ͠બࢶ 1.Express + VanillaJS 2.React.js 3.Angular 4.Vue.js
ީิͱ͕ͯ͋ͬͨ͠બࢶ 1. Express + VanillaJS 2. React.js 3. Angular 4.
Vue.js ܦ͞ΜͷࣄྫΛࢀߟʹ
͕͔ͩ͠͠… • ϑϩϯτΤϯυͷॲཧ͕ଟ͍ • ΠϯλϥΫςΟϒͳUIͦͦ͋͜͜Δ • ։ൃޮ্͕͕Βͣʹஅ೦
ީิͱ͕ͯ͋ͬͨ͠બࢶ 1.Express + VanillaJS 2.React.js 3.Angular 4.Vue.js CTOͷਓʹVue.jsʹਫ਼௨͍ͯ͠Δํ͕ଟ ͘ɺનΊΒΕͨͷ͕͖͔͚ͬ
࠾༻
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶃ • Vue Server RendererʹΑΔSSRͷαϙʔτ • Virtual DOMʹΑΔޮతͳࠩߋ৽ • ίϯϙʔωϯτࢦ
• Single File Components • Scoped CSS ࣮ߦͱ։ൃޮͷཱ྆
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶄ • template͕HTMLͰॻ͚Δ • σβΠφʔʹ༏͍͠ • HAML < HTMLͩͱฉ͍͍ͯͨ •
ߏจ(v-xxx)͕Angular.js(ng-xxx)ͱ͍ۙ͠ ֶशίετͷ͞ͱ͠Έ͢͞
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶅ • ࠔͬͨΒެࣜͷυΩϡϝϯτΛݟΕ େ֓ղܾ͢Δ • ຊޠϩʔΧϥΠζ൛͕༻ҙ͞Ε͍ͯΔ υΩϡϝϯτͷॆ࣮
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶆ • ษڧձΠϕϯτͷଟ͞ = ใྔ͕ଟ͍ • ௐΕใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ ҆৺ײ ࠃίϛϡχςΟͷ׆ൃ
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ • ͱ͋Δ@kitak͞Μͱ͍͏ํ • ࣮ͷQ & A • ઃܭͷαϙʔτ •
ϋϯζΦϯ։࠵ʹΑΔجૅ্ࣝ Vue.jsͷΤΩεύʔτ͕ίϯαϧʹ
Nuxt.js??
Nuxt.jsΛ৮Δ͖͔͚ͬ • Vue.jsͰSSR͢Δ߹Ͳ͏͢Εʁ • Nuxt.jsΛ͏ͱ؆୯ʹͰ͖ΔΒ͍͠... • ݕূͯ͠ΈͨΒͬ͘͞ͱSSR͕Ͱ͖ͨ… • kitak͞ΜSSR͢ΔͳΒNuxt.js͍͍ͧͱݴͬ ͍ͯͨ͠...
࠾༻
Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶃ • SSR͕؆୯ʹ • pagesԼʹίϯϙʔωϯτΛஔ͘ • asyncData() / fetch() ͰඞཁͳσʔλΛఆٛɾऔಘ͢Δ
• DIRߏ, ϧʔςΟϯάͷࣗಈੜ, ϓϥάΠϯ ػߏ etc.. ن͕खʹೖΔ
Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ • Vue.jsͷΤίγεςϜΛϏϧτΠϯ • Vue Router, Vuex, Vue Server Renderer,
vue-meta • Ϗϧυ(webpack)Α͠ͳʹ • minify, jsϑΝΠϧׂ, cssͷΠϯϥΠϯԽ, τϥϯεύΠϧ, preload etc… Ϟμϯͳڥ͕खʹೖΔ
͍͖ͬͯએݴ Nuxt.jsҠߦϓϩδΣΫτ͕ελʔτ (2018/4)
ࠓ͓͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
৽ͷํ • طଘͷRailsαʔόAPI༻్Ͱ͜Ε·Ͱ௨Γར༻ • ViewΛNuxt.js(ϨϯμϦϯάαʔό)Ҡߦ
Ҡߦखॱ • طଘUIΛ࣮֬ʹҠߦͤ͞Δ • େ෯ͳUI/UXͷվमؚΊͳ͍ • ϖʔδຖʹύε(URL)ϕʔεͰLBͰৼΓ͚Δ • ͚ࣾϦϦʔε ⇢
Dog Fooding ⇢ Ұൠެ։
։ൃମ੍ • ΤϯδχΞ: 3໊ • σβΠφʔ: 2໊(ଞϓϩδΣΫτͱ݉) • ि1ͰMTG •
ใڞ༗Crowi(ࣾWiki)Ͱ
ۤ࿑ϙΠϯτ • ฒߦͯ͠ݱߦ൛(Angular.js)ͷվमผνʔϜ Ͱʑଓ͍͍ͯΔ • Ҡߦ͕શʹྃ͢Δ·Ͱೋॏϝϯς
201811݄3ஈ֊Ͱͷਐḿ ͓͢͢ΊҰཡ ݕࡧ https://note.mu/recommend_nuxt https://note.mu/search_nuxt ຊ൪Քಇத (υοάϑʔσΟϯά༻ͷΤΠϦΞε)
201811݄3ஈ֊Ͱͷਐḿ هࣄৄࡉ https://note.mu/notedemo/n/n81f8264b9b9e ຊ൪Քಇத (σϞ༻ΞΧϯτͷΈ)
201811݄3ஈ֊Ͱͷਐḿ • શମͷنײ • ίϯϙʔωϯτ: 216 • LOC: 43672 •
*.vue: 36153 • *.js: 6823 • *.scss: 696 more... (2018/4 ~)
ݱ࣌Ͱͷ ύϑΥʔϚϯεൺֱ
Lighthouseͷൺֱ Angular.js൛ Nuxt.js൛
WebPageTestͷൺֱ Angular.js൛ Nuxt.js൛ ݅ From: Tokyo, Japan - EC2 -
Chrome - Emulated iPhone X - 3GFast - Mobile Start Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ Speed Index = ίϯςϯπ͕ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
·ͩ·ͩຬͰ͖Δ ϨϕϧͰͳ͍͕ ࣮֬ʹΧΠθϯ͍ͯ͠Δ
ࠓ͓͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
͓ॻ͖ • ։ൃڥ • ίϯϙʔωϯτઃܭ • ϢχόʔαϧJavaScript • ϑΝΠϧαΠζͷѹॖ •
Polyfill • Infrastructure
։ൃڥ
։ൃڥ • Nuxt.js v2.2.0 • Jest • ESLint (vue/recommended) •
Prettier • CircleCI • Sentry
ίϯϙʔωϯτઃܭ
Angular.js൛ͷίϯϙʔωϯτ • directiveΛར༻͠ɺίϯϙʔωϯτϕʔεͰ ։ൃ • ཻʹϧʔϧ͕ͳ͍ • ཻ࣮ऀͷԘക • ނʹॏෳίʔυ͕ࢄࡒ
• props(scope)ͷόέπϦϨʔ͕ਏ͍ Կ͔͠ΒͷΈͱϧʔϧ͕ཉ͍͠
Vuex & AtomicDesign
Vuexͷओͳϧʔϧ • ϞδϡʔϧϞʔυΛ࠾༻ • mutaions/actions/getttersͷλΠϓʹఆΛ༻ • grepability • ΤσΟλͷิ •
ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷஅج४ A. ίϯϙʔωϯτΛ͑ͯڞ༗͍ͨ͠ͷ͕͋Δ (͍ΘΏΔόέπϦϨʔରࡦ) B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ͍ํ C. APIݺͼग़͠
ঢ়ଶཧʹடং͕
VuexϞδϡʔϧͷංେԽ 845ߦ....
Nuxt.js v2.0.0
VuexϞδϡʔϧͷϦϑΝΫλ • ͓खܰʹݟ௨͠ྑ͘͢Δ͜ͱ͕Ͱ͖Δ • ංେԽ͢Δͷॲཧ͕ूத͢Δactions • ߃ٱతʹػೳ୯ҐͰϞδϡʔϧׂ Ͱ͖ͳ͍͔ݕ౼ 461ߦ
Atomic Designͱ ίϯϙʔωϯτΛ̑ͭͷϨΠϠʔʹྨ͠ ίϯϙʔωϯτͷΈ߹ΘͤͰ ϖʔδΛߏ͍ͯ͘͠ઃܭख๏ • Atomic Design http://atomicdesign.bradfrost.com/
σΟϨΫτϦߏ
࠷ॳͱʹ͔͘ख୳Γ શһͰίϯϙʔωϯτ͚ͯ͠ೝࣝΛͦΖ͑Δ
Atomsͷϧʔϧ • ෦ʹଞͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Stateless • VuexϞδϡʔϧͷࢀরېࢭ •
σʔλͷemit
Moleculesͷϧʔϧ • ෦ʹAtomsҎ֎ͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Statelessਪ ▪ ঢ়گʹΑͬͯlocal state(data)Մ
• VuexϞδϡʔϧͷࢀরېࢭ • σʔλͷemit
Organismsͷϧʔϧ • ෦ʹOrganismsҎ্ͷίϯϙʔωϯτΛؚ· ͳ͍ʢਪʣ • ࠶ར༻ੑՃຯ͠ͳͯ͘ྑ͍ • StatefulͰΑ͍ • VuexϞδϡʔϧΛࢀরͰ͖Δ
ྨͨ͠ίϯϙʔωϯτͷҰྫ Atoms Molecules Organisms
ΠϯεύΠΞ 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
Atomic DesignͷಋೖޮՌ • ֤ϨΠϠʔͷ͕͋Δఔ໌֬ʹ • ֤ϨΠϠʔʹ໊শ͕͋Δ͜ͱͰίϛϡχέʔγϣ ϯ͕ԁʹ ͜Εͬͯ.PMFDVMFTͰ ͋Δ͖͡Όͳ͍ʁ ͏ʔΜɺOrganisms
ͰΑͦ͞͏͚ͩͲ
ίϯϙʔωϯτͷࢹೝੑ ୭ѲͰ͖͓ͯΒͣ
Storybook https://storybook.js.org/
ίϯϙʔωϯτͷՄࢹԽ • Ұ࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ௨৴पΓͷελϒԽ
ίϯϙʔωϯτͷՄࢹԽ • Ұ࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕໘ • VuexϞδϡʔϧ௨৴पΓͷελϒԽ
Nuxt.jsͱͷઃఆपΓͷޓੑ Storybook v4.0.0 Nuxt.js v2Ͱ͍͚Δ • ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ௨৴पΓͷελϒԽ ରΛAtomsͱMoleculesʹߜΔ
ग़དྷ্͕ͬͨStorybook ڧ͍ؾ࣋ͪΛ͍ͬͯͬͯͧ͘
ϢχόʔαϧJavaScript
ϢχόʔαϧJavaScriptͱ • ΫϥΠΞϯτʢϒϥβʣͱαʔό ʢNode.jsʣͷͲͪΒͰ࣮ߦͰ͖Δίʔυ • SSRʹ͓͍ͯରԠඞਢ
SSR࣌ʹwindow, document͕ undefined • DBʹอଘ͞ΕͨهࣄͷHTML ΛΫϥΠΞϯτͰDOMૢ࡞ ▪ document.xxxͬͯΔ • ↑Λv-htmlͰల։
⾠هࣄϖʔδͰ࣮ࡍʹى͖ͨ ίί
SSR࣌ʹwindow, document͕ undefined DOMͷAPIͱޓੑͷ͋ΔHTMLύʔα jsdom/jsdom https://github.com/jsdom/jsodom
SSR࣌ʹwindow, document͕ undefined
ແࣄSSR͕Ͱ͖ͨ
SSRͷϥΠϑαΠΫϧ αʔόɺϒϥβͲͪΒ௨ա͢Δ (ϢχόʔαϧରԠ͕ඞཁͳ)෦
ϑΝΠϧαΠζͷѹॖ
bundleϑΝΠϧͷੳ OVYUCVJMEBOBMZ[F
ੳ݁ՌΛड͚ͯ • highlight.js • codeͷγϯλοΫεϋΠϥΠτʹར༻ • શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ • ରԠݴޠΛߜͬͯ57KBʹ •
moment.js • λΠϜκʔϯͷߟྀෆཁͩͬͨͷͰܰྔͳdate-fns • dayjs͞ΒʹܰྔͳͷͰͦͪΒͰྑ͍͔? • lodash.js • PolyfillͰेΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ
Polyfill
Polyfill.io https://polyfill.io
Polyfill.ioͱ • UserAgentຖʹඞཁͳPolyfill͚ͩΛ·ͱΊͯฦ ͯ͘͠ΕΔ • ඞཁͳPolyfillΦϓγϣϯͰࡉ͔͘ௐՄೳ • Fastly(CDN)͔Β৴͞ΕΔͷͰඇৗʹߴ
Polyfill.ioͱ
࠾༻ͷϞνϕʔγϣϯ • ͱͱbabel-preset-envͰઃఆ͍ͯͨ͠ • ϒϥβຖͷAPIରԠঢ়گΛࢹͯ͠ཧ͢Δ ͷखؒ
e.g. ChromeͱSafariͷPolyfill Chrome/69.0.3497.1 Safari/605.1.15
Infrastructure
Nuxt on Lambda
AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service •
ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ
Serverless Framework • ߏཧσϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛ • AWSͷଞɺAzure Functions, Google
Cloud FunctionʹରԠ͍ͯ͠Δ
࠾༻ͷϞνϕʔγϣϯ • ॳEC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠ ◦ Node.jsͷӡ༻ϊϋ0 ◦
Կ͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ ◦ AWS LambdaͷػӡͰʁͱ͍͏ࡶஊ͔Βελʔτ
ͬ͘͟ΓLambda্ͷಈ࡞ͷΈ • awslabs/aws-serverless-express Λར༻͠ expressΛಈ͔͢ • Nuxt.jsΛexpressͷmiddlewareͱͯ͠ಈ͔͢ • ref: API:
nuxt.render(req, res)
ৄ͘͠mya-ake͞ΜͷϒϩάͰ Nuxt.js on AWS Lambda with Serverless Framework https://mya-ake.com/posts/nuxtjs-on-aws-lambda
αʔόߏ https://note.mu/recommend https://note.mu/recommend_nuxt
ӡ༻ָʹͳΔ …͕͍͔ͭ͘τϨʔυΦϑ
τϨʔυΦϑ • Node.jsͷversion͕Lambdaʹґଘͯ͠͠·͏ • ݱঢ়v8.10.0 • Nuxt.jsͷ࠷৽versionʹैͰ͖ͳ͘ͳΔՄೳੑ • LambdaʹσϓϩΠग़དྷΔύοέʔδ༰ྔͷ ࠷େ͕50MB
• ݱ࣌Ͱ32MB • cold startʹΑΔϨΠςϯγͷѱԽ
ࠓ͓͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
·ͱΊ • ϝϦοτ • طଘͷݴޠϑϨʔϜϫʔΫͷ੍ʹറ ΒΕͳ͍ • υοάϑʔσΟϯά͕༰қʹͰ͖Δ • ϩʔϧόοΫ͕༰қʹͰ͖Δ
• σϝϦοτ • શҠߦ͢Δ·Ͱ2ॏϝϯςʹͳΓ͏Δ ύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ༗ޮ
·ͱΊ • SSR͕ඞཁͳΒಋೖ͠ͳ͍खͳ͍ • ಋೖ؆୯ֶ͕ͩश/ӡ༻ίετ͕͋Δ • ϢχόʔαϧରԠ • Node.jsͷӡ༻ •
τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda༗༻ • SSR͕ຊʹඞཁ͔Ͳ͏͔ཁݕ౼ • SPAϞʔυ (mode: ‘spa’) • ੩తαΠτ (nuxt generate) SSRͷಋೖຊʹ؆୯
·ͱΊ • ίετΛ͔͚ͣʹϞμϯͳ։ൃڥ͕खʹೖΔ ⇢ ͙͢ʹΓग़ͤΔ • ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛ ॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ
• VuexͷऔѻίϯϙʔωϯτͷཻͳͲ Nuxt.js͕ؔ༩͠ͳ͍෦ͷϧʔϧࡦఆผ్ ඞཁ ڥج൫ͷαϙʔτɺن͕ඇৗʹڧྗ
՝ • ॳظදࣔͷ͞ • εϖοΫͷ͍Ͱݦஶʹ • ٕज़త੍ • Angular.js1ܥSSRΛαϙʔτ͍ͯ͠ͳ͍ •
Railsͷ্ʹͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن • ίϯϙʔωϯτઃܭ ॳظදࣔͷ͞ ٕज़త੍ ٕज़తෛ࠴ Nuxt.jsʹཔΕΔ෦ͱ͍͏ ҙຯͰ˓ɻΩϟογϡͱ͔ը ૾ͷ࠷దԽͱ͔… ViewΛRails͔ΒΓ͠ɺ Nuxt.js(Vue.js)ʹΑΓϞμϯͳ ڥΛ࣮ݱɻ Nuxt.jsʹΑΓنΛɻ VuexͱAtomic DesignʹΑΓઃܭ ϧʔϧΛɻ ݱ࣌ͰͷධՁ
·ͱΊ ࠾༻ͯ͠Α͔ͬͨ ʙ note Nuxt.jsҠߦνʔϜҰಉ ʙ
ϦϦʔεϊʔτެ։த URL: https://note.mu/noteeng/m/me7637ba82821 RSS: https://note.mu/noteeng/m/me7637ba82821/rss
͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞืूͯ͠·͢ ٸதͷʮnoteʯͷϑϩϯτΤϯυΛ৽͢ΔΤϯδχΞΛืूʂ https://www.wantedly.com/projects/208206