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
230
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.2k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.6k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
860
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
8k
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
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
540
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
slog.Handlerのよくある実装ミス
sakiengineer
4
470
メルカリIBISの紹介
0gm
0
220
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Producing Creativity
orderedlist
PRO
347
40k
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