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
181117_wannatech.pdf
Search
Retu Fukui
November 17, 2018
Technology
1
530
181117_wannatech.pdf
2018/11/17(土) We wanna Tech@青森でお話ししてきました
Retu Fukui
November 17, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜
fukuiretu
0
200
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.5k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
830
サーバーレスで始める ゆるふわデータ基盤 - 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
noteをNuxt.jsで再構築した話
fukuiretu
22
57k
Other Decks in Technology
See All in Technology
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
570
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
320
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
本が全く読めなかった過去の自分へ
genshun9
0
560
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
290
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
253
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Agile that works and the tools we love
rasmusluckow
329
21k
Building an army of robots
kneath
306
45k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
BBQ
matthewcrist
89
9.7k
Transcript
We wanna Tech@੨ Ҫ (@fukuiretu) Troubleshoot Nuxt on Lambda
Ҫ (@fukuiretu) • piece of cake, inc. • since
2015.3~ • Web Engineer ◦ Rails occasionally AWS ◦ Recently Frontend ◦ Nuxt.js ◦ Serverless Framework • Live in Aomori ◦ RemoteWorker
WIP noteͷϑϩϯτΤϯυΛNuxt.js৽͠·͢ https://note.mu/konpyu/n/n9b7bf4343514
VueFesJapan2018 (2018.11.3) noteΛNuxt.jsͰ࠶ߏஙͨ͠ͱ͍͏λΠτϧͰ͓͖ͯ͠·ͨ͠ https://note.mu/r82/n/ne217ba36d233
ΞϑλʔύʔςΟͰଟ͔࣭ͬͨ Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ ϋϚΓͲ͜Ζͱ͔ͳ͔ͬͨͰ͔͢??
͋Γ·ͨ͠ ઌਓͷܙ(@mya_ake san)͕͋ͬͨͷͰ ଟ͘ͳ͍͚Ͳ
ࠓ͓͢Δ͜ͱ noteʹ͓͚Δ Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ ൃੜͨ͠ͱͦͷରॲʹ͍ͭͯ ͓͠·͢
αʔόߏ https://note.mu/recommend https://note.mu/recommend_nuxt ͍ΘΏΔαʔόϨεΞʔΩςΫνϟ
ຊʹೖΔલʹ ओͳొਓΛͬ͘͟Γհ
ओͳొਓ • Nuxt.js • AWS API Gateway • AWS Lambda
• Serverless Framework
Nuxt.js ϢχόʔαϧͳVue.jsΞϓϦέʔγϣϯΛ ߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Server Side Rendering (SSR)ͷαϙʔτ • ϧʔςΟϯάͷࣗಈੜ
• ϝλσʔλͷੜ • ঢ়ଶཧ • webpackʹΑΔϏϧυΛαϙʔτ
AWS API Gateway • WebAPIΤϯυϙΠϯτͷ࡞ɾཧ͕Ͱ͖Δ • όοΫΤϯυʹAWS LambdaΛར༻Ͱ͖Δ • ैྔ՝ۚ
AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service •
ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ
Serverless Framework • ߏཧσϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛ • AWSͷଞɺAzure Functions, Google
Cloud FunctionʹରԠ͍ͯ͠Δ
Nuxt on Lambdaͷͬ͘͟ΓΈ AWS Lambda্ͰexpressΛಈ͔͠ɺ Nuxt.jsΛexpressͷmiddlewareͱͯ͠ ಈ͔͢͜ͱͰ࣮ݱ
ൃੜͨ͠ͱͦͷରॲ
ൃੜͨ͠ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍
ൃੜͨ͠ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍
cold startͱ શ෦ڭ͑·͢ʂαʔόϨεΞϓϦͷΞϯνύλʔϯͱνϡʔχϯά https://d0.awsstatic.com/events/jp/2017/summit/devday/D4T7-2.pdf
cold startͷൃੜ݅ શ෦ڭ͑·͢ʂαʔόϨεΞϓϦͷΞϯνύλʔϯͱνϡʔχϯά https://d0.awsstatic.com/events/jp/2017/summit/devday/D4T7-2.pdf
cold startରࡦ Tune Up AWS Lambda https://www.slideshare.net/keisuke69/tune-up-aws-lambda
ॳͷఆ ศརpluginͰ͕ͯ͢ղܾ͢Δ༧ఆͩͬͨ…
ͱ͜Ζ͕… ಉVPCʹઃஔ
ͱ͜Ζ͕… VPCͰLambdaΛ༻͍ͯ͠Δ߹ɺ ཁNAT Gateway
ͱ͜Ζ͕… 1ϲ݄(30)Ͱ¥5,000
ࣗલͰ༻ҙ͢Δ͜ͱʹ
ࣗલͰ༻ҙᶃ 5ஔ͖ʹwarmup༻ͷendpointΛୟ͘Lambdaؔ
ࣗલͰ༻ҙᶄ deploy༻script(Shell)Ͱdeployޙʹ warmup༻ͷendpointΛcurlͰୟ͘Α͏ʹͨ͠
ࣗલͰ༻ҙᶅ • Nuxt.jsͷmiddlewareͱͯ͠ಈ࡞ • status: 200, ContentType: text/plain ͰOKΛฦ͚ͩ͢ •
ݩʑELBͷϔϧενΣοΫ༻్Ͱར༻͍ͯͨ͠ • warmup༻ͷendpointͱͯ͠ར༻ • (खલຯḩͰ͍͢·ͤΜ)
serverless-warmup-plugin ͱಉͷͷΛࣗ࡞͠ cold startରࡦ͕Ͱ͖ͨ (݄¥5,000͔͚ͣʹࡁΜͩ)
ൃੜͨ͠ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍
αʔόߏ https://note.mu/recommend https://note.mu/recommend_nuxt αʔόؒ௨৴
Nuxt.js ~ Rails·Ͱͷ௨৴ͷྲྀΕ Lambda(Nuxt.js)͔ΒHTTP Request(axios)Λ͛Δ EC2(Rails)ʹͯNginxͰHTTP RequestΛड͚Δ Nginx͔ΒRailsϦόʔεϓϩΩγ͢Δ
NginxͰ 400 Request Header Or Cookie Too Large ൃੜ
ͳ͔ͥ •X-Apigateway-Event •X-Apigateway-Context 10KB • API Gateway͕Lambdaݺͼग़࣌͠ʹHeaderʹ༩͢Δ • ϦΫΤετύϥϝʔλCookieͷใ͕٧·ͬͯΔ
Ͳ͏͢ΕΑ͍͔ A. Nginxͷlarge_client_header_buffersΛ૿͢ B. Nuxt.js(Lambda) ~ Rails(EC2)ͰෆཁͳͷͰ HTTP RequestΛ͛Δલʹheader͔Βআ͢Δ BΛબ
Nuxt.js(Lambda) ~ Rails(EC2) ͷHTTP௨৴͕Ͱ͖ͨ
ൃੜͨ͠ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍
Ϟνϕʔγϣϯ Nuxt.jsͷSSR࣌ʹ(Lambda্͔Β) Request HeaderͷHostΛ ϦΫΤετ࣌ͷϗετͱͯ͠ॲཧ͍ͯ͠Δ ϩδοΫ͕͋Δ
ଞʹํ๏͋ΔͷͰʁ A. ڥมʹڥ͝ͱͷϗετΛఆ͓ٛͯ͘͠ B. ڥ͝ͱͷconfigΛ༻ҙͯ͠ಈతʹಡΉ͜Ή
ଞʹํ๏͋ΔͷͰʁ A. ڥมʹڥ͝ͱͷϗετΛఆ͓ٛͯ͘͠ B. ڥ͝ͱͷconfigΛ༻ҙͯ͠ಈతʹಡΉ͜Ή noteಠࣗυϝΠϯ͕ར༻Ͱ͖ΔͷͰ ݻఆʹͳΒͳ͍ e.g. www.pieceofcake.co.jp diehardtales.com
mm.hyuki.net
API GatewayҎ֎ͷ߹ Host: note.mu Host: note.mu Host: note.mu ϦΫΤετ࣌ͷϗετ (note.mu)͕औಘͰ͖Δ
API GatewayҎ֎ͷ߹ CloudFrontͷBehaviorsͷઃఆΑΓɺ Cache Based on Selected Request Headers Λ
ALL ·ͨ Whitelist Ͱ Host
ಉ͡Α͏ʹAPI GatewayͰ ࢼͯ͠ΈΔͱ…
API Gatewayʹ proxy͞Εͳ͍
Amazon CloudFrontͰAPI Gatewayͷᙱ͍ͱ͜ΖʹखΛಧ͚Δ https://dev.classmethod.jp/cloud/cache-api-gateway-by-cloudfront ҆ఆͷΫϥϝι͞Μ
Ͳ͏ͨ͠Β ϦΫΤετ࣌ͷϗετ͕ औಘͰ͖ΔΜͩΖ͏͔
AWSެࣜϑΥʔϥϜʹٹ͍ͷҰख Lambda@Edge!!!!! https://forums.aws.amazon.com/message.jspa?messageID=682411
Lambda@Edge • CloudFront্ͰҎԼͷ͍ͣΕ͔ͷΠϕϯτΛϑο Ϋͯ͠LambdaΛ࣮ߦ͢ΔαʔϏε • Ϗϡʔϫʔ͔ΒϦΫΤετΛड৴ͨ͠ޙ • ϦΫΤετΛΦϦδϯʹసૹ͢Δલ • ΦϦδϯ͔ΒϨεϙϯεΛड৴ͨ͠ޙ
• ϏϡʔϫʔʹϨεϙϯεΛసૹ͢Δલ • 2017/7ʹҰൠఏڙ։࢝
API Gatewayͷ߹ͷྫ Host: note.mu Host: xxx.cloudfront.net X-Forwarded-Host: note.mu ϦΫΤετ࣌ͷϗετ (note.mu)͕औಘͰ͖Δ
HostΛX-Forwarded-Hostʹ٧ΊΔ Host: xxx.cloudfront.net X-Forwarded-Host: note.mu ϏϡʔϫʔϦΫΤετΛϑοΫ
API Gatewayͷ߹ͷྫ express Nuxt.js
CloudFront ~ API Gateway ~ Lambda ͷߏͰϦΫΤετ࣌ͷ Host͕औಘͰ͖ͨ
Lambda@Edge ར༻࣌ͷҙ • όʔδϣϯ͖ͭͷLambdaؔͷARNΛઃఆ͢Δඞཁ͕͋Δ • όʔδχΞ(us-east-1)Ϧʔδϣϯʹஔ͢Δඞཁ͕͋Δ • ֤ϦʔδϣϯʹϨϓϦΧ͕࡞ΒΕ࣮ͯߦ͞ΕΔ • ಈ࡞ͤͨ͞ΤοδϩέʔγϣϯʹΑͬͯϩάग़ྗ͞ΕΔϦʔδϣ
ϯ͕ܾ·Δ • ڥมར༻ෆՄ • ௨ৗͷLambdaಉ༷ʹεϩοτϦϯά͕ൃੜ͢ΔͨΊΞΫη εΛߟྀΛ͢Δඞཁ͕͋Δ
·ͱΊ
·ͱΊ • ैདྷͷΞʔΩςΫνϟͱύϥμΠϜ͕ҟͳΔͷͰ વͳ͕Βॳݟͷଟ͍͠ɺ͓ͦΒ͘͜ͷઌ … • ӡ༻͕ܰݮ͞ΕΔͷେ͖͍ • ϓϩηεཧ •
Φʔτεέʔϧ • ॳݟͷͱ͖߹͏ڧ͍ؾ͕࣋ͪ͋ΔͳΒ αʔόϨεΞʔΩςΫνϟ͍͍ͧ
Special Thanks Naoto Ishizawa (@youyo_)
͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞืूͯ͠·͢ ٸதͷʮnoteʯͷϑϩϯτΤϯυΛ৽͢ΔΤϯδχΞΛืूʂ https://www.wantedly.com/projects/208206