Amazon CloudWatch Syntheticsのビジュアルモニタリングで動的コンテンツも監視する

いわさです。

先日、Amazon CloudWatch Syntheticsにビジュアルモニタリング機能が追加されて試してみました。

ここでは、Webサイトを監視し、視覚的な変化を検出することが出来るかを確認しました。
静的コンテンツのみのWebサイトの場合はこれで問題ないですが、動的コンテンツの場合はどうなるのでしょうか。
監視するWebサイトは静的コンテンツに限らず、パーソナライズされた情報、あるいはランダムなコンテンツや広告など、動的コンテンツは多くのケースで考えられます。

本日は、動的コンテンツにおける挙動の確認と対処方法を確認しました。

動的コンテンツ作成

まずは動的コンテンツなWebサイトを作成します。
もちろん、みなさんの大好きなAWS CodeStarを使っていきます。

今回はコンテンツの修正を行うので、私が慣れているASP.NET Core + C#のテンプレートを選択しました。

数クリックでWebサイトとCI/CDパイプラインがデプロイされました。すごい。

さて、CodeStarでデプロイされる初期Webサイトは各言語のViewテンプレートを使って実装はされていますが、静的コンテンツな状態です。
ここから、メニューとトップページのコンテンツの二箇所を動的に動的に変更してみましょう。

iwasa-test/AspNetCore/WebApplication/Views/Shared/_Layout.cshtml

        <header>
            <nav class="website-nav">
                <ul>
                    <li><a class="home-link" href="https://aws.amazon.com/">Home</a></li>
                    <li><a href="https://aws.amazon.com/what-is-cloud-computing/">About</a></li>
                    <li><a href="https://aws.amazon.com/solutions/">Services</a></li>
                    <li><a href="https://aws.amazon.com/contact-us/">@DateTime.Now</a></li>
                </ul>
            </nav>
        </header>

iwasa-test/AspNetCore/WebApplication/Views/Home/Index.cshtml

@{
    ViewData["Title"] = "Example app";
}
<a class="twitter-link" href="https://twitter.com/home/?status=I just hosted a website on AWS!"><img src="img/tweet.svg" /></a>
<div class="text">
    <h1>@Guid.NewGuid().ToString().Substring(0, 5)</h1>
    <h2>@ViewData["Message"]</h2>
</div>

修正出来たら、CodeCommitへプッシュします。
パイプラインのデプロイフェーズが完了したら動作を確認してみましょう。

リロードします。

リロードのたびに二箇所文字列が変わるようになりましたね。
これで動的コンテンツ化が完了しました。

動的コンテンツを監視してみる

さて、動的コンテンツを監視してみましょう。

今回はちょっとおまけを追加で、ブループリントに１行以下のコードを追加しました。

syntheticsConfiguration.withVisualVarianceHighlightHexColor("#ff0000");

こちらを追加すると、スクリーンショットを確認する際に、変更差分箇所を色付けしてくれて、よりわかりやすくなります。

さて、確認してみましょう。

期待どおりエラーになりました。
やはり動的コンテンツをそのまま監視すると、常に変更点として検出されてしまいますね。

動的エリアの除外機能を使う

ではどのように対処するのが良いでしょうか。
withVisualVarianceThresholdPercentageメソッドでしきい値を調整する方法もあります。
ここでは比較の際に除外エリアを設定する機能があるので使ってみます。

Canaryの編集から、Visual MonitoringのEdit Baselineを選択します。

　ベースライン画像にそのまま除外エリアを矩形選択して設定出来ます。使いやすい。 　 　保存して結果を見てみましょう。

成功しました！
スクリーンショットの比較画像を見てみましょう。

動的部分は内容は違っていますが、監視結果はパスしていますね。
良かったです。

まとめ

• 動的コンテンツはデフォルトのままだと変更点として検出され続けてしまう
• 除外機能などを使って動的部分の除外を行うことは可能