181117_wannatech.pdf

107ba69ff7888cacdb4307a28adf5527?s=47 Retu Fukui
November 17, 2018

 181117_wannatech.pdf

2018/11/17(土) We wanna Tech@青森でお話ししてきました

107ba69ff7888cacdb4307a28adf5527?s=128

Retu Fukui

November 17, 2018
Tweet

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