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
47k
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
450
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
1
480
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
630
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
1.6k
191109_sacss.pdf
fukuiretu
1
2.1k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
4.7k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.4k
181117_wannatech.pdf
fukuiretu
1
470
フロントエンド刷新中のnoteの開発環境について
fukuiretu
6
7.5k
Other Decks in Technology
See All in Technology
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
190
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
420
Azureの基本的な権限管理の勉強会
yhana
1
2.2k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.3k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
360
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
310
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
700
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
120
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
3
2k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
950
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Making Projects Easy
brettharned
109
5.5k
Docker and Python
trallard
35
2.7k
Practical Orchestrator
shlominoach
183
9.7k
How to train your dragon (web standard)
notwaldorf
75
5.2k
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