Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / CircleCI 2.0とCodecovでNodeJSアプリケーションをテストしてカバレッジを測定する方法(CircleCI 2.0のDockerコンテナ利用版)

2018年4月23日 By KD コメントを書く

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

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

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

見出し

  • 1 CircleCIとは?
  • 2 Codecovとは?
  • 3 CircleCIとCodecovの設定方法
    • 3.1 CircleCIとCondecovのアカウントを作る
    • 3.2 CircleCIとCondecovにGithubのプロジェクトを登録する
    • 3.3 必要なパッケージをインストールする
    • 3.4 package.jsonにコマンドを追加する
    • 3.5 .nycrcファイルを作る
    • 3.6 CircleCIのファイルをを作る
    • 3.7 GithubにPushする
  • 4 最後に
    • 4.1 関連記事

CircleCIとは?

https://circleci.com/

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

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

Codecovとは?

https://codecov.io/

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」をクリックすれば完了です。

スクリーンショット 2018 03 31 22 12 13

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

スクリーンショット 2018 03 31 22 13 36

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

カバレッジ測定と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はこんな感じで表示されます。

スクリーンショット 2018 03 31 22 02 40

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

スクリーンショット 2018 03 31 22 07 23

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

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

最後に

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

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

  • [tips][Subversion] TortoiseSVNのインストール方法

    SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。TortoiseSVN…

  • [tips][perl] Perlのサブルーチン呼び出しにアンパーサンドは必要か?

    Perlでサブルーチンを呼び出す方法はいくつかあります。ググっても正確な情報がヒットしなかったので、自分でまとめておきま…

  • [tips][bat] バッチで「ツェラーの公式」による曜日の計算をする。

    「ツェラーの公式」というのは曜日を計算するための公式です。詳しくはWikipediaに任せて、ここではバッチでのコードを…

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

カテゴリ : 技術 Tips & Tutorials タグ : cicd, circleci, codecov, nodejs

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • PythonのためのVisual Studio Codeの設定方法
    PythonのためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

  • [tips][Subversion] TortoiseSVNのインストール方法

    SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。TortoiseSVN…

  • [tips][perl] Perlのサブルーチン呼び出しにアンパーサンドは必要か?

    Perlでサブルーチンを呼び出す方法はいくつかあります。ググっても正確な情報がヒットしなかったので、自分でまとめておきま…

  • [tips][bat] バッチで「ツェラーの公式」による曜日の計算をする。

    「ツェラーの公式」というのは曜日を計算するための公式です。詳しくはWikipediaに任せて、ここではバッチでのコードを…

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes