AWS CodeBuild で Cypress を実行し結果を S3 に保存する

こんにちは、技術部の S.T です。
今回は CodePipeline で github の変更をトリガーに、CodeBuild 上で Cypress を実行する例を説明したいと思います。
ただし、ここでは CodePipeline よりも CodeBuild の設定によりフォーカスしますので CodePipeline については省略します。

CodeBuild 作成

パイプラインでソースステージの作成が終わったらビルドステージを作成します。新規作成する CodeBuild はイメージに Cypress 公式が公開している ECR を使用することに留意すればその他の設定はお好みで大丈夫だと思います。

CodeBuild 設定内容

環境イメージ：カスタムイメージ
環境タイプ：Linux
イメージレジストリ：Amazon ECR
ECR アカウント：別の ECR アカウント
Amazon ECR レポジトリ URI：以下のリンクからご使用の環境に合わせてコピペ
Cypress 公式 ECR
Amazon ECR イメージタグ：上記をコピペしたら自動で入力される

Buildspec

amazon のイメージではなく、cypress のイメージを使うので、aws コマンドを使えるようにするための処理を書かなくてはならないことに注意しましょう。

				
					version: 0.2

phases:
  install:
    commands:
      - apt-get install zip unzip
      - export TZ="Asia/Tokyo"
      - curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
      - unzip awscliv2.zip
      - ./aws/install
      - npm install -g yarn
      - yarn

  pre_build:
    commands:
      // テストが失敗しなかったらディレクトリが作成されず、
      // s3に上げるときビルド失敗になるのを防ぐ
      - mkdir cypress/screenshots
      - mkdir cypress/videos

      // configファイルはs3から持ってくると無難
      - aws s3 cp s3://任意のs3バケット名/cypress.config.ts cypress.config.ts

  build:
    commands:
      - echo E2E Testing...

      // 自分で設定したテスト実行コマンド
      - yarn cypress:run

    finally:
      // 以前のデータは削除して新しいデータをs3に保存
      - aws s3 rm s3://任意のs3バケット名/videos --recursive
      - aws s3 cp cypress/videos s3://任意のs3バケット名/videos --recursive
      - aws s3 rm s3://任意のs3バケット名/screenshots --recursive
      - aws s3 cp cypress/screenshots s3://任意のs3バケット名/screenshots --recursive

s3 の操作に関するポリシーを codebuild のサービスロールに付与する

				
					{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Effect": "Allow",
          "Action": [
              "s3:GetBucketAcl",
              "s3:PutObject",
              "s3:GetObject",
              "s3:GetBucketLocation",
              "s3:GetObjectVersion",
              "s3:ListBucket",
              "s3:DeleteObject"
          ],
          "Resource": [
              "arn:aws:s3:::使用したいバケット名*"
          ]
      },
  ]
}

これでパイプラインが実行されたときに、Codebuild 上で Cypress が動き、結果が S3 に保存されます。

今後の拡張

シードの処理など書きたくなったら yarn コマンドを作成して buildspec に追加、ポリシーのエラーが出たら都度ポリシーの付与といった繰り返しで基本何とかなると思います。

Cypress 公式ドキュメント AWS CodeBuild setup

スーパーソフトウエアの採用情報

あなたが活躍できるフィールドと充実した育成環境があります

詳しく見る

2023-01-20
テクノロジー