181117_wannatech.pdf

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

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