181117_wannatech.pdf - Speaker Deck

181117_wannatech.pdf

by Retu Fukui

Slide 1

Slide 1 text

We wanna Tech@੨৿ ෱Ҫ ྽(@fukuiretu) Troubleshoot Nuxt on Lambda

Slide 2

Slide 2 text

෱Ҫ ྽ (@fukuiretu) • piece of cake, inc. • since 2015.3~ • Web Engineer ◦ Rails occasionally AWS ◦ Recently Frontend ◦ Nuxt.js ◦ Serverless Framework • Live in Aomori ◦ RemoteWorker

Slide 3

Slide 3 text

WIP noteͷϑϩϯτΤϯυΛNuxt.js΁࡮৽͠·͢ https://note.mu/konpyu/n/n9b7bf4343514

Slide 4

Slide 4 text

VueFesJapan2018 (2018.11.3) noteΛNuxt.jsͰ࠶ߏஙͨ͠࿩ͱ͍͏λΠτϧͰ͓࿩͖ͯ͠·ͨ͠ https://note.mu/r82/n/ne217ba36d233

Slide 5

Slide 5 text

ΞϑλʔύʔςΟͰଟ͔࣭ͬͨ໰ Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ  ϋϚΓͲ͜Ζͱ͔ͳ͔ͬͨͰ͔͢??

Slide 6

Slide 6 text

͋Γ·ͨ͠ ઌਓͷ஌ܙ(@mya_ake san)͕͋ͬͨͷͰ ଟ͘͸ͳ͍͚Ͳ

Slide 7

Slide 7 text

ࠓ೔͓࿩͢Δ͜ͱ noteʹ͓͚Δ  Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ  ൃੜͨ͠໰୊ͱͦͷରॲʹ͍ͭͯ  ͓࿩͠·͢

Slide 8

Slide 8 text

αʔόߏ੒ https://note.mu/recommend https://note.mu/recommend_nuxt ͍ΘΏΔαʔόϨεΞʔΩςΫνϟ

Slide 9

Slide 9 text

ຊ୊ʹೖΔલʹ ओͳొ৔ਓ෺Λͬ͘͟Γ঺հ

Slide 10

Slide 10 text

ओͳొ৔ਓ෺ • Nuxt.js • AWS API Gateway • AWS Lambda • Serverless Framework

Slide 11

Slide 11 text

Nuxt.js ϢχόʔαϧͳVue.jsΞϓϦέʔγϣϯΛ ߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Server Side Rendering (SSR)ͷαϙʔτ • ϧʔςΟϯάͷࣗಈੜ੒ • ϝλσʔλͷੜ੒ • ঢ়ଶ؅ཧ • webpackʹΑΔϏϧυΛαϙʔτ

Slide 12

Slide 12 text

AWS API Gateway • WebAPIΤϯυϙΠϯτͷ࡞੒ɾ؅ཧ͕Ͱ͖Δ • όοΫΤϯυʹAWS LambdaΛར༻Ͱ͖Δ • ैྔ՝ۚ

Slide 13

Slide 13 text

AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service • ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ

Slide 14

Slide 14 text

Serverless Framework • ߏ੒؅ཧ΍σϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛෋ • AWSͷଞɺAzure Functions, Google Cloud Functionʹ΋ରԠ͍ͯ͠Δ

Slide 15

Slide 15 text

Nuxt on Lambdaͷͬ͘͟Γ࢓૊Έ AWS Lambda্ͰexpressΛಈ͔͠ɺ Nuxt.jsΛexpressͷmiddlewareͱͯ͠ ಈ͔͢͜ͱͰ࣮ݱ

Slide 16

Slide 16 text

ൃੜͨ͠໰୊ͱͦͷରॲ

Slide 17

Slide 17 text

ൃੜͨ͠໰୊ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍

Slide 18

Slide 18 text

ൃੜͨ͠໰୊ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍

Slide 19

Slide 19 text

cold startͱ͸ શ෦ڭ͑·͢ʂαʔόϨεΞϓϦͷΞϯνύλʔϯͱνϡʔχϯά https://d0.awsstatic.com/events/jp/2017/summit/devday/D4T7-2.pdf

Slide 20

Slide 20 text

cold startͷൃੜ৚݅ શ෦ڭ͑·͢ʂαʔόϨεΞϓϦͷΞϯνύλʔϯͱνϡʔχϯά https://d0.awsstatic.com/events/jp/2017/summit/devday/D4T7-2.pdf

Slide 21

Slide 21 text

cold startରࡦ Tune Up AWS Lambda https://www.slideshare.net/keisuke69/tune-up-aws-lambda

Slide 22

Slide 22 text

౰ॳͷ૝ఆ ศརpluginͰ͢΂͕ͯղܾ͢Δ༧ఆͩͬͨ…

