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
510
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
150
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.6k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.4k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
760
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.7k
191109_sacss.pdf
fukuiretu
1
2.3k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
noteをNuxt.jsで再構築した話
fukuiretu
22
56k
Other Decks in Technology
See All in Technology
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
サバイバルモード下でのエンジニアリングマネジメント
konifar
8
1.8k
クラウド食堂とは?
hiyanger
0
120
事業を差別化する技術を生み出す技術
pyama86
2
440
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
110
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
340
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
490
OPENLOGI Company Profile
hr01
0
60k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
140
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
130
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Navigating Team Friction
lara
183
15k
Building Applications with DynamoDB
mza
93
6.2k
Being A Developer After 40
akosma
89
590k
A designer walks into a library…
pauljervisheath
205
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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