Amazon CloudWatch Synthetics now supports Playwright runtime to create canaries with NodeJS の使い所を考える

【DAY1】今年のAWSアプデ総ざらい！ #しむそくRadio Special　で登壇した資料
https://kddi-agile.connpass.com/event/337806/

Transcript

1. Amazon CloudWatch Synthetics now supports Playwright runtime to create canaries with NodeJS の使い所を考える しむそく Radio tubone24 (@meitante1conan)
2. @meitante1conan ゆるふわエンジニア 犬と遊んでいる 特徴 自己紹介 Yu Otsubo (tubone24)
3. @meitante1conan ゆるふわエンジニア 犬と遊んでいる 特徴 自己紹介 Yu Otsubo (tubone24) AWS re:Invent 2024 参加！！
4. そんな私がお送りするのが
5. 2024/11/21に出たこちらのアップデート
6. Amazon CloudWatch Synthetics ってなんだよ...
7. Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能
8. Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能 難しいね....
9. Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な ※覚え方、翻訳の仕方は諸説あります..多分
10. Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア ※覚え方、翻訳の仕方は諸説あります..多分
11. Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア シンセサイザーも「波形を合成」した 人工的な音 炭鉱の有毒ガス検知に カナリアが使われてたらしい
12. Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア シンセサイザーも「波形を合成」した 人工的な音 炭鉱の有毒ガス検知に カナリアが使われてたらしい 要はユーザーリクエストを模擬して アプリの正常性を 監視する
13. これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics)
14. これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics) Headless Chromeが動 くLambdaが自動で作成 される
15. これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics) Puppeteerで書かれた テストコードがLayersで Lambdaに連携される
16. Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能
17. Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能 Playwright対応！
18. で...?
19. 何が嬉しいの？
20. Playwrightだと何が嬉しいの？ BEFORE (Puppeteer) AFTER (Playwright) 専用に覚えなきゃ... (とは言ってもシンプルだし、割とデファクトな書き方ではある） テストの書きやすさが向上！ 最近では案件の自動テストをPlaywrightで書いている人も多い？ 案件の中の自動テストと 同じ書き味
21. Playwrightだと何が嬉しいの？ だいぶ前(2024/5頃)にはCypressを超えるダウンロード数 直近ではpuppeteerも超えてきた
22. BEFORE (Puppeteer) AFTER (Playwright) 細かいところですが、ES Moduleでの書き方にも対応 CommonJSで記載されている スクリプトをIaCなどで別途上げる 際、 node_modules内に閉じ込めないとい けない。 ES Moduleに対応 ディレクトリも自由度アップ
23. Playwrightだと何が嬉しいの？ BEFORE (Puppeteer) AFTER (Playwright) 要素が出てこないときの waitを明示的に記載 テストの書きやすさが向上！ そもそも案件の自動テストをPlaywrightで書いている人も多い？ 自動待機機能で ある程度吸収できる
24. BEFORE (Puppeteer) AFTER (Playwright) Playwrightだと何が嬉しいの？ アップロードが完了してから ボタンが出現する ↓ ボタンの出現を明示的に待つ 直感的にボタンのクリックを すればいい
25. synthetics.jsonでスクリーンショットやログの出力を細かく制御できる スクリーンショットのタイミング やCloudWatch Logsに出力する ログの制御も細かくできる
26. synthetics.jsonでスクリーンショットやログの出力を細かく制御できる console.logのほか、ネットワーク のロギングもできるため、問題が 発生した際の切り分けにも役立つ
27. でもお高いんでしょ う...?
28. でもお高いんでしょう...? 1時間あたり: 12回（60分÷5分） 1日あたり: 288回（12回×24時間） 1ヶ月あたり: 8,640回（288回×30日） 東京リージョンの料金: 0.0019 USD/実行 基本月額料金: 約16.23 USD（0.0019 USD × 8,540回） 安くはないね... 月額料金: 約79.51 USD （基本料金 + Lambda実行時間料金） 実行時間: 5分（300秒）/回 Lambda料金: 0.0000166667 USD/GB-秒 メモリ使用量: 1500MB Lambda月額料金: 約63.28 USD Lambdaの実行料金もかかってくるのは注意
29. 例えばこうやって使って みよう
30. CI/CDに組み込んでデプロイ時の正常性確認に利用する 最初からカナリアを飛ばさずに ここぞというときにカナリアを飛ばしてみよう
31. AWS CLIでSynthetics Canaryを起動できる CI/CDに組み込んでデプロイ時の正常性確認に利用する
32. AWS CLIでステータスを確認できる CI/CDに組み込んでデプロイ時の正常性確認に利用する
33. デプロイパイプラインの最後に カナリアを飛ばすことで、基本動作は 自動で確認完了！！！　浮いた時間で遊ぼう。 CI/CDに組み込んでデプロイ時の正常性確認に利用する
34. おまけ！！
35. おまけ！！
36. おまけ！！ このLambda何やねん...!!! 問題の解決に繋がりそう！
37. ありがとうございました！