Slide 23

Slide 23 text

ͱ͜Ζ͕… ಉVPC಺ʹઃஔ

Slide 24

Slide 24 text

ͱ͜Ζ͕… VPC಺ͰLambdaΛ࢖༻͍ͯ͠Δ৔߹ɺ ཁNAT Gateway

Slide 25

Slide 25 text

ͱ͜Ζ͕… 1ϲ݄(30೔)Ͱ໿¥5,000

Slide 26

Slide 26 text

ࣗલͰ༻ҙ͢Δ͜ͱʹ

Slide 27

Slide 27 text

ࣗલͰ༻ҙᶃ 5෼ஔ͖ʹwarmup༻ͷendpointΛୟ͘Lambdaؔ਺

Slide 28

Slide 28 text

ࣗલͰ༻ҙᶄ deploy༻script(Shell)Ͱdeployޙʹ warmup༻ͷendpointΛcurlͰୟ͘Α͏ʹͨ͠

Slide 29

Slide 29 text

ࣗલͰ༻ҙᶅ • Nuxt.jsͷmiddlewareͱͯ͠ಈ࡞ • status: 200, ContentType: text/plain ͰOKΛฦ͚ͩ͢ • ݩʑ͸ELBͷϔϧενΣοΫ༻్Ͱར༻͍ͯͨ͠ • warmup༻ͷendpointͱͯ͠ར༻ • (खલຯḩͰ͍͢·ͤΜ)

Slide 30

Slide 30 text

serverless-warmup-plugin  ͱಉ౳ͷ΋ͷΛࣗ࡞͠ cold startରࡦ͕Ͱ͖ͨ (݄¥5,000͔͚ͣʹࡁΜͩ)

Slide 31

Slide 31 text

ൃੜͨ͠໰୊ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍

Slide 32

Slide 32 text

αʔόߏ੒ https://note.mu/recommend https://note.mu/recommend_nuxt αʔόؒ௨৴

Slide 33

Slide 33 text

Nuxt.js ~ Rails·Ͱͷ௨৴ͷྲྀΕ Lambda(Nuxt.js)͔ΒHTTP Request(axios)Λ౤͛Δ EC2(Rails)ʹͯNginxͰHTTP RequestΛड͚Δ Nginx͔ΒRails΁ϦόʔεϓϩΩγ͢Δ

Slide 34

Slide 34 text

NginxͰ 400 Request Header Or Cookie Too Large ൃੜ

Slide 35

Slide 35 text

ͳ͔ͥ •X-Apigateway-Event •X-Apigateway-Context ໿10KB • API Gateway͕Lambdaݺͼग़࣌͠ʹHeaderʹ෇༩͢Δ • ϦΫΤετύϥϝʔλ΍Cookieͷ৘ใ͕٧·ͬͯΔ

Slide 36

Slide 36 text

Ͳ͏͢Ε͹Α͍͔ A. Nginxͷlarge_client_header_buffersΛ૿΍͢ B. Nuxt.js(Lambda) ~ Rails(EC2)Ͱ͸ෆཁͳͷͰ  HTTP RequestΛ౤͛Δલʹheader͔Β࡟আ͢Δ BΛબ୒

Slide 37

Slide 37 text

Nuxt.js(Lambda) ~ Rails(EC2)  ͷHTTP௨৴͕Ͱ͖ͨ

Slide 38

Slide 38 text

ൃੜͨ͠໰୊ 1. cold start 2. request headerͷαΠζաଟ 3. ϦΫΤετ࣌ͷϗετ͕औಘͰ͖ͳ͍

Slide 39

Slide 39 text

Ϟνϕʔγϣϯ Nuxt.jsͷSSR࣌ʹ(Lambda্͔Β) Request Header಺ͷHostΛ ϦΫΤετ࣌ͷϗετͱͯ͠ॲཧ͍ͯ͠Δ ϩδοΫ͕͋Δ

Slide 40

Slide 40 text

ଞʹ΋ํ๏͋ΔͷͰ͸ʁ A. ؀ڥม਺ʹ؀ڥ͝ͱͷϗετΛఆ͓ٛͯ͘͠ B. ؀ڥ͝ͱͷconﬁgΛ༻ҙͯ͠ಈతʹಡΉ͜Ή

Slide 41

Slide 41 text

ଞʹ΋ํ๏͋ΔͷͰ͸ʁ A. ؀ڥม਺ʹ؀ڥ͝ͱͷϗετΛఆ͓ٛͯ͘͠ B. ؀ڥ͝ͱͷconﬁgΛ༻ҙͯ͠ಈతʹಡΉ͜Ή note͸ಠࣗυϝΠϯ͕ར༻Ͱ͖ΔͷͰ ݻఆʹͳΒͳ͍ e.g. www.pieceofcake.co.jp diehardtales.com mm.hyuki.net

