今回はVSTSを利用して簡単なビルド定義を作ってみます。
VSTSとは
Visual Studio Team Servicesの略称。
- Version Control System(VCS)の提供
- 継続的インテグレーション
- Release Management
- チームのタスク管理
- Agileな開発をサポートするツールの提供
上記のような開発関連のサポートをするサービスを提供してくれます。
VSTS上でビルド定義を作ってみる
事前準備
- VSTSのアカウント作成
- VSTS上でのプロジェクト作成
- VSTS上のVCSにソースをpush
今回はサンプルとして以下のようなプロジェクトを利用します。
$ tree -L 3 -I 'node_modules'
.
├── gulp
│ ├── config.js
│ └── tasks
│ └── test.js
├── gulpfile.js
├── package.json
└── src
├── MyAzureFunctions
│ ├── function.json
│ └── index.js
├── host.json
└── test
└── MyAzureFunctionsTest.js
ビルド定義のページへ移動
- Build定義のページへ移動
左上のプルダウンメニューから作成したプロジェクトを選択。
タブメニューからBuild & Release > Build
を選択。
![スクリーンショット 2016-12-14 5.55.49.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2F66cb90cb-b05e-ed98-3d33-376927e74de1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=343f65a29f1a0c6fd9ce74eae54cf229)
- 新しいビルド定義を作成
New
をクリックし、新しいビルド定義を作成します。
![VSTS-Build.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2F5ccf110d-bf36-cc6e-41ca-747039832a2c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bf12be66bb3ded7456b5bc8bfd0a3e41)
`Empty`を選択
![スクリーンショット 2016-12-14 5.38.50.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2Fa3127d21-6725-3e5f-7479-76026481d15b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4064141cb44f72f7be2f9f21eef7d2d2)
作成したソースがpushしてあるリポジトリを選択し、`Create` ※`Default agent queue`は`Hosted`を選択してください。 これでビルド定義の箱が完成です。
![スクリーンショット 2016-12-14 5.39.04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2F60d15681-13c3-d466-ae7b-a83af45d70ef.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=926cb7b141dfc184f56705afb3209c03)
![スクリーンショット 2016-12-14 5.40.33.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2F6d37cc94-9259-5ec0-20c4-09dc00d65ad1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4267cdde48a8b88decc0d4b979cc0975)
`Gradle`や`gulp`など様々なビルドステップが定義できるので色々とはかどりそうです。 今回は超簡単に`npm`と`gulp`のステップを定義してみました。 最後に`save`で保存します。
![スクリーンショット 2016-12-14 5.41.27.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F145717%2F9c8a6d12-a9f9-fc7c-e8ec-8f05b126f8b5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=62430469f72c849f7618c35c50ad6fe8)
`npm`は単純にinstallコマンドだけ実行しています。 `gulp`は以下のtestコマンドを実行するようにしました。 ※本来はここでminifyとかコンパイルのステップを入れるべきでしょう。
gulpfile.js
var requireDir = require('require-dir');
requireDir('./gulp/tasks', {recurse: true});
./gulp/tasks/test.js
var gulp = require('gulp');
var mocha = require('gulp-mocha');
var config = require('../config').test;
gulp.task('test', function() {
gulp.src(config.src, {read: false})
.pipe(mocha({reporter: 'nyan'}))
});
実行してみる
Queue new build...
をクリックし実行します。
任意の設定を変更し、OK
を選択
※Queue
はHosted
で大丈夫です。
ビルドが成功すると以下のような画面が表示されます。
お疲れ様でした。
最後に
仕事でVSTSを利用してタスク管理やソースコードの管理などをしています。
ビルドなどはほぼ運用の方に任せっきりだったので、簡単ではありますが触ってみました。
VSTS上からReleaseの管理もできるので、今後はAzureへのビルドからデプロイまで管理できるような仕組みをつくれたらなー。。。
ここまで読んでくださりありがとうございます!