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
490
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
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.2k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.1k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
690
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.4k
191109_sacss.pdf
fukuiretu
1
2.3k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
12k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
noteをNuxt.jsで再構築した話
fukuiretu
22
56k
フロントエンド刷新中のnoteの開発環境について
fukuiretu
6
7.6k
Other Decks in Technology
See All in Technology
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
170
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
860
いまさらのStorybook
ikumatadokoro
0
150
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
Fargateを使った研修の話
takesection
0
120
フルカイテン株式会社 採用資料
fullkaiten
0
36k
APIテスト自動化の勘所
yokawasa
7
4.2k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
It's Worth the Effort
3n
183
27k
Gamification - CAS2011
davidbonilla
80
5k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How GitHub (no longer) Works
holman
311
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
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