Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Ca...

Avatar for Edward Fox Edward Fox
May 28, 2021
Technology
130
0

Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge

2021-05-28 @AWS Dev Alliance

Avatar for Edward Fox

Edward Fox

May 28, 2021

More Decks by Edward Fox

See All by Edward Fox
Priorityを制するものはローディングを制す
Avatar for Edward Fox edwardkenfox
4
810
AWS re:Invent 2019 / Hackathon for Good 参加録
Avatar for Edward Fox edwardkenfox
2
630
Repro basketball club
Avatar for Edward Fox edwardkenfox
0
290
Introduction to UX Optimizer
Avatar for Edward Fox edwardkenfox
0
140
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
Avatar for Edward Fox edwardkenfox
0
370
僕とprototypeとJSONで / Me and prototype down by the JSON
Avatar for Edward Fox edwardkenfox
0
180
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
Avatar for Edward Fox edwardkenfox
0
510
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
Avatar for Edward Fox edwardkenfox
0
1.2k
window.windowとは何か / What is window window
Avatar for Edward Fox edwardkenfox
1
270

Other Decks in Technology

See All in Technology
AI時代から振り返るTerraform drift運用の歴史 / AI Age Reflections on the History of Terraform Drift Operations
Avatar for AEON aeonpeople
2
630
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
Avatar for did0es shuta13
0
310
運用を見据えたAIエージェント設計実践
Avatar for amacbee amacbee
0
700
もりもり新機能を一挙紹介！ AgentCoreに入門して、AWS上にAIエージェントを構築しよう
Avatar for みのるん minorun365
PRO
6
580
地元にいないローカルオーガナイザーの立ち回り
Avatar for uvb_76 uvb_76
1
420
AI時代の私の技術インプットとアウトプット術
Avatar for tonkotsuboy_com tonkotsuboy_com
15
8.1k
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
200
形式手法特論：公平性制約の位相的特徴づけ #kernelvm / Kernel VM Study Kansai 12th
Avatar for y_taka_23 ytaka23
1
660
食べログのサーキットブレーカー導入を振り返って
Avatar for atpons atpons
1
160
Javaで学ぶSOLID原則
Avatar for Negima negima
1
250
AIが変えた"品質の守り方"
Avatar for kkakizaki kkakizaki
13
5.5k
大学生が本気でDatabricksを活用してDiscordサークルをデータ駆動させてみた
Avatar for Kazuki Date phantomjuju
1
310

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
220
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
950
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
290
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
560
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
320
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k

