S3の公開設定を回避しながらreg-suitを活用する方法：セキュアなビジュアルリグレッションテストの手順

reg-suitとは

reg-suitは、オープンソースのビジュアルリグレッションテストツールです。
Webアプリケーションのビジュアル変更を自動的に検出し、差分を視覚的に表示することができます。

reg-suitは、ビジュアルリグレッションテストを効率的かつ正確に実施するための強力なツールです。
ビジュアルの変更やレイアウトの崩れを自動的に検出し、問題の特定と解決に貢献します。

プラグインの利用

reg-suitは、プラグインを活用することにより、ビジュアルリグレッションテストの手間を効果的に軽減できる特徴があります。
例えば、比較元の画像を自動的に検出するプラグインを使用することで、手動で比較元の画像を指定する手間を省くことができます。
また、通知先をプラグインで設定することも可能です。例えば、テスト結果の通知を特定のチャネルやツールに送信するためのプラグインを利用することができます。

reg-suitのプラグインの1つに、reg-publish-s3-pluginがあります。
このプラグインは、ビジュアルリグレッションテストの結果をAWS S3に自動的に公開するために使用されます。
このプラグインを利用すると、テスト結果をAWS S3バケットにアップロードし、公開するプロセスを自動化することができます。

reg-publish-s3-pluginを使用すると、テスト結果やレポートを簡単にAWS S3にアップロードできます。しかし、通常、S3にアップロードされたデータは公開されるため、セキュリティ上の懸念が生じることがあります。

そこで、本記事では公開設定を回避する方法を解説します。これにより、テスト結果やレポートをS3に安全に保存できるだけでなく、関係者だけがアクセスできるようになります。

具体的な手順や設定方法について詳しく解説しますので、reg-publish-s3-pluginを利用する際にセキュリティ上の懸念がある方やS3の公開設定を回避したい方は、ぜひ本記事をご参照ください。安心してテスト結果を管理し、プロジェクトの品質管理を強化しましょう。

手順

サンプルの準備

本記事では、reg-simple-demoをベースに実際の手順を進めていきます。
もし実際に手を動かして確認したい場合は、お手元にリポジトリをクローンしてください。

S3バケットの作成

本記事で使用するS3バケットを作成します。 S3バケットを作成する際には、「ACL無効化」および「パブリックアクセスはすべてブロック」の設定を選択してください。

CloudFrontの設定

現状では、テスト結果レポートを閲覧することができませんので、CloudFrontとCloudFront Functionsを利用して設定を行います。

CloudFront Functions関数の作成

CloudFront Functions関数を使用して、Basic認証を設定します。

以下のように関数コードを記述してください。

CloudFrontディストリビューションとの関連付けを後で行うために、事前に発行しておきます。

ディストリビューション新規作成

ディストリビューションを新規作成します。

オリジンアクセス

以下の手順に従って、オリジンアクセス設定を行ってください。

関数の関連付け 

ビューワーリクエストに、先ほど作成したCloudFront Functions関数を指定してください。

デフォルトルートオブジェクト

デフォルトルートオブジェクトにはindex.htmlを指定してください。

S3バケットポリシーの更新

ディストリビューションが作成された後、S3バケットのバケットポリシーを更新します。

以下のポリシーをコピーして、先ほど作成したS3バケットのバケットポリシーを更新してください。

regconfig.jsonの変更

regconfig.jsonはreg-suitの設定を記述するファイルです。 以下の変更を行ってください。

• bucketNameの値を変更する
• aclの値をprivateに変更する
• customDomainの値をディストリビューションのドメイン名に変更する

"reg-publish-s3-plugin": {
  "bucketName": "変更後のバケット名",
  "acl": "private",
  "customDomain": "ディストリビューションのドメイン名"
}

IAMポリシー

reg-suitのテスト実行時にS3へのアップロードなどが行われます。

テスト実行環境の認証情報に以下のIAMポリシーを付与してください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "reg-suit-s3-access",
            "Effect": "Allow",
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:ListBucket",
                "s3-object-lambda:Get*",
                "s3-object-lambda:List*"
            ],
            "Resource": "arn:aws:s3:::変更後のバケット名"
        }
    ]
}

動作確認

reg-suitのテストコマンドを実行してください。

これにより、ビジュアルリグレッションテストが実行され、テスト結果とレポートが指定したS3バケットにアップロードされます。

$ yarn reg-suit
[reg-suit] info version: 0.7.26
[reg-suit] info Detected the previous snapshot key: 'd03fd7e62e385fbcabcdb6156f397418b4f1ca48'
[reg-suit] info Comparison Complete
[reg-suit] info    Changed items: 0
[reg-suit] info    New items: 1
[reg-suit] info    Deleted items: 0
[reg-suit] info    Passed items: 0
[reg-suit] info The current snapshot key: '38a56dab47e338eb4239f40adc1dc05fbba16f24'
                                         ■ 0% | ETA: undefineds | 0/5[reg-publish-s3-plugin] info Upload 5 files to dws-jp-reg-suit-test.
 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 100% | ETA: 0s | 5/5
[reg-suit] info Published snapshot '38a56dab47e338eb4239f40adc1dc05fbba16f24' successfully.
[reg-suit] info Report URL: https://dy07sg7u4qors.cloudfront.net/38a56dab47e338eb4239f40adc1dc05fbba16f24/index.html
[reg-notify-github-plugin] info Update status for 38a56dab47e338eb4239f40adc1dc05fbba16f24 .
[reg-notify-github-plugin] info Comment to PR associated with master .

出力に含まれるReport URLにWebブラウザでアクセスすると、最初にBasic認証のユーザー名とパスワードの入力が求められるようになりました。

正しいユーザー名とパスワードを入力すると、レポートを閲覧することができます。

jp