AngularJSのプロダクトコードをJenkinsで運用する #JavaScript

AngularJSそのものから離れますが、製造作業を行うときのCIを取り扱います。

開発でCIを利用することがセオリーになりつつ有ります(もしかすると、もう一般的になってますか)。
その利点を簡単に上げるとすると、

テストコードを実装している事前提ですが)日々、結合テストを自動で行える
日々結合を行うことで問題発見を早期に行える。
つまり、テスター有りきのテストフェーズではなく、日々製造担当者間で問題点を把握できる

上記は、云うは易しですが、運用ノウハウを継続的に溜めていかなければ、結局、タダの無用な長物になります。しかし、慣れてしまえば強力なサポーターとして必要な存在になることは間違いありません。

具体的なCIについての詳しい説明は他の記事を参考にしてもらうことにして、
AngularJSで作成したプロダクトについても同様にCIで運用できるようになれるよう、個人的にはまだまだ経験的に浅いノウハウですが、参考記事になれば幸いです。

CIを選ぶとするならば様々な良いものがあると思いますが、慣れているJenkinsにします。また、AngularのTutorialのKarmaを利用した形で取りまとめます。

Jenkins+Karma に実行してもらうことは下記の作業です。

ソースビルド
Unitテスト
e2eテスト
カバレッジ計測
デプロイ

※今回コード規約チェックは省いています。

本記事の作業を行う上で必要なもの：

Linux OSの環境かつBash環境
curl
git
Java および Java ランタイム環境

インストール方法

Jenkinsのインストール

http://jenkins-ci.org/ このページにインストール方法は、OSにあわせて記述されています。
そちらを参照してください。

実際の運用では、JenkinsはJarファイルが用意されているので、何も考えずにTomcatをインストールして、
Tomcatの公開ディレクトリ配下に設置して起動させる方法で実現してます。

JenkinsのPlugin:EnvInjectのインストール

Jenkins管理のプラグイン管理にて、利用可能なプラグインのリストに表示されているので、チェックを付けてインストールします。
KarmaのJenkins CIページではこのプラグインをインストール前提で説明が記述されています。

テストランナーの準備

Node.js、NPM、Karmaは、ビルド時に構築する形にするため、KarmaのマニュアルどおりNVMを利用します。

下記を実行するシェルを作成して、毎度Jenkinsのシェル実行を実施するようにします。

git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm install 0.10
nvm use 0.10
npm install -g karma
npm install karma-coverage --save-dev
npm install karma-junit-reporter

まだ、完全にうまく行っていないところもあるため、後々上記は更新する可能性があります。

ソースの取得

Subversionなり、Gitなりで、ソースを管理している前提で話をします。
また、Karmaの設定ファイルは予めcommitしておきます。しかし、テスト実行に必要となるプロダクトコード以外の部分で必要となるソースに関しては、CI実行時に都度取得する形の構成にするのが一般的のようです。

例えば、上記のKarmaのインストールのように、テスト実行にかかわるファイル群はバージョン管理しません。
テスト実行前に最新版を取得するかもしくは、lockファイルなどに記述された安定版をダウンロードしてセットアップする方法にします。

karma.conf.jsの設定方法

karma.conf.jsは、プロダクトコードに依存する部分なので、バージョン管理します。
基本的にKarma Jenkins Ciページに載っている内容になりますが、追加した部分を抜粋して、下記に載せます。
下記は、デフォルト設定のsingleRunをTrueにして、新たに追加しました。

karma.conf.js

    singleRun: true,
    reporters: ['dots', 'junit', 'coverage'],
    junitReporter: {
      outputFile: '/var/lib/jenkins/jobs/[Project Name]/workspace/test-results.xml'
    }
    // optionally, configure the reporter
    coverageReporter: {
      dir : '/var/lib/jenkins/jobs/[Project Name]/workspace/coverage/',
      reporters: [
        {
          type : 'html'
        },
        { // jenkins xml
          type : 'cobertura',
          file: 'clover.xml'
        }
      ]
    }

上記の「[Project Name]」の部分は、利用する際に実際のプロジェクト名で置き換えてください。
また、jenkinsのパスはデフォルトで利用した場合に設定されていた場所になるため、場所が異なる場合も正しい置き換える必要があるので注意です。

※karma.e2e.conf.jsは現在設定内容を検討中です。

Jenkinsのプロジェクト作成

Jenkinsに作成するプロジェクトは下記の通り2つ作成します。

Test実行ジョブ
- AngularJSのプロダクトのJavascriptテストコードを実行するジョブです。
- 取得するソースはSubversionかGit管理されたソースを指定します。
- 環境変数の設定やレポート設定はKarmaの公式ページを参照
- シェル実行には、上記で作成したKermaのインストールシェルコマンドを指定した後、「karma start」行を追加します。
- Coverageレポートのclover.xmlの書式はJenkins1.2ではエラーとなるため、読み込ませる意味がなく、HTMLレポートを参照する形にするしかないようです。
デプロイジョブ
- AngularJSのプロダクトのテストがオールグリーンになった時に結合環境にデプロイするジョブです。
- Capistranoなどのデプロイスクリプトを利用するのが王道です。
- ソースのデプロイ時に、プロダクトコード以外のライブラリなどは直接ダウンロードして設置するようにします。
- デプロイ後にテスト実行することはないため、Karma関係のソースはここでは特に触れる必要はありません。

以上で、一先ずレポートを終わります。
現在、この記事を書きながら同時並行で環境構築を行っているため、途中経過の報告になってしまっているため、
若干具体性にかけますが、今後、作業を進めてわかったところから、上記の記事も更新していく予定です。

実際の作業ではこの他にSymfony2のプロダクトコードも有ります。
e2eテストの部分をどのように記述すればいいのか、現状も解っていません。
AngularのTutorialだと、e2eテストは静的なindex.htmlに対して行うため、特に問題なかったのですが、
e2eテストをSymfony2などの動的なスクリプトが生成したHTMLに対してテストすることを考えた場合、Javascriptだけでなくサーバーサイドのコードも動作させた形で読みこませなければならず、ディレクトリ構造とかバージョン管理するソースコードの構成をどうするとかそういったことを検討する必要があります。

おいおいノウハウを貯めながら、機会があればこちらでレポートさせていただく予定です。