インフラエンジニアが触る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. ͓ΘΓ