Slide 42

Slide 42 text

API GatewayҎ֎ͷ৔߹ Host: note.mu Host: note.mu Host: note.mu ϦΫΤετ࣌ͷϗετ (note.mu)͕औಘͰ͖Δ

Slide 43

Slide 43 text

API GatewayҎ֎ͷ৔߹ CloudFrontͷBehaviorsͷઃఆΑΓɺ Cache Based on Selected Request Headers Λ ALL   ·ͨ͸  Whitelist Ͱ Host

Slide 44

Slide 44 text

ಉ͡Α͏ʹAPI GatewayͰ ࢼͯ͠ΈΔͱ…

Slide 45

Slide 45 text

API Gatewayʹ proxy͞Εͳ͍

Slide 46

Slide 46 text

Amazon CloudFrontͰAPI Gatewayͷᙱ͍ͱ͜ΖʹखΛಧ͚Δ https://dev.classmethod.jp/cloud/cache-api-gateway-by-cloudfront ҆ఆͷΫϥϝι͞Μ

Slide 47

Slide 47 text

Ͳ͏ͨ͠Β ϦΫΤετ࣌ͷϗετ͕ औಘͰ͖ΔΜͩΖ͏͔

Slide 48

Slide 48 text

AWSެࣜϑΥʔϥϜʹٹ͍ͷҰख Lambda@Edge!!!!! https://forums.aws.amazon.com/message.jspa?messageID=682411

Slide 49

Slide 49 text

Lambda@Edge • CloudFront্ͰҎԼͷ͍ͣΕ͔ͷΠϕϯτΛϑο Ϋͯ͠LambdaΛ࣮ߦ͢ΔαʔϏε • Ϗϡʔϫʔ͔ΒϦΫΤετΛड৴ͨ͠ޙ • ϦΫΤετΛΦϦδϯʹసૹ͢Δલ • ΦϦδϯ͔ΒϨεϙϯεΛड৴ͨ͠ޙ • ϏϡʔϫʔʹϨεϙϯεΛసૹ͢Δલ • 2017/7ʹҰൠఏڙ։࢝

Slide 50

Slide 50 text

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 ϏϡʔϫʔϦΫΤετΛϑοΫ

Slide 51

Slide 51 text

API Gatewayͷ৔߹ͷྫ express Nuxt.js

Slide 52

Slide 52 text

CloudFront ~ API Gateway ~ Lambda  ͷߏ੒ͰϦΫΤετ࣌ͷ Host͕औಘͰ͖ͨ

Slide 53

Slide 53 text

Lambda@Edge ར༻࣌ͷ஫ҙ఺ • όʔδϣϯ͖ͭͷLambdaؔ਺ͷARNΛઃఆ͢Δඞཁ͕͋Δ • όʔδχΞ(us-east-1)Ϧʔδϣϯʹ഑ஔ͢Δඞཁ͕͋Δ • ֤ϦʔδϣϯʹϨϓϦΧ͕࡞ΒΕ࣮ͯߦ͞ΕΔ • ಈ࡞ͤͨ͞ΤοδϩέʔγϣϯʹΑͬͯϩάग़ྗ͞ΕΔϦʔδϣ ϯ͕ܾ·Δ • ؀ڥม਺͸ར༻ෆՄ • ௨ৗͷLambdaಉ༷ʹεϩοτϦϯά͕ൃੜ͢ΔͨΊΞΫη ε਺ΛߟྀΛ͢Δඞཁ͕͋Δ

Slide 54

Slide 54 text

·ͱΊ

Slide 55

Slide 55 text

·ͱΊ • ैདྷͷΞʔΩςΫνϟͱ͸ύϥμΠϜ͕ҟͳΔͷͰ ౰વͳ͕Βॳݟͷ໰୊͸ଟ͍͠ɺ͓ͦΒ͘͜ͷઌ ΋… • ӡ༻͕ܰݮ͞ΕΔͷ͸େ͖͍ • ϓϩηε؅ཧ • Φʔτεέʔϧ • ॳݟͷ໰୊ͱ޲͖߹͏ڧ͍ؾ͕࣋ͪ͋ΔͳΒ  αʔόϨεΞʔΩςΫνϟ͍͍ͧ

Slide 56

Slide 56 text

Special Thanks Naoto Ishizawa (@youyo_)

Slide 57

Slide 57 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞืूͯ͠·͢ ٸ੒௕தͷʮnoteʯͷϑϩϯτΤϯυΛ࡮৽͢ΔΤϯδχΞΛืूʂ https://www.wantedly.com/projects/208206