181117_wannatech.pdf

Transcript

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

2. ෱Ҫ ྽ (@fukuiretu) • piece of cake, inc. • since

   2015.3~ • Web Engineer ◦ Rails occasionally AWS ◦ Recently Frontend ◦ Nuxt.js ◦ Serverless Framework • Live in Aomori ◦ RemoteWorker

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

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

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

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

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

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

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

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

    • Serverless Framework

11. Nuxt.js ϢχόʔαϧͳVue.jsΞϓϦέʔγϣϯΛ ߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Server Side Rendering (SSR)ͷαϙʔτ • ϧʔςΟϯάͷࣗಈੜ੒

    • ϝλσʔλͷੜ੒ • ঢ়ଶ؅ཧ • webpackʹΑΔϏϧυΛαϙʔτ

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

13. AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service •

    ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ

14. Serverless Framework • ߏ੒؅ཧ΍σϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛෋ • AWSͷଞɺAzure Functions, Google

    Cloud Functionʹ΋ରԠ͍ͯ͠Δ

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

16. ൃੜͨ͠໰୊ͱͦͷରॲ

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

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

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

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

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

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

23. ͱ͜Ζ͕… ಉVPC಺ʹઃஔ

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

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

26. ࣗલͰ༻ҙ͢Δ͜ͱʹ

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

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

29. ࣗલͰ༻ҙᶅ • Nuxt.jsͷmiddlewareͱͯ͠ಈ࡞ • status: 200, ContentType: text/plain ͰOKΛฦ͚ͩ͢ •

    ݩʑ͸ELBͷϔϧενΣοΫ༻్Ͱར༻͍ͯͨ͠ • warmup༻ͷendpointͱͯ͠ར༻ • (खલຯḩͰ͍͢·ͤΜ)

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

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

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

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

34. NginxͰ 400 Request Header Or Cookie Too Large ൃੜ

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

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

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

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

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

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

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

    mm.hyuki.net

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

43. API GatewayҎ֎ͷ৔߹ CloudFrontͷBehaviorsͷઃఆΑΓɺ Cache Based on Selected Request Headers Λ

    ALL 
 ·ͨ͸
 Whitelist Ͱ Host

44. ಉ͡Α͏ʹAPI GatewayͰ ࢼͯ͠ΈΔͱ…

45. API Gatewayʹ proxy͞Εͳ͍

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

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

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

49. Lambda@Edge • CloudFront্ͰҎԼͷ͍ͣΕ͔ͷΠϕϯτΛϑο Ϋͯ͠LambdaΛ࣮ߦ͢ΔαʔϏε • Ϗϡʔϫʔ͔ΒϦΫΤετΛड৴ͨ͠ޙ • ϦΫΤετΛΦϦδϯʹసૹ͢Δલ • ΦϦδϯ͔ΒϨεϙϯεΛड৴ͨ͠ޙ

    • ϏϡʔϫʔʹϨεϙϯεΛసૹ͢Δલ • 2017/7ʹҰൠఏڙ։࢝

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

51. API Gatewayͷ৔߹ͷྫ express Nuxt.js

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

53. Lambda@Edge ར༻࣌ͷ஫ҙ఺ • όʔδϣϯ͖ͭͷLambdaؔ਺ͷARNΛઃఆ͢Δඞཁ͕͋Δ • όʔδχΞ(us-east-1)Ϧʔδϣϯʹ഑ஔ͢Δඞཁ͕͋Δ • ֤ϦʔδϣϯʹϨϓϦΧ͕࡞ΒΕ࣮ͯߦ͞ΕΔ • ಈ࡞ͤͨ͞ΤοδϩέʔγϣϯʹΑͬͯϩάग़ྗ͞ΕΔϦʔδϣ

    ϯ͕ܾ·Δ • ؀ڥม਺͸ར༻ෆՄ • ௨ৗͷLambdaಉ༷ʹεϩοτϦϯά͕ൃੜ͢ΔͨΊΞΫη ε਺ΛߟྀΛ͢Δඞཁ͕͋Δ

54. ·ͱΊ

55. ·ͱΊ • ैདྷͷΞʔΩςΫνϟͱ͸ύϥμΠϜ͕ҟͳΔͷͰ ౰વͳ͕Βॳݟͷ໰୊͸ଟ͍͠ɺ͓ͦΒ͘͜ͷઌ ΋… • ӡ༻͕ܰݮ͞ΕΔͷ͸େ͖͍ • ϓϩηε؅ཧ •

    Φʔτεέʔϧ • ॳݟͷ໰୊ͱ޲͖߹͏ڧ͍ؾ͕࣋ͪ͋ΔͳΒ
 αʔόϨεΞʔΩςΫνϟ͍͍ͧ

56. Special Thanks Naoto Ishizawa (@youyo_)

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