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
54k
noteをNuxt.jsで再構築した話
2018-11-03にVueFesJapan2018にてお話しました
Retu Fukui
November 03, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
4.6k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
4.6k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
650
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
5.8k
191109_sacss.pdf
fukuiretu
1
2.2k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
10k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.5k
181117_wannatech.pdf
fukuiretu
1
480
フロントエンド刷新中のnoteの開発環境について
fukuiretu
6
7.6k
Other Decks in Technology
See All in Technology
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
地理情報とAPIのトレンド
nagix
0
160
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
スレットハンティングについて知っておきたいこと
hacket
0
130
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
GraphQLとの向き合い方2022年版
quramy
36
13k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Agile that works and the tools we love
rasmusluckow
325
20k
It's Worth the Effort
3n
181
27k
BBQ
matthewcrist
82
9k
Adopting Sorbet at Scale
ufuk
71
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Debugging Ruby Performance
tmm1
71
11k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Making Projects Easy
brettharned
111
5.7k
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