Canary 設計図の使用 - Amazon CloudWatch

Canary 設計図の使用

このセクションでは、Canary の各設計図と、各設計図に最も適合するタスクについて詳しく説明します。設計図は、以下の Canary タイプのために提供されています:

  • ハートビートモニター

  • API Canary

  • リンク切れチェッカー

  • ビジュアルモニタリング

  • Canary Recorder

  • GUI ワークフロー

設計図を使用して Canary を作成する場合、CloudWatch コンソールの各フィールドに入力するに従って、作成中の Canary がページの [スクリプトエディタ] 領域に Node.js スクリプトとして表示されます。この領域で Canary を編集し、さらにカスタマイズすることもできます。

ハートビートのモニタリング

ハートビートスクリプトは、指定した URL をロードし、ページのスクリーンショットと HTTP アーカイブファイル (HAR ファイル) を保存します。また、アクセスした URL のログも保存します。

HAR ファイルを使用して、ウェブページに関する詳細なパフォーマンスデータを表示できます。ウェブリクエストのリストを分析し、項目の読み込み時間などのパフォーマンス問題を検出できます。

Canary が syn-nodejs-puppeteer-3.1 以降のランタイムバージョンを使用している場合、ハートビートモニタリングブループリントを使用して複数の URL をモニタリングし、Canary 実行レポートのステップの概要で各 URL のステータス、期間、関連付けられたスクリーンショット、失敗の理由を確認できます。

API Canary

API Canary は、REST API の基本的な読み取り関数と書き込み関数をテストできます。RESTは Representational State Transfer の略であり、開発者が API を作成するときに従う一連のルールです。これらのルールの 1 つでは、特定の URL へのリンクがデータを返す必要があることを指定しています。

Canary は任意の API で動作し、すべてのタイプの機能をテストできます。各 Canary は複数の API 呼び出しを行うことができます。

ランタイムバージョン syn-nodejs-2.2 以降を使用する Canary では、API Canary ブループリントは、API を HTTP ステップとしてモニタリングする複数ステップの Canary をサポートします。1 つの Canary で複数の API をテストできます。各ステップは、異なる URL にアクセスしたり、異なるヘッダーを使用したり、ヘッダーとレスポンス本文を取得するかどうかについて異なるルールを使用したりできる個別のリクエストです。ヘッダーとレスポンス本文を取得しないことで、機密データが記録されないようにできます。

API Canary 内の各リクエストは、次の情報で構成されます。

  • エンドポイント。リクエストする URL です。

  • メソッド。サーバーに送信されるリクエストのタイプです。REST API は、GET (読み取り)、POST (書き込み)、PUT (更新)、PATCH (更新)、DELETE (削除) の各オペレーションをサポートしています。

  • ヘッダー。クライアントとサーバーの両方に情報を提供します。これらは認証に使用され、本文の内容に関する情報を提供します。有効なヘッダーのリストについては、「HTTPヘッダー」をご参照ください。

  • データ (または本文)。サーバーに送信される情報を含みます。これは、POST、PUT、PATCH、または DELETE の各リクエストでのみ使用されます。

  • リクエストする URL。

API Canary 設計図は、GET メソッドと POST メソッドをサポートしています。この設計図を使用する場合は、ヘッダーを指定する必要があります。たとえば、Authorizationキーとして指定し、必要な認証データをとして指定できます。

POST リクエストをテストする場合は、[データ] フィールドに書き込むコンテンツも指定します。

API Gateway との統合

API ブループリントは Amazon API Gateway と統合されています。これにより、Canary と同じ AWS アカウントとリージョンから API Gateway API とステージを選択したり、API Gateway から Swagger テンプレートをアップロードして、クロスアカウントとクロスリージョン API のモニタリングを行ったりすることができます。その後、最初から入力するのではなく、コンソールで残りの詳細を選択して Canary を作成できます。API Gateway の詳細については、「Amazon API Gateway とは」を参照してください。

