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
210
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.1k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.5k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
850
サーバーレスで始める ゆるふわデータ基盤 - 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
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
130
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
270
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
370
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.6k
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
330
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.5k
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
760
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
360
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
170
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
110
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
680
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Faster Mobile Websites
deanohume
308
31k
Become a Pro
speakerdeck
PRO
29
5.4k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Optimizing for Happiness
mojombo
379
70k
Making Projects Easy
brettharned
116
6.3k
Thoughts on Productivity
jonyablonski
69
4.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Adopting Sorbet at Scale
ufuk
77
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Practical Orchestrator
shlominoach
189
11k
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