181117_wannatech.pdf

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ΞϑλʔύʔςΟͰଟ͔࣭ͬͨ໰
   Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ

   ϋϚΓͲ͜Ζͱ͔ͳ͔ͬͨͰ͔͢??
   

   View Slide

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

   View Slide

7. ࠓ೔͓࿩͢Δ͜ͱ
   noteʹ͓͚Δ

   Nuxt.jsΛAWS LambdaͰಈ͔͢·Ͱʹ

   ൃੜͨ͠໰୊ͱͦͷରॲʹ͍ͭͯ

   ͓࿩͠·͢
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. serverless-warmup-plugin

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. Ͳ͏͢Ε͹Α͍͔
    A. Nginxͷlarge_client_header_buffersΛ૿΍͢
    B. Nuxt.js(Lambda) ~ Rails(EC2)Ͱ͸ෆཁͳͷͰ

    HTTP RequestΛ౤͛Δલʹheader͔Β࡟আ͢Δ
    BΛબ୒
    

    View Slide

37. Nuxt.js(Lambda) ~ Rails(EC2)

    ͷHTTP௨৴͕Ͱ͖ͨ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ·ͨ͸

    Whitelist Ͱ Host
    

    View Slide

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

    View Slide

45. API Gatewayʹ
    proxy͞Εͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. CloudFront ~ API Gateway ~ Lambda

    ͷߏ੒ͰϦΫΤετ࣌ͷ
    Host͕औಘͰ͖ͨ
    

    View Slide

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

    View Slide

54. ·ͱΊ
    

    View Slide

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

    αʔόϨεΞʔΩςΫνϟ͍͍ͧ
    

    View Slide

56. Special Thanks
    Naoto Ishizawa (@youyo_)
    
    

    View Slide

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

    View Slide