Visual Studio OnlineによるAzure App ServiceへのNode.jsアプリケーションの継続的デリバリー

以下の通り、マイナビニュースにチーム開発の記事を掲載しました。

ツールを活用した“イマドキ”チーム開発の極意 (1) チーム開発における課題とツール利用時に気をつけることとは? | マイナビニュース

が、文字数の都合で載せられなかった同一ベンダーによる包括的なツールを使うことで容易に継続的デリバリーを実現する方法について説明します。
ツールを使ったことのない方にも参考になると思います。

対象読者

対象読者は以下の通りです。

  • OSSのツールを複数組み合わせて開発をしており、各ツールが他のツールのデータを管理するというデータの多重管理や利用する際に一手間必要な連携になってしまうといった問題が起こっている人
  • ツールの力を借りず、人の手でアプリケーション開発の情報を管理していて困っている人

同一ベンダーによる包括的なツールを使うことで容易に継続的デリバリーを実現する方法

最も簡単に同一ベンダーによる包括的なツールを使うために、相互の連携が強化されているNode.jsとVisual Studio Online、Azure App Serviceを例に説明します。
この方法はNodeを実行できる任意のオペレーティングシステムで実現できます。

全体像としては以下のようになります。

全体像

  1. Node.jsのアプリケーションを作成し、Gitを使用して、Visual Studio Onlineにソースをコミットする
  2. Visual Studio Onlineはコミットをトリガーに継続的インテグレーションを行う(今回はシンプルなNode.jsアプリケーションのためテストは省略)
  3. 継続的インテグレーション後、Visual Studio Onlneは継続的デプロイの処理を起動する
  4. 最後にVisual Studio OnlineはAzure App ServiceのWeb Appsに継続的デプロイを行う

Web Appsの作成とGitでのデプロイの有効化

Web Appsを作成し、Gitでのデプロイの有効化をするために以下を行います。

  1. Azure プレビューポータルにサインインします。
  2. ポータルの左上にある[+ 新規]アイコンをクリックします。
  3. [Web + モバイル]をクリックし、[Web Apps]をクリックします。
  4. [Web アプリ]にWebサイトの名前(URL)を入力します。
  5. [サブスクリプション]を選択します。
  6. [リソース グループ]を選択するか、新しく作成します。
  7. [App Service プラン]を選択するか、新しく作成します。新しいプランを作成する場合は、価格レベル、および場所などのオプションを選択します。
  8. [作成]をクリックします。ここまでがWeb Appsの作成になります。
    Web Appsの作成
  9. 作成が終わるまでしばらく待ち、[Web Apps]をクリックします。
  10. 作成したサイトの名前をクリックします。
    Gitでのデプロイの有効化1
  11. [継続的なデプロイ]をクリックします。
  12. [ソースの選択]をクリックします。
  13. [ローカル Git リポジトリ]をクリックします。
  14. [OK]をクリックします。
    ソースの選択
  15. [デプロイ資格情報]をクリックします。
  16. [FTP/デプロイ ユーザー名]、[パスワード]、[パスワードの確認]に値を入力します。
  17. [保存]をクリックします。
    デプロイ資格情報
  18. [Web App]の隣の作成したサイトの名前をクリックすると、[Git クローン URL]の欄にGitでデプロイするURLが表示されますので、コピーします。
    Git クローン URL
  19. 現在のWeb Appsの状態を確認するために、[URL]の欄のURLをクリックします。
    Web Appsの現状

Node.jsアプリケーションの作成

今回は説明のためにシンプルなNode.jsアプリケーションの作成します。
nodejs.orgにある’Hello World’を出力するserver.jsファイルを使用します。
nodejs.orgの例からAzure Web Appsで実行する際のリッスンするポートとしてprocess.env.PORTを追加しています。

  1. テキスト エディターで任意(ここではhelloworld)ディレクトリにserver.jsという名前の新しいファイルを作成します。
  2. server.js ファイルの内容として次の内容を追加し、ファイルを保存します。
    var http = require('http');
    var port = process.env.PORT || 1337;
    http.createServer(function(req, res) {
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.end('Hello World\n');
    }).listen(port);
    
  3. コマンド ラインから次のコマンドを実行し、ローカルでNode.jsアプリケーションを起動させます。
    node server.js

  4. Web ブラウザーを開き、 http://localhost:1337 にアクセスし、以下のスクリーンショットのようになっていることを確認します。
    Node.jsアプリケーション

Visual Studio Onlineのチームプロジェクトの作成とビルド定義の作成

