🕌

CloudWatch SyntheticsでFrontendの外形監視をする

2022/01/31に公開

AWS

概要

CloudWatch Syntheticsを使って、Webアプリケーションの外形監視をする方法の紹介。

URL監視の方法
シナリオテストの実行方法
Synthetics(Canary)をCloudFormationでデプロイする方法
- ユーザー名やパスワードをCloudFormationのテンプレートに書かない方法
- (SecretManagerを使う方法)

CloudWatch Syntheticsとは

(省略)

AWSでWebアプリケーションやAPIなどの外形監視を実行することのできるサービスです。
最近リリースされたサービスかと思ってましたが、2020/04にリリースされたようです。
AWS CloudWatch RUMなども最近発表されており、個人的には、DatadogやRewRelicなどのSaaSとの棲み分けや将来性が気になっていました。

URL監視の方法

こちらのサイトが非常に参考になりました。まずは動かしてみたい場合はこちらのサイトの通りやると雰囲気つかめると思います。

上記サイトとほとんど被るので省略しますが、CloudWatch SynctheticsはCloudWatch SynctheticsはCloudWatchの左のタブから選ぶことができ、Canaryの作成を押すと次の画面へ遷移します。

デフォルトの設定のまま、「名前」と「エンドポイントURL」を入力すると、指定したURLに対してのURL監視(200を返すかのテスト)を作成することができます。

(めっちゃ簡単で驚きました)

シナリオテストの実行方法

次にやりたかったのは、シナリオテストの作成です。
シナリオテストとは、「ログインしてダッシュボードが開かれて、画面遷移できること」のような一連の流れをテストするものです。Cypressを使ってテストを書いたことはあったのですが、CloudWatch Syntheticsの場合もスクリプトを書く必要があってそこそこ敷居の高いものなのかと思っていました。

CloudWatch Synthetics Recorder

と、思っていると、CloudWatch Synthetics Recorderなるものがあることがわかりました。
こちらも説明に関しては以下のサイトを見たほうが速いので省きますが、RecorderのChrome拡張を使うと、

レコーディング開始
画面遷移や入力をする
スクリプトが生成される
をやってくれます。

生成されたスクリプトをGUI上に貼り付けてCanaryを作成して動作確認することができます。
ここでは、多少ソースコードを確認することと、タブ等の操作やキャッシュの関係で問題なくレコーディングできたつもりでもテストに失敗することがあるので、気をつける必要がありそうでした。

Synthetics(Canary)をCloudFormationでデプロイする方法

外形監視でSaaSを使っている感覚と似ているので、CloudFormationなどのIaCを使わなくてもいいかと思いましたが、なるべくコード管理したいのでCloudFormationからのデプロイを試してみました。

CloudFormationでCanaryをデプロイする

さきほどから、他の人のブログの貼り付けばかりですが、ここでも非常に参考になるQiitaの記事があったので紹介します。

Canary:
    Type: AWS::Synthetics::Canary
    Properties:
      Name: !Ref CanaryName
      ExecutionRoleArn: !GetAtt SyntheticsIamRole.Arn
      Code:
        Handler: pageLoadBlueprint.handler
        Script: !Sub >
          var synthetics = require('Synthetics');
	  (略)
      ArtifactS3Location: !Sub 's3://${SyntheticsResultsBucket}'
      RuntimeVersion: syn-1.0
      Schedule:
        DurationInSeconds: 0
        Expression: 'rate(5 minutes)'
      RunConfig:
        TimeoutInSeconds: 60
      FailureRetentionPeriod: 31
      SuccessRetentionPeriod: 31
      StartCanaryAfterCreation: true

のように、CanaryリソースやAlarmを設定します。

SecretManagerを使う

レコーダーを使って、スクリプトを自動生成すると、ユーザー名やパスワードが入力したものが、次のようにそのままスクリプトに起こされてしまいます。

                  await synthetics.executeStep('Type_5', async function() {
                    await page.type('.content-wrapper > .content__article > .login > .login__input-group > .form-input-text:nth-child(4)', "PASSWORD")
                  })

この状態で、Gitなどで管理するのは避けたいので、SecretManagerを使うことにしました。
先程の”PASSWORD"部分については、${CanaryPassword}などで変数化します。

                  await synthetics.executeStep('Type_5', async function() {
                    await page.type('.content-wrapper > .content__article > .login > .login__input-group > .form-input-text:nth-child(4)', "${CanaryPassword}")
                  })

そして、CanaryPasswordのパラメータを定義します。SecretManagerから値を取得するには次のように書くようです。(事前に、SyntheticsSecretという名前のSecretがpasswordをキーにした値を持つようにSecretManagerの作成が必要です)

  CanaryPassword: 
    Type: String
    Default: '{{resolve:secretsmanager:SyntheticsSecret:SecretString:password}}'

これで、安全な？CloudFormationテンプレートとしてSyntheticsのスクリプトを管理できるようになりました。

補足

調べた例や、試したものは、5分おきなどの定期実行でしたが、EventBridge等と同様にCron式でも設定できるようです。

まとめ

ほとんど他者のサイトへのリンクでしたが、CloudWatch Syntheticsを導入できそうでした。
他のSaaSを使っている場合などはそちらの外形監視を使ったほうが良い場合もあるかと思いますが、何も外形監視がない場合などの場合などではAWSの契約内で作成できる、かつ、コストも安いので良いサービスだなと感じました。

概要