Angular アプリケーションを AWS CodeBuild でテストする方法

岩佐 孝浩

2020年5月4日

4 min read

Angular CodeBuild

CI/CD パイプラインで Angular アプリケーションをテストすることは、品質と信頼性を確保するために重要です。AWS CodeBuild と Headless Chrome を組み合わせることで、効率的に自動テストを実行できる強力なプラットフォームを構築できます。本記事では、CodeBuild 上で Angular のテストを実行するための設定とコマンドを順を追って解説します。

以下の要件が満たされていることを確認してください。

• AWS CodeBuild プロジェクトが適切な権限で設定されていること。
• Angular アプリケーションが @angular/cli で設定されていること。

buildspec.yml ファイルは CodeBuild のコマンドやフェーズを定義します。以下は Angular テストに特化した設定例です。

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g @angular/cli
      # Install puppeteer as a dev dependency
      - npm i -D puppeteer
      - npm i -D @angular-devkit/build-angular
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Upgrade apt
      - apt-get upgrade
      # Update libs
      - apt-get update
      # Install apt-transport-https
      - apt-get install -y apt-transport-https
      # Use apt to install the Chrome dependencies
      - apt-get install -y libxcursor1
      - apt-get install -y libgtk-3-dev
      - apt-get install -y libxss1
      - apt-get install -y libasound2
      - apt-get install -y libnspr4
      - apt-get install -y libnss3
      - apt-get install -y libx11-xcb1
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Install project dependencies
      - npm install
  build:
    commands:
      - echo Testing started on `date`
      - ng test --watch=false --browsers=ChromeHeadless

• ヘッドレスブラウザ: --browsers=ChromeHeadless フラグ（35行目）は、ヘッドレス Chrome 環境でテストを実行することを保証します。これは、CI/CD パイプラインに最適です。
• 依存関係: libgtk-3-dev や libx11-xcb1 などのライブラリをインストールすることで、ヘッドレス環境で Chrome との互換性が確保されます。
• デバッグ: インストール前後に ldd を使用して不足しているライブラリを確認することで、一般的な問題のトラブルシューティングを行うのに役立ちます。

上記の設定を実行中に、次のエラーが発生する場合があります。

[1889:1889:0502/194708.787545:ERROR:browser_main_loop.cc(1512)] Unable to open X display.

これを解決するには、必要なすべての依存関係 が install フェーズでインストールされていることを確認してください。

• ヘッドレス Chrome の使用: ディスプレイサーバーが不要なため、CI/CD パイプラインを最適化できます。
• 依存関係の更新: 互換性の問題を避けるために、buildspec.yml 内のライブラリバージョンを定期的に更新します。
• テストカバレッジの監視: Karma や Istanbul といったツールを統合し、コードカバレッジを継続的に追跡します。
• 並列ビルド: テスト中のフィードバックを迅速化するために、CodeBuild を設定して並列ビルドを実行します。

本記事で説明した手順を実践することで、Angular のテストを AWS CodeBuild パイプラインにシームレスに統合し、アプリケーションの品質と信頼性を確保できます。適切な設定を行うことで、ヘッドレス環境でのテスト実行をシンプルかつ効率的に実現できます。

Happy Coding! 🚀