Transcript

  1. Lambda@Edge Λར༻ͨ͠ αʔυύʔςΟJavaScriptͷ ΧφϦΞϦϦʔε Edward Fox 2021/05/28 @AWS Dev Alliance

  2. @edwardkenfox Edward Fox ɾΤϯδχΞ @ Reproגࣜձࣾ ɾWEBʗϒϥ΢βٕज़શൠɺ෼ࢄॲཧ ɾόεέɺϏʔϧɺӉ஦ 2/52

  3. ࠓ೔࿩͢͜ͱ: Lambda@Edge Λར༻͠ ҆શͳܗͰϦϦʔε͕Ͱ͖Δ Α͏ʹͳͬͨ࿩ 3/52

  4. ࠓ೔࿩͞ͳ͍͜ͱ: Lambda@Edge ͷػೳ঺հ ͳͲ 4/52

  5. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬ 5/52

  6. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬

  7. αΠτʹຒΊࠐΜͰ΋Β͍ σʔλΛऩूͨ͠Γૹ৴͢Δ αʔυύʔςΟͷJavaScriptίʔυɻ Google Analyticsʹ୅ද͞ΕΔΑ͏ͳ λά΍޿ࠂܭଌπʔϧ͕͜Εʹ͋ͨΔ 7/52

  8. ※ ฐࣾͰఏڙ͍ͯ͠Δ αʔυύʔςΟJavaScript ͸ Web SDKͱ΋ݺ͹Ε͍ͯ·͢ 8/52

  9. ※ ࣮ࡍͷ΋ͷͱ͸ҟͳΓ·͢

  10. Web SDK ʹมߋ͕͋Δͨͼʹ ϦϦʔεΛ࣮ࢪ͢Δ͕ repro-sdk.min.js ͸ৗʹ ࠷৽όʔδϣϯΛࢀর͢Δ 10/52

  11. None

  12. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬

  13. ৽͍͠όʔδϣϯΛϦϦʔε ͢Δͱ ଈ࣌͢΂ͯͷ ΫϥΠΞϯτͰಈ࡞Λ࢝ΊΔ 13/52

  14. 👍 ɾ໰୊͕͋ͬͨΒ͙͢ʹؾ෇͚Δ 👎 ɾ໰୊͕͋ͬͨͱ͖ͷඃ֐͕ਙେ 14/52

  15. ڪාͷҰٿೖࠢϦϦʔε 😇 15/52

  16. ༷ʑͳϒϥ΢β΍΢ΣϒαΠτͰ ಈ࡞͢ΔαʔυύʔςΟ JavaScriptͱ͍͏ੑ࣭తʹɺ ΫϥΠΞϯτґଘͰى͖Δ໰୊Λ ͢΂ͯࣄલʹ༧ଌ͢Δ͜ͱ͸ࠔ೉

  17. => ຊ൪ʹग़ͯ͠Έͳ͍ͱ ෼͔Βͳ͍ɻ Ͱ΋ͳΔ΂҆͘શʹग़͍ͨ͠ 17/52

  18. ͦΜͳͱ͖ͷͨΊͷ ΧφϦΞϦϦʔε 🐧 🐧 🐧 18/52

  19. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬

  20. https://martinfowler.com/bliki/ CanaryRelease.html ͔ΒҾ༻ 20/52

  21. 1. 2. 3.

  22. 22/52

  23. Web SDKʹ͓͚Δ ΧφϦΞϦϦʔεͷཁ݅ 23/52

  24. 1. Web SDKʹର͢ΔτϥϑΟοΫશମʹରͯ͠ ภΓͳ͘৽چόʔδϣϯΛ෼ࢄ͍ͤͨ͞ 2. ΫϥΠΞϯτ͝ͱʹ͸৽چόʔδϣϯΛ ͲͪΒ͔ʹݻఆ͍ͤͨ͞ 3. ৽چόʔδϣϯͷৼΓ෼͚ͷׂ߹Λࢦఆ ͍ͨ͠ɻ·ͨঃʑʹׂ߹Λม͍͑ͨɻ

    24/52

  25. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬

  26. 26/52

  27. 27/52

  28. None

  29. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬

  30. 1. Web SDKʹର͢ΔτϥϑΟοΫશମʹରͯ͠ ภΓͳ͘৽چόʔδϣϯΛ෼ࢄ͍ͤͨ͞ 2. ΫϥΠΞϯτ͝ͱʹ͸৽چόʔδϣϯΛ ͲͪΒ͔ʹݻఆ͍ͤͨ͞ 3. ৽چόʔδϣϯͷৼΓ෼͚ͷׂ߹Λ ࢦఆ͍ͨ͠ɻ·ͨঃʑʹׂ߹Λม͍͑ͨɻ

    30/52

  31. 1. Web SDKʹର͢ΔτϥϑΟοΫશମʹରͯ͠ ภΓͳ͘৽چόʔδϣϯΛ෼ࢄ͍ͤͨ͞ 2. ΫϥΠΞϯτ͝ͱʹ͸৽چόʔδϣϯΛ ͲͪΒ͔ʹݻఆ͍ͤͨ͞ 3. ৽چόʔδϣϯͷৼΓ෼͚ͷׂ߹Λ ࢦఆ͍ͨ͠ɻ·ͨঃʑʹׂ߹Λม͍͑ͨɻ

    30/52 👌👌👌

  32. 1. Web SDKʹର͢ΔτϥϑΟοΫશମʹରͯ͠ ภΓͳ͘৽چόʔδϣϯΛ෼ࢄ͍ͤͨ͞ 2. ΫϥΠΞϯτ͝ͱʹ͸৽چόʔδϣϯΛ ͲͪΒ͔ʹݻఆ͍ͤͨ͞ 3. ৽چόʔδϣϯͷৼΓ෼͚ͷׂ߹Λ ࢦఆ͍ͨ͠ɻ·ͨঃʑʹׂ߹Λม͍͑ͨɻ

    30/52 👌👌👌 👌👌

  33. 1. Web SDKʹର͢ΔτϥϑΟοΫશମʹରͯ͠ ภΓͳ͘৽چόʔδϣϯΛ෼ࢄ͍ͤͨ͞ 2. ΫϥΠΞϯτ͝ͱʹ͸৽چόʔδϣϯΛ ͲͪΒ͔ʹݻఆ͍ͤͨ͞ 3. ৽چόʔδϣϯͷৼΓ෼͚ͷׂ߹Λ ࢦఆ͍ͨ͠ɻ·ͨঃʑʹׂ߹Λม͍͑ͨɻ

    30/52 👌👌👌 👌👌 👌

  34. 1. αʔυύʔςΟJavaScriptͱ͸ 2. ϦϦʔεͷ໰୊఺ 3. ΧφϦΞϦϦʔε ͱ͸ 4. Lambda@Edge Ͱͷ࣮ݱํ๏

    5. ݁Ռ 6. AWS ͞Μ΁ͷཁ๬
  35. None
  36. None

  37. ຖճίʔυΛॻ͖׵͑ͳ͚Ε͹ ͍͚ͳ͍ͷ͸໘౗ 37/52

  38. => ͦ͏ͩɺ؀ڥม਺Λ࢖͓͏ 38/52

  39. None
  40. None
  41. None
  42. None

  43. 😱 😱 😱 43/52

  44. ཁ๬1: ؀ڥม਺ͷαϙʔτ 🙏 44/52

  45. None
  46. None
  47. None

  48. 🤔 🤔 🤔 48/52

  49. ཁ๬2: UIͷվળ 🙏 49/52

  50. ·ͱΊ 50/52

  51. ɾLambda@Edge Λར༻ͯ͠ΧφϦΞ ϦϦʔεΛ࣮ݱ͠ɺ҆৺ɾ҆શͳܗͰ ϦϦʔεΛ࣮ࢪͰ͖ΔΑ͏ʹͳͬͨ ɾ͜ΕҎ֎ʹ΋ Lambda@Edge ͸ଟ͘ͷ Ϣʔεέʔεʹ࢖͑ΔػೳͳͷͰɺ ࠓޙ΋ՄೳੑΛ୳͍͖͍ͬͯͨ 51/52

  52. ׬ 52/52

  53. We are hiring!

  54. None
  55. None
  56. None