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

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

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のプロジェクトであれば積極的に採用すると良いと思います。では。

The following two tabs change content below.

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

Keid

カナダを拠点に活躍する（予定）デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。（写真はラスベガス）

最新記事 by Keid (全て見る)

• IntelliJ IDEAの設定を複数のPCで同期する方法 - 2019年1月21日
• 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~ - 2019年1月14日
• AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法 - 2019年1月7日