要求・要件の変更管理やタスクの変更管理、バグのトラッキングといった課題管理システム(ITS)、ソースコードの管理のためのバージョンコントロールシステム(VCS)、継続的インテグレーション(CI)などの機能をすべて持っているVisual Studio Onlineにチームプロジェクトを作成します。
チームプロジェクトを作成後、ビルド定義を作成し、継続的インテグレーションと継続的デプロイを実現する準備をします。

  1. Visual Studio Onlineのページからサインインします。
  2. [New]をクリックします。
  3. [Project name]に値を入力し、[Process template]、[Version control]を選択します。[Version control]はGitを選択してください。
  4. [Create project]をクリックします。
    チームプロジェクトの作成1
  5. 作成が終わると表示が切り替わるので、[Navigate to project]をクリックします。ここまでがチームプロジェクトの作成になります。
    チームプロジェクトの作成2
  6. ビルド定義を作成するため、[BUILD]をクリックします。
    ビルド
  7. [+]をクリックします。
  8. Visual Studio、Xamarin、Xcodeではないので、[Empty]をクリックします。
  9. [OK]をクリックします。
    ビルド定義の作成1
  10. [+ Add build step…]をクリックします。
  11. [Utility]をクリックします。
  12. [Command Line]の右にある[Add]を2回クリックします。
  13. [Close]をクリックします。
    ビルド定義の作成2
  14. 1つ目の[Command Line]をクリックします。
  15. [Tool]にはgitを、[Arguments]にはremote add azureの後にWeb Appsの作成とGitでのデプロイの有効化の手順18でコピーしたGitでデプロイするURLにパスワードを追記したものを入力します。

    e.g. remote add azure https://[username]:[password]@[sitename].scm.azurewebsites.net:443/[sitename].git
    ビルド定義の作成3

  16. 2つ目の[Command Line]をクリックします。
  17. [Tool]にはgitを、[Arguments]にはpush azure masterを入力します。
  18. [Triggers]をクリックします。
    ビルド定義の作成4
  19. [Continuous integration (CI)]にチェックをします。
  20. [Save]をクリックします。
    ビルド定義の作成5
  21. [Name]に値を入力します。
  22. [OK]をクリックします。
    ビルド定義の作成6

これで継続的インテグレーションと継続的デプロイの準備が整いました。

Node.jsアプリケーションのpushと継続的インテグレーションと継続的デプロイの確認

すべての準備が整ったため、Node.jsアプリケーションをVisual Studio OnlineにGitでpushし、継続的インテグレーションと継続的デプロイが行われることを確認します。

  1. コマンド ラインから、Node.jsアプリケーションのあるディレクトリに移動し、以下のコマンドを実行します。
    • この手順と同様に新規アプリケーションの場合は、コマンド ラインから以下のコマンドを実行します。
      git init
      git add .
      git commit -m “Initial commit”
      git remote add origin https://changesworlds.visualstudio.com/DefaultCollection/_git/Hello_node.js_vso
      git push -u origin –all
    • この手順と異なり既存のアプリケーションの場合は、コマンド ラインから以下のコマンドを実行します。
      git remote add origin https://changesworlds.visualstudio.com/DefaultCollection/_git/Hello_node.js_vso
      git push -u origin –all
  2. pushが終わったら、Visual Studio Onlineの[BUILD]をクリックします。
    ビルド
  3. Queuedに入っているので[Queued]をクリックします。この状態でビルドが終わるまで更新しながら待ちます。
    ビルド中
  4. ビルドが終わるとQueuedから消えるので、[Completed]をクリックします。
    ビルド完了
  5. ビルドが成功しているので、デプロイ結果をブラウザーで確認します。Web Appsの作成とGitでのデプロイの有効化の手順19の状態からローカルで動作確認した画面に変わっていることが確認できます。
    デプロイ完了

まとめ

同一ベンダーによる包括的なツールの一つであるVisual Studio Onlineを使うことで、Visual Studio Online上で要求・要件の変更管理やタスクの変更管理、バグのトラッキングといった課題管理システム(ITS)、ソースコードの管理のためのバージョンコントロールシステム(VCS)、継続的インテグレーション(CI)などがすべて一元管理できるようになります。
また、Visual Studio Onlineは今回使用したNode.jsはもちろん、Java、Android、Xcodeなどクロスプラットフォームとの連携が強化されています。
今回、一つ一つ手順を細かく記載したので、長く見えるかもしれませんが、実際の作業自体は短時間で終わりますので、もし、現状に課題を感じているのであれば、Visual Studio Onlineは無料で使えますので、一度実際に試してみてください。