Android担当のseitoです。最近弊社ではCordovaを使ったアプリ開発に力を入れています。

今回はそのCordovaでCIを回したくてDocker+werckerでCI環境を作ってみました。

ざっくりとした手順は

1 werckerで呼び出すDockerイメージの作成

2 作成したDockerイメージをDocker Hubへプッシュ

3 wercker.ymlファイル作成

です。

 

1 werckerで呼び出すDockerイメージの作成

Docker Toolboxが入ってる前提で進めます。
まずはベースとなるOSを取得します。
Docker Quickstart Terminalを開きます。今回はCentOS6をベースにします。

docker pull centos:centos6

ダウンロードが始まります。しばらく待っているとダウンロード完了。
実際にダウンロードできたのか確認します。

$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
centos                    centos6             2f96ee8baf17        2 weeks ago         228.9 MB

無事できました。
次に先ほど取得したイメージからコンテナを作成します。

docker run -it centos:centos6

上記コマンドを実行すると作成されたコンテナ内のターミナルが開かれると思います。
実際にコンテナが起動しているか確認してみます。ctrl+p+qを押すとコンテナを起動したままコンテナ内のターミナルからexitできます。
コンテナが起動しているか調べます。docker psを使います。

$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
a6f43b17c7e5        centos:centos6      "/bin/bash"         17 seconds ago      Up 16 seconds                           evil_hypatia

コンテナが起動してるのがわかりますね。
それではこのコンテナにモジュールを色々入れていきます。今回はCordovaでionicというフレームワークを使用しているので
ionicコマンドが打てるようにしたいです。
なので今回は
・node.js
・npm
をインストールして
・cordova
・ionic
です。それでは再びコンテナに入ります。
起動しているコンテナに入る時はdocker attachを使います。

$ docker attach a6f

ログインできました。
次にnode.jsをインストールします

# rpm -Uvh https://rpm.nodesource.com//pub_4.x/el/6/x86_64/nodesource-release-el6-1.noarch.rpm

現時点で生きてるrpmです。

# yum install nodejs

インストール後、動作確認します。

# node -v
v4.4.3

問題なさそうです。
続いてnpmも入れます。

# yum install -y npm

動作確認します。

# npm -v
2.15.1

後はnpmでcordovaとionicを入れるだけです。

# npm install -g cordova
# npm install -g ionic

ionicコマンドが打てればOKなので確認

# ionic -v
1.7.14

できました。
それではこのコンテナをイメージにしたいと思います。
docker commitを使います。
一旦ctrl+p+qでコンテナから抜けます。

$ docker commit a6f plusrseito/sample

イメージ名は適当です。
イメージの確認を行います。

$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
plusrseito/sample         latest              40775aeb5d44        21 seconds ago      631.8 MB

これでDocker Hubへ上げるコンテナができました。

2 作成したDockerイメージをDocker Hubへプッシュ

できたコンテナをwerckerから呼び出せるようにDocker Hubへ上げます。
Docker Hubのユーザ登録手順は省きます。

まずログインします。

$ docker login

docker pushでローカルにあるイメージをDocker Hubへあげます。
先ほど作ったイメージをあげます。

$ docker push plusrseito/sample

今更ながらもうちょいまともな名前にすればよかった。
コマンドを叩くとアップロードが始まります。
作ったイメージのサイズによりますが、けっこう時間かかります。
完了したらDocker Hubのダッシュボードでイメージが上がっているか確認します。

スクリーンショット 2016-04-20 11.14.47

無事アップロードできました。既に2回プルされてるのは何だろう?と気になりつつもスルーします。

3 wercker.ymlファイル作成

前提として、対象プロジェクトのリモートリポジトリをwerckerと関連付ける作業が終わってるものとします。

実際にCordovaのプロジェクトで作ったDockerイメージを使っていきます。
Cordovaのプロジェクト直下にwercker.ymlを作成します。

wercker.yml

box: plusrseito/sample
build:
  steps:
    - script:
        name: check ionic version
        code: |
          ionic -v

今回はサンプルなのでバージョンチェックのみです。
wercker.ymlを追加したら変更をコミット・プッシュします。
werckerの対象プロジェクトのページでCI状況を確認します。

スクリーンショット 2016-04-20 11.24.51

スクリーンショット 2016-04-20 11.27.36

ビルドに成功してますね。
これで自分で作ったDockerイメージを使ってwerckerでCIする環境が整いました。

注意点として、wercker.ymlに記述するコマンドは一度Dockerコンテナ作成中に試しておくことをお勧めします。
ionic state resetやionic build等を使ったときにnpmパッケージが足りないというエラーが出てはまりました。
docker run でvオプションを使うとローカルディレクトリとコンテナ内のディレクトリを同期できるので、自分はその方法で
プロジェクトを取り込み動作確認してからDocker Hubに上げるようにしています。

それでは良いCIライフを。

 
Set your Twitter account name in your settings to use the TwitterBar Section.