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
57k
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
230
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.2k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.6k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
870
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
8k
191109_sacss.pdf
fukuiretu
1
2.4k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.7k
181117_wannatech.pdf
fukuiretu
1
540
Other Decks in Technology
See All in Technology
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
150
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
Where will it converge?
ibknadedeji
0
120
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
580
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
バイブコーディングと継続的デプロイメント
nwiizo
2
400
Pure Goで体験するWasmの未来
askua
1
170
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
270
about #74462 go/token#FileSet
tomtwinkle
1
280
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
140
Green Tea Garbage Collector の今
zchee
PRO
2
380
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Fireside Chat
paigeccino
40
3.7k
GitHub's CSS Performance
jonrohan
1032
460k
Practical Orchestrator
shlominoach
190
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Context Engineering - Making Every Token Count
addyosmani
5
170
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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