CircleCI 2.0とCodecovでNodeJSアプリケーションをテストしてカバレッジを測定する方法(CircleCI 2.0のDockerコンテナ利用版)

アプリケーション開発の世界では、CIやCDという言葉はもはや一般的な用語となってきました。その実現のために一昔前まではJenkinsサーバーを自前で構築することが多かったのですが、今ではCircleCIやTravisCIなどのサービスを利用する事で簡単に実現できるようになりました。今回は、CircleCI上でテストを実行させ、Codecov上でカバレッジを測定する方法を紹介します。

見出し

1 CircleCIとは？
2 Codecovとは？
3 CircleCIとCodecovの設定方法
4 最後に
- 4.1 関連記事

CircleCIとは？

CircleCIとはCIやCDを実現するためのSaaSです。YAMLファイルで設定を書くだけで、GithubにPushした対象プロジェクトのCIやCDを自動で行ってくれます。Githubのパブリックなリポジトリであれば無料で利用できます。

一応ですが、CIとは、Continuous Integration (継続的インテグレーション)の略で、要は自動テストを継続的に行って品質を維持しましょう、という考え方です。CDとは、Continuous Delivery (継続的デリバリー)の略で、要は自動テスト後に自動デプロイまで行う仕組みを作って効率化しましょう、という考え方です。一昔前はアジャイル信者みたいな人がこの言葉を好んで使っていましたが、今ではアプリケーション開発においては一般的な言葉なので、もし知らなければ覚えておきましょう。

Codecovとは？

Codeconvとはカバレッジ測定に特化したSaaSです。カバレッジ測定の際にcoverage.lcovファイルを出力さえしておけば、単にプロジェクトを登録するだけで、カバレッジが測定できます。CircleCIとの連携も簡単です。もちろん、Githubのパブリックなリポジトリであれば無料で利用できます。

CircleCIとCodecovの設定方法

それでは設定をしていきましょう。

前提として、すでにテストコードが一つ以上あるNodeJSのアプリケーションがGithub上にあるものとします。

CircleCIとCondecovのアカウントを作る

CircleCIはここから、Codecovはここからアカウントを作って下さい。アカウントを作ると言ってもGithubのアカウントでログインすればOKです。

CircleCIとCondecovにGithubのプロジェクトを登録する

CircleCIでは「ADD PROJECTS」から登録したいプロジェクトを選んで「Set Up Project」をクリックすれば完了です。

Codecovでは「Add new repository」から登録したいプロジェクトを選んで登録すれば完了です。

必要なパッケージをインストールする

カバレッジ測定とCodecovへアップロードするためにパッケージをインストールします。

$ cd my-nodejs-with-test-project
$ yarn add --dev mocha
$ yarn add --dev nyc codecov

一応mochaもインストールしていますが、NodeJSでテストコードを書いたことがある人なら最初からインストールされているはずですね。

package.jsonにコマンドを追加する

CircleCIで実行してもらうコマンドを追加します。

$ vi package.json
  "scripts": {
  ...
    "test": "nyc mocha server/test/**/*test.js",
    "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
    "test-ci":
      "nyc mocha server/test/**/*test.js && yarn coverage",
  ...
  }

テストコマンドをローカル用のtestとCircleCI用のtest-ciに分けておきます。

.nycrcファイルを作る

Nycによるカバレッジ測定のためのファイルを作成します。

$ touch .nycrc
$ vi .nycrc
{
    "check-coverage": true,
    "per-file": true,
    "lines": 90,
    "statements": 90,
    "functions": 90,
    "branches": 90,
    "include": ["server/src/**/*.js"],
    "exclude": ["server/src/config/config.js"],
    "cache": true
}

カバレッジは90%を基準として設定しています。includeはカバレッジ測定の対象とするファイルを、excludeはカバレッジ測定の対象としないファイルを記載します。詳細な設定はNycのGithubを参照して下さい。

これらの設定はpackage.json上に書いてもよいです。

CircleCIのファイルをを作る

CircleCI用のフォルダとファイルを作成します。

$ mkdir .circleci
$ touch .circleci/config.yml
$ vi .circleci/config.yml
version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:9.8.0
      - image: circleci/mongo:3.6.3
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          - v1-dependencies-
      - run: yarn install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run:
          name: Wait for db
          command: dockerize -wait tcp://localhost:27017 -timeout 1m
      - run:
          name: Test
          command: |
            yarn test-ci

内容としては、Docker上にNodeJSとMongoDBのコンテナを作り、先程追加したtest-ciコマンドでテストを実行するように設定しています。詳細はCircleCIの公式ドキュメントを参照して下さい。

GithubにPushする

最後に、プロジェクトをGithubにPushします。

$ git add .
$ git commit -m 'Add CICD configs'
$ git push origin master

すると、自動でCircleCIが実行され、テストを実行した後で、カバレッジ情報をCodecovに自動で送信してくれます。

CircleCIはこんな感じで表示されます。

Codecovはこんな感じで表示されます。

分かりやすいですね。CircleCIではテストが成功すると緑色、失敗すると赤色で表示されます。失敗した場合はログインしているユーザにメールで連絡が来ます。Codecovではカバレッジの条件を満たしていれば緑色、満たしていない場合は赤色で表示されます。これは便利ですね！しかも、ここまでやって無料ですから素晴らしいの一言です。

実は表示されているプロジェクトはそれぞれ異なっているのですが、これはブログ用に自分のプロジェクトから持ってきたものなので気にしないで下さい。もちろん実際は同じプロジェクトで表示されます。

最後に

いかがでしたか？今までJenkinsでやっていたことが、設定ファイルを書くだけでいとも簡単に実現できるCircleCIとCodecovの素晴らしさを知ることができたのではないでしょうか。Githubのプロジェクトであれば積極的に採用すると良いと思います。では。

この記事を書いた人
最新の記事

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。