Continuous Integration

継続的な統合

One of the best ways to keep your project bug free is through a test suite, but it's easy to forget to run tests all the time. プロジェクトの欠陥を粛清する最善の方法の一つは、テストキットを通過することですが、いつでもテストを実行することを忘れるのは簡単です.
That's where Continuous Integration (CI) servers come in. You can set up your project repository so that your tests run on every commit and pull request. これが継続的な統合(CI)サーバの活用の場である.プロジェクト・リポジトリを設定して、要求の発行と発行のたびにテストを実行できるようにします.
There are paid CI services like Circle CI and Travis CI, and you can also host your own for free using Jenkins and others. Circle CIやTravis CIなどの有料CIサービスがあり、Jenkinsや他の人が無料でプロジェクトを管理するサービスも利用できます.
Even though Circle CI and Travis CI are paid services, they are provided free for open source projects. You can create a public project on GitHub and add these services without paying. Circle CIとTravis CIは有料サービスですが、オープンソースプロジェクトに無料で提供されています.GitHubで公共プロジェクトを作成し、料金を払うことなくサービスを追加できます.We're going to see how to update your test configuration to run in CI environments, and how to set up Circle CI and Travis CI. CI環境で実行するためにテスト構成を更新する方法と、Circle CIとTravis CIを設定する方法について説明します.

Update test configuration

テスト構成の更新

Even though ng test and ng e2e already run on your environment, they need to be adjusted to run in CI environments. ng testおよびng e2eすでに環境で実行されている場合でも、CI環境で実行するには調整が必要です.
When using Chrome in CI environments it has to be started without sandboxing. We can achieve that by editing our test configs. CI環境でChromeを使用する場合は、砂箱を使用せずに起動する必要があります.この点は、テスト構成を編集することで実現できます.
Inkarma.conf.js、add a custom launcher calledChromeNoSandboxbelowbrowsers:karma.conf.jsで、カスタム起動を1つ追加ChromeNoSandboxでbrowsers:

browsers: ['Chrome'],
customLaunchers: {
  ChromeNoSandbox: {
    base: 'Chrome',
    flags: ['--no-sandbox']
  }
},

Create a new file in the root of your project calledprotractor-ci.conf.js,that extends the originalprotractor.conf.js:プロジェクトルートディレクトリにファイル名を作成protractor-ci.conf.js,拡張内protractor.conf.js:

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--no-sandbox']
  }
};

exports.config = config;

Now you can run the following commands to use the--no-sandboxflag:次のコマンドを実行して使用できます--no-sandboxフラグ:

ng test --single-run --no-progress --browser=ChromeNoSandbox
ng e2e --no-progress --config=protractor-ci.conf.js

For CI environments it's also a good idea to disable progress reporting (via --no-progress ) to avoid spamming the server log with progress messages. CI環境では、進捗レポート(via--no-progress)を無効にすることも良いアイデアであり、進捗メッセージを使用してサーバログに迷惑をかけないようにします.

Using Circle CI

Circle CIの使用

Create a folder called.circleciat the project root,and inside of it create a file calledconfig.yml:プロジェクトルートディレクトリの下に.circleciというフォルダを作成し、その中にconfig.ymlというファイルを作成する.

version: 2
jobs:
  build:
    working_directory: ~/my-project
    docker:
      - image: circleci/node:8-browsers
    steps:
      - checkout
      - restore_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
      - run: npm install
      - save_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
          paths:
            - "node_modules"
      - run: xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
      - run: xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js

私たちはここでいくつかのことをしました

node_modules is cached. キャッシュnode_modules.

npm run is used to run ng because @angular/cli is not installed globally. The double dash ( -- ) is needed to pass arguments into the npm script. npm runは、ngを実行するために使用されます.@angular/cliグローバルインストールがないためです.パラメータをnpmスクリプトに渡すには、二重ダッシュ(--)が必要です.

xvfb-run is used to run npm run to run a command using a virtual screen, which is needed by Chrome. xvfb-run実行用npm runChromeに必要な仮想画面でコマンドを実行する.

Commit your changes and push them to your repository. 変更をコミットし、リポジトリにプッシュします.
Next you'll need to sign up for Circle CI and add your project. Your project should start building. 次に、Circle CIを登録し、プロジェクトを追加する必要があります.あなたのプロジェクトは建設を始めるべきです.
Be sure to check out the Circle CI docs if you want to know more. 詳細については、Circle CI docsドキュメントを参照してください.

Using Travis CI

Travis CIの使用

Create a file called.travis.ymlat the project root:プロジェクトルートディレクトリの下に名前を作成します.travis.ymlのファイル:

dist: trusty
sudo: false

language: node_js
node_js:
  - "8"
  
addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

cache:
  directories:
     - ./node_modules

install:
  - npm install

script:
  # Use Chromium instead of Chrome.
  - export CHROME_BIN=chromium-browser
  - xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
  - xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js

Although the syntax is different, we're mostly doing the same steps as were done in the Circle CI config. The only difference is that Travis doesn't come with Chrome, so we use Chromium instead. 構文は異なりますが、主にCircle CI構成と同じ手順を実行します.唯一の違いはTravisにChromeが搭載されていないのでChromiumを使用します.
Commit your changes and push them to your repository. 変更をコミットし、リポジトリにプッシュします.
Next you'll need to sign up for Travis CI and add your project. You'll need to push a new commit to trigger a build. 次に、Travis CIを登録し、プロジェクトを追加する必要があります.新しいコミットをプッシュして構築をトリガーする必要があります.
Be sure to check out the Travis CI docs if you want to know more. 詳細については、Travis CIドキュメントを参照してください.