Tweet
Tweet

Slide 1

Slide 1 text

Amazon CloudWatch Synthetics now supports Playwright runtime to create canaries with NodeJS の使い所を考える しむそく Radio tubone24 (@meitante1conan)

Slide 2

Slide 2 text

@meitante1conan ゆるふわエンジニア 犬と遊んでいる 特徴 自己紹介 Yu Otsubo (tubone24)

Slide 3

Slide 3 text

@meitante1conan ゆるふわエンジニア 犬と遊んでいる 特徴 自己紹介 Yu Otsubo (tubone24) AWS re:Invent 2024 参加！！

Slide 4

Slide 4 text

そんな私がお送りするのが

Slide 5

Slide 5 text

2024/11/21に出たこちらのアップデート

Slide 6

Slide 6 text

Amazon CloudWatch Synthetics ってなんだよ...

Slide 7

Slide 7 text

Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能

Slide 8

Slide 8 text

Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能 難しいね....

Slide 9

Slide 9 text

Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な ※覚え方、翻訳の仕方は諸説あります..多分

Slide 10

Slide 10 text

Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア ※覚え方、翻訳の仕方は諸説あります..多分

Slide 11

Slide 11 text

Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア シンセサイザーも「波形を合成」した 人工的な音 炭鉱の有毒ガス検知に カナリアが使われてたらしい

Slide 12

Slide 12 text

Amazon CloudWatch Synthetics Canary Amazon CloudWatch Syntheticsとは 人 工 的 な 人 工 的 な 人 工 的 な カナリア シンセサイザーも「波形を合成」した 人工的な音 炭鉱の有毒ガス検知に カナリアが使われてたらしい 要はユーザーリクエストを模擬して アプリの正常性を 監視する

Slide 13

Slide 13 text

これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics)

Slide 14

Slide 14 text

これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics) Headless Chromeが動 くLambdaが自動で作成 される

Slide 15

Slide 15 text

これがSynthetics Canaryだ！！！ （引用元： 【AWS Black Belt Online Seminar】 Amazon CloudWatch Synthetics) Puppeteerで書かれた テストコードがLayersで Lambdaに連携される

Slide 16

Slide 16 text

Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能

Slide 17

Slide 17 text

Amazon CloudWatch Syntheticsとは Canaryと呼ばれるスクリプトを使用して監視を実行 Node.jsまたはPythonランタイムのLambda関数として実行 PuppeteerやSeleniumを使用してヘッドレスブラウザで監視 Amazon CloudWatch Syntheticsとは WebアプリケーションやAPIエンドポイントに対して、 ユーザーと同じアクションを模倣して実行し、 パフォーマンスや可用性を監視するマネージドサービス CloudWatch RUMやApplication Signals(X-Ray)との統合も可能 Playwright対応！

Slide 18

Slide 18 text

で...?

Slide 19

Slide 19 text

何が嬉しいの？

Slide 20

Slide 20 text

Playwrightだと何が嬉しいの？ BEFORE (Puppeteer) AFTER (Playwright) 専用に覚えなきゃ... (とは言ってもシンプルだし、割とデファクトな書き方ではある） テストの書きやすさが向上！ 最近では案件の自動テストをPlaywrightで書いている人も多い？ 案件の中の自動テストと 同じ書き味

Slide 21

Slide 21 text

Playwrightだと何が嬉しいの？ だいぶ前(2024/5頃)にはCypressを超えるダウンロード数 直近ではpuppeteerも超えてきた

Slide 22

Slide 22 text

BEFORE (Puppeteer) AFTER (Playwright) 細かいところですが、ES Moduleでの書き方にも対応 CommonJSで記載されている スクリプトをIaCなどで別途上げる 際、 node_modules内に閉じ込めないとい けない。 ES Moduleに対応 ディレクトリも自由度アップ

Slide 23

Slide 23 text

Playwrightだと何が嬉しいの？ BEFORE (Puppeteer) AFTER (Playwright) 要素が出てこないときの waitを明示的に記載 テストの書きやすさが向上！ そもそも案件の自動テストをPlaywrightで書いている人も多い？ 自動待機機能で ある程度吸収できる

Slide 24

Slide 24 text

BEFORE (Puppeteer) AFTER (Playwright) Playwrightだと何が嬉しいの？ アップロードが完了してから ボタンが出現する ↓ ボタンの出現を明示的に待つ 直感的にボタンのクリックを すればいい

Slide 25

Slide 25 text

synthetics.jsonでスクリーンショットやログの出力を細かく制御できる スクリーンショットのタイミング やCloudWatch Logsに出力する ログの制御も細かくできる

Slide 26

Slide 26 text

synthetics.jsonでスクリーンショットやログの出力を細かく制御できる console.logのほか、ネットワーク のロギングもできるため、問題が 発生した際の切り分けにも役立つ

Slide 27

Slide 27 text

でもお高いんでしょ う...?

Slide 28

Slide 28 text

でもお高いんでしょう...? 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の実行料金もかかってくるのは注意

Slide 29

Slide 29 text

例えばこうやって使って みよう

Slide 30

Slide 30 text

CI/CDに組み込んでデプロイ時の正常性確認に利用する 最初からカナリアを飛ばさずに ここぞというときにカナリアを飛ばしてみよう

Slide 31

Slide 31 text

AWS CLIでSynthetics Canaryを起動できる CI/CDに組み込んでデプロイ時の正常性確認に利用する

Slide 32

Slide 32 text

AWS CLIでステータスを確認できる CI/CDに組み込んでデプロイ時の正常性確認に利用する

Slide 33

Slide 33 text

デプロイパイプラインの最後に カナリアを飛ばすことで、基本動作は 自動で確認完了！！！　浮いた時間で遊ぼう。 CI/CDに組み込んでデプロイ時の正常性確認に利用する

Slide 34

Slide 34 text

おまけ！！

Slide 35

Slide 35 text

おまけ！！

Slide 36

Slide 36 text

おまけ！！ このLambda何やねん...!!! 問題の解決に繋がりそう！

Slide 37

Slide 37 text

ありがとうございました！