リンク切れチェッカーは、document.getElementsByTagName('a') を使用して、テスト対象である URL 内のすべてのリンクを収集します。この際、ユーザーが指定したリンク数までがテストされ、また、URL 自体も最初のリンクとしてカウントされます。たとえば、5 つのリンクが含まれているページのすべてのリンクをチェックする場合は、Canary が 6 つのリンクをたどるように指定する必要があります。

syn-nodejs-2.0-beta ランタイム以降を使用して作成されたリンク切れチェッカー Canary は、次の追加機能をサポートしています。

  • チェックされたリンク、ステータスコード、エラーの理由 (存在する場合)、およびソースページとターゲットページのスクリーンショットを含むレポートを生成する。

  • Canary の結果を表示するとき、フィルタリングしてリンク切れのみを表示し、エラーの理由に基づいてリンクを修正できます。

  • このバージョンでは、各リンクの注釈付きソースページのスクリーンショットがキャプチャされ、リンクが見つかったアンカーが強調表示されます。非表示のコンポーネントには注釈が付けられません。

  • キャプチャするスクリーンショットは、ソースおよびターゲットページの両方、ソースページのみ、またはターゲットページのみに設定できます。

  • 最初のページから多くのリンクがスクレイプされた場合でも最初のリンク切れの後に Canary スクリプトが停止するという、以前のバージョンの問題は、このバージョンで修正されています。

新しいランタイムを導入するために、syn-1.0 を使用している既存の Canary を更新する場合は、一度 Canary を削除した上で再作成する必要があります。既存の Canary を新しいランタイムに更新しても、これらの機能は利用可能になりません。

リンク切れチェッカー Canary は、次の種類のリンクエラーを検出します。

  • 404 ページが見つからない。

  • ホスト名が無効である。

  • URL が正しくない。この例としては、URL から角括弧が抜けている、スラッシュが余分についている、プロトコルが間違っているなどが挙げられます。

  • HTTP レスポンスコードが無効である。

  • ホストサーバーが、コンテンツもなく、レスポンスコードもない、空のレスポンスを返す。

  • HTTPリクエストが Canary の実行中に常にタイムアウトする。

  • ホストが正しく設定されていないか、ビジーすぎるために接続が常に切断される。

ビジュアルモニタリングの設計図

ビジュアルモニタリングの設計図には、Canary 実行中に撮影されたスクリーンショットと、ベースライン Canary 実行中に撮影されたスクリーンショットを比較するコードが含まれています。2 つのスクリーンショット間の不一致がしきい値のパーセンテージを超えている場合、Canary は失敗します。ビジュアルモニタリングは、syn-puppeteer-node-3.2 以降で実行中の Canary でサポートされています。Python と Selenium を実行している Canary では現在サポートされていません。

ビジュアルモニタリングの設計図には、デフォルトの Canary 設計図スクリプトに次のコード行が含まれており、ビジュアルモニタリングが有効になります。

syntheticsConfiguration.withVisualCompareWithBaseRun(true);

この行がスクリプトに追加された後に初めて Canary が正常に実行されると、その実行中に撮影されたスクリーンショットが比較のベースラインとして使用されます。最初に Canary を実行した後、CloudWatch コンソールを使用して Canary を編集して、次のいずれかの操作を行うことができます。

  • Canary の次の実行を新しいベースラインとして設定する。

  • 現在のベースラインスクリーンショットに境界を描画し、ビジュアル比較時に無視するスクリーンショットの領域を指定する。

  • スクリーンショットをビジュアルモニタリングに使用しないようにする。

CloudWatch コンソールを使用して Canary を編集する方法の詳細については、 「Canary の編集または削除」を参照してください。

また、nextrun または lastrun パラメーターを指定するか、Canary 実行 ID を UpdateCanary API で指定することにより、ベースラインとして使用される Canary 実行を変更することもできます。

ビジュアルモニタリングの設計図を使用する場合は、スクリーンショットを撮影する URL を入力し、差分しきい値をパーセンテージで指定します。ベースライン実行後、そのしきい値よりも大きい視覚差を検出する Canary を今後実行すると、Canary 障害がトリガーされます。ベースライン実行後、Canary を編集して、ビジュアルモニタリング中に無視するベースラインスクリーンショットに境界線を「描画」することもできます。

