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
220
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.1k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.5k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
860
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.9k
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
530
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
120
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
140
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
100
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
280
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
The Language of Interfaces
destraynor
158
25k
Faster Mobile Websites
deanohume
308
31k
Six Lessons from altMBA
skipperchong
28
3.9k
A Tale of Four Properties
chriscoyier
160
23k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Why Our Code Smells
bkeepers
PRO
337
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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