インフラエンジニアが触るJavaScriptのはなし

Transcript

1. ΠϯϑϥΤϯδχΞ͕৮Δ
 JavaScriptͷ͸ͳ͠ Presented by @_inductor_ We are JavaScripters!
2. Agenda • ࣗݾ঺հ • Πϯϑϥ x JavaScript? • Ͳ͏΍ͬͯΔ͔
3. Who am I? • inductor(@_inductor_) • Cloud(AWS)/DevOps Engineer
 @ Start Today Technologies, Inc. • Admin @ Πϯϑϥษڧձ • DevOps / Containeriation / CI/CD Pipelines
4. ϨΠϠ͕ͪ͘Ͷʁ
5. JavaScript x Infrastructure? ͦ΋ͦ΋Կʹ࢖͏ͷʁ
6. Lambda@Edge
7. What is Lambda@Edge? • LambdaΛCloudFrontͷॲཧ෼ذʹ࢖͑ΔαʔϏε • CloudFront = AWSͷCDNαʔϏε • Lambda = AWSͷFaaS
8. Why CloudFront? • CloudFrontΛ࢖͏ͱόοΫΤϯυ΁ͷΞΫηεෛՙ͕େ෯ʹԼ͕Δ • Τοδϩέʔγϣϯ͕ੈք֤஍ʹ͋ΔͨΊɺ஍ҬʹΑΔϨΠςϯγ ͷҧ͍Λ཈͑Δ͜ͱ͕Ͱ͖Δʢதࠃ͸͈́ʣ • σϓϩΠ͔ͯ͠ΒશϦʔδϣϯ΁൓ө͢ΔͷΉͪΌ଎͍ • HTTP/2(TLS) Readyɺઃఆ͕؆୯ • ূ໌ॻͷऔಘ΋ACM࿈ܞͰ؆୯ & ແྉ • EC2ɺEBɺS3ɺECSͳͲͷଞAWSαʔϏεͱ͙͢ʹ࿈ܞͰ͖Δ
9. ͕͜͜Πέͯͳ͍Αʂ ࠓ·ͰͷCloudFront • ͱʹ͔͘ࡉ͔͍ઃఆ͕΍Γʹ͍͘ʂ • ҰൠతͳWebαʔόʔʹ͋Δઃఆ߲໨͕ͳ͍(Firebaseͱൺ΂ͯ΋ऑ͍) • ΩϟογϡɾHTTPϨεϙϯεϔομͷࡉ͔ͳઃఆͱ͔ • (WAFແ͠ͷ)IPΞυϨε੍ݶɺUser-AgentΛ࢖ͬͨৼΓ෼͚ͳͲ͕Ͱ͖ͳ͍ • Botͱ͔ɺͩ͘Βͳ͍ϦΫΤετΛϦʔνͤͨ͘͞ͳ͍ • SPAΛαʔόʔϨεʹ࡞Γ͍ͨͱ͖ʹΫϩʔϥʔͱͷ૬ੑ͕ѱ͍ • SSRΛೖΕΔ͜ͱ΋ݕ౼த(Ͱ΋Ҡߦ͢Δίετͱεέδϡʔϧ͕ɾɾɾ)
10. ͦ͜ͰLambda@Edge
11. Lambda@EdgeͰ ࣮ݱͰ͖ͨ͜ͱ • ΫϩʔϥʔʹΠϯσοΫε͍ͤͨ͞ϖʔδ΁ͷΞΫηε͕ݕࡧΤϯδϯ ͷBot͔Β͋ͬͨ৔߹͸ɺLambda@Edge͔ΒStaticͳHTMLΛฦ٫ • SEOతʹ΋ద੾ͳίϯςϯπΛURL͝ͱʹฦͤΔΑ͏ʹͳͬͨ • Ϣʔβʔ͔ΒͷϦΫΤετʹରͯ͠΋HSTS΍X-Content-Type-Optionsͳ ͲͷηΩϡϦςΟपΓͷHTTPϔομͳͲΛS3→CFͷؒͰ෇Ճͯ͠ฦ٫ • HSTS preloadͳͲʹ΋ରԠ͠ɺಡΈࠐΈ଎౓ʹ΋গͳ͔Β͍͍ͣӨڹΛ ༩͑ΒΕΔʢͱ͍͍ͳʣ • Content-Security-Policy͸ޙग़͠ͰೖΕͨͷͰͪΐͬͱͭΒ͍
12. ಋೖํ๏ͳͲͷࡉ͔͍࿩͸ https://tech.starttoday-tech.com/ entry/lambda-edge ʹࡌͬͯ·͢
13. Lambda@Edgeͷ ͍͍ͱ͜ΖɺΫιͳͱ͜Ζ • ͍͍ͱ͜Ζ • ϧʔςΟϯάָ͕ʹ࣮ݱͰ͖Δ • ͍ΘΏΔҰൠతͳURIͷύλʔϯϚονͳॻ͖ํͰͰ͖ΔͷͰָ • ΫϥΠΞϯτͷΤοδϩέʔγϣϯͰ࣮ߦ͞ΕΔͷͰ݁ߏ଎͍ • Ϋιͳͱ͜Ζ • Lamdaͷϩά͕Τοδϩέʔγϣϯ͝ͱʹ֤ϦʔδϣϯʹࢄΒ͹ͬͯ͠·͏ • όʔδϣϯΞοϓͷ௥ै͕ී௨ͷLambdaΑΓগ͠஗͍͔΋ʁ • ͦ΋ͦ΋JavaScriptཧղͯ͠ΔΠϯϑϥΤϯδχΞͲΕ͚͍ͩΔͷ
14. Ϋϥ΢υ͕౰ͨΓલͳ࣌୅͔ͩΒͦ͜ɺ ΠϯϑϥͰ΋JavaScriptΛ࢖͍͖ͬͯ· ͠ΐ͏ʂ
15. ΞϓϦέʔγϣϯ࣮ߦ؀ڥ
 ͱͯ͠ͷFaaSʹࢥ͏ٙ໰ • ςετͱ͔ΈΜͳͲ͏΍ͬͯΜͩΖ͏ʁ • αʔόʔϨεͳߏ੒Ͱ͖ͬͪΓӡ༻Ͱ͖͍ͯΔਓͨͪͷ஌ ݟ͕͠Γ͍ͨɾɾɾʂʂʂ • ڵຯ͋Δਓ͍Ε͹ɺͥͻ࠙਌ձͰ࿩͠·͠ΐ͏ʼʻ
16. ͓ΘΓ