ビジュアルモニタリング機能は、ImageMagick オープンソースソフトウェアツールキットによって機能します。詳細については、「ImageMagick」を参照してください。

Canary Recorder

Canary レコーダーの設計図を使用すると、CloudWatch Synthetics Recorder を使用してウェブサイトでクリックおよび入力のアクションを記録し、同じステップに従う Canary を作成するために使用できる Node.js スクリプトを自動的に生成できます。CloudWatch Synthetics Recorder は、Amazon が提供する Google Chrome 拡張機能です。

クレジット: CloudWatch Synthetics Recorder は、Headless レコーダーに基づいています。

詳細については、「」を参照してくださいGoogle Chrome の CloudWatch Synthetics Recorder を使用する

GUI ワークフロービルダー

GUI ワークフロービルダー設計図は、ウェブページに対してアクションを実行できることを検証します。たとえば、ウェブページにログインフォームがある場合、Canary はユーザーフィールドとパスワードフィールドに入力し、このフォームを送信してウェブページが正しく動作していることを検証できます。

このタイプの Canary を設計図を従って作成する場合は、Canary がウェブページに対して実行するアクションを指定します。使用できるアクションは次のとおりです。

  • クリック – 指定した要素を選択し、ユーザーによる要素のクリックまたは選択をシミュレートします。

    Node.js スクリプトで要素を指定するには、[id=] または a[class=] を使用します。

    Python スクリプトで要素を指定するには、xpath //*[@id=] または //*[@class=] を使用します。

  • セレクタの検証 – 指定した要素がウェブページに存在することを検証します。このテストは、以前のアクションによって正しい要素がページに入力されていることを検証するのに役立ちます。

    Node.js スクリプトで検証する要素を指定するには、[id=] または a[class=] を使用します。

    Python スクリプトで検証する要素を指定するには、xpath //*[@id=] または //*[class=] を使用します。

  • テキストの検証 – 指定した文字列がターゲット要素内に含まれていることを検証します。このテストは、事前のアクションが正しいテキストを表示したかどうかを確認するのに役立ちます。

    このアクションでは Puppeteer の div[@id=]//h1 関数を使用するため、Node.js スクリプト内の要素を指定するには waitForXPath などの形式を使用します。

    Python スクリプトで要素を指定するには、このアクションは Selenium で //*[@id=] 関数を使用するため、implicitly_wait または //*[@class=] などの xpath 形式を使用します。

  • テキストの入力 – 指定したテキストをターゲット要素に書き込みます。

    Node.js スクリプトで検証する要素を指定するには、[id=] または a[class=] を使用します。

    Python スクリプトで検証する要素を指定するには、xpath //*[@id=] または //*[@class=] を使用します。

  • クリックして移動 – 指定した要素を選択した後で、ページ全体が読み込まれるまで待ちます。これは、ページを再度読み込む必要がある場合に最も役立ちます。

    Node.js スクリプトで要素を指定するには、[id=] または a[class=] を使用します。

    Python スクリプトで要素を指定するには、xpath //*[@id=] または //*[@class=] を使用します。

例えば、次のブループリントでは Node.js を使用しています。指定した URL の firstButton をクリックし、予期されたセレクタの予期されたテキストが表示されることを検証します。さらに、名前 Test_Customer を [Name] (名前) フィールドに入力して、[Login] (ログイン) ボタンをクリックし、次のページに Welcome (ようこそ) テキストが表示されることを確認してログインが成功したことを検証します。


              コンソールの Canary の作成ページ。GUI ワークフロー設計図のフィールドが入力されています。

次のランタイムを使用する GUI ワークフロー Canary は、各 Canary 実行に対して実行されたステップの概要も提供します。各ステップに関連付けられたスクリーンショットおよびエラーメッセージを使用して、エラーの根本原因を見つけることができます。

  • syn-nodejs-2.0 以降

  • syn-python-selenium-1.0 以降