目的
GitHubのREADME.mdにこのようなバッチが表示されているのをみてかっこいいなぁと思ったので真似してみたいと思った。
バッジの表示には種類が沢山ありますが今回は、Travis CI を利用した継続的インテグレーションについて記載してみたいと思います。
継続的インテグレーションとは
継続的インテグレーションとは、ソフトウェア開発過程において頻繁にテストを行うことで問題を早期に発見し品質の向上を図る開発手法です。テストを毎回手動で行うのには手間がかかるので、特定のタイミングで自動的にテストを実行し、テスト完了後にその結果を通知するCIツールとして利用されます。
CIツールとしてよく知られているものとして「Jenkins」などがありますが、多くのツールでは独自にテストのための環境を構築しなければなりません。「Travis CI」はGitHubと連携した自動テスト実行サービスで、サービス提供側のサーバー上でテストが実行されるため、最小限の設定のみでCIを導入できるのが特徴です。
Travis CIを使ってみる
こちらから、TravisCI にSignInしてを使用したいGithubリポジトリを選択します。TravisCIの右上にあるアカウントアイコンを選択し、Accountsを選択するとGithubに公開しているリポジトリが下部にリスト表示されるので、リストの中からTravisCIを使いたいリポジトリを選択して有効にしてください。
TravisCI でビルドさせるための定義ファイルを用意する
TravisCIで実行するプログラムを.travis.ymlというファイルで定義します。ローカルにあるプロジェクトのルートに.travis.ymlファイルを作成し、以下のような記述します。
.travis.yml
language: node_js
node_js:
- 12
dist: trusty
sudo: false
cache: yarn
script:
- yarn run generate
これは、Node.js のversion12を利用して、webpackのソースコードをgenarateするだけのシンプルなコードです。
これで、GitHubにプッシュしたタイミングで自動的に、TravisCI でビルドが実行されます。
GitHubのREADME.mdにバッチを埋め込む
以下のようなマークアップタグをREADME.mdに埋め込んでおけば、実行結果が常にGitHubから確認できていい感じになりました♪ 実際に動かしているGitHubリポジトリはこちら
[](https://travis-ci.org/isystk/adminlte3-sample)