Visual Studio Team Servicesを使用することによってデベロッパーが受ける利点 #tfsug #alm

Visual Studio Team ServicesはクラウドベースのALMソリューションです。
Visual Studio Team Servicesはソフトウェア開発のすべての工程で必要となるソリューションを提供します。
Visual Studio Team Servicesを使うと、以下の利点をすべて無料で享受できます。
さらに、Visual Studio Team Servicesには世界のどこからでもアクセスすることができるのです。

  • プロジェクトの計画と追跡、問題の追跡
    • バックログとカスタマイズ可能なカンバンボードを使用して、作業のキャプチャ、優先順位付け、追跡を行えます
    • 作業項目は、透過性を確保するためにコードに直接リンクされます
  • バージョン管理
    • 無制限に作成できるプライベートリポジトリにコードを保存でき、コードの共同作業を行います
    • 分散バージョン管理にGitを使用し、共同作業を最大化できます
  • 自動ビルド、自動テスト、自動デプロイ
    • コード変更後、自動的にアプリケーションをコンパイルし、テストを行う継続的インテグレーション(CI)によって早期に品質の問題を検出できます
    • 継続的デプロイ/デリバリーによって、テストに合格したアプリケーションを自動的にデプロイできます
  • プロジェクトのチームメンバーが効率的に作業できるようにコラボレーションツールを提供します
  • クラウドベースのロードテストによって、アプリケーションを常に機能する状態に維持できます

それでは、どうすれば使うことができるのか、お見せしましょう。

Visual Studio Team Servicesにチームプロジェクトを作成する

  1. Visual Studio Team Servicesにサインインします。
  2. Newをクリックします。
    Create a team project on Visual Studio Team Services 1
  3. Project nameボックスにチーム名を入力します。
    Process templateを選択します。
    Version controlからGitを選択し、Create projectをクリックします。
    1分程待つと、Visual Studio Team Servicesが新しいチームプロジェクトの作成を終えます。
    Create a team project on Visual Studio Team Services 2
  4. Navigate to projectをクリックします。

Work itemを作成する

  1. WORKをクリックします。
    Create work items 1
  2. + New itemをクリック後、Product Backlog Itemをクリックします。
    Create work items 2
  3. As a deeveloper, I want to get Visual Studio Team Services’s benefitsと入力する。
  4. をクリック後、+ Add taskをクリックします。
    Create work items 3
    Create work items 4
  5. Create a build definitionを入力し、リターンキーを押下後、Management of source codeを入力します。
  6. Create a build definitionをクリック後、番号をメモします。

Tip: “As a deeveloper, …”のような”開発者として…”は厳密にはユーザーストーリーではありません。ここでは説明のためのサンプルとしてこの記述を使っています。

ビルド定義を作成する

  1. BUILDをクリックします。
  2. +をクリック後、Emptyをクリックし、続けてNextをクリックします。
    Create a build definition 1
    Create a build definition 2
  3. Continuous integration : build each check-inをクリック後、Createをクリックします。
    Create a build definition 3
  4. + Add build step…をクリックします。
    Create a build definition 4
  5. Packageをクリック後、npmAddをクリックします。
    Create a build definition 5
  6. Buildをクリック後、gulpAddをクリックします。
    Create a build definition 6
  7. Testをクリック後、Publish Test ResultsAddをクリックします。
    Create a build definition 7
  8. Deployをクリック後、Azure Web App DeploymentAddをクリックし、Closeをクリックします。
    Create a build definition 8
  9. Publish Test Resultsをクリックします。
  10. Test Results Filestest-results.xmlを入力します。
    Create a build definition 9
  11. Azure Web App Deploymentをクリックします。
  12. Azure Subscriptionを選択します。
    使用するサブスクリプションが選択されていることを確認し、サブスクリプションが使用できない場合は、以下の手順でサービスエンドポイントを追加してください。

    1. Manageをクリックします。
      Create a build definition 10
    2. New Service Endpointをクリック後、Azureをクリックします。
      Create a build definition 11
    3. Add New Azure Connectionダイアログボックスで:
      1. Certificate Baseを選択します。
      2. Connection Nameに名前を入力します。
      3. ここをクリックし、publishsettings xmlファイルをダウンロード後、ファイルを開きます。
      4. 使用したいサブスクリプションのIDとName、ManagementCertificateの値をファイルからコピーし、それぞれAdd New Azure Connection dialogの項目にペーストします。
        Create a build definition 12
      5. OKをクリックします。
  13. Web App NameにWeb Appの名前を入力します。
    Tip: ここであなたが入力した名前は一意か、既に作成済みのAzure Webアプリケーションの名前である必要があります。未作成の名前の場合、AzureはWebアプリケーションを作成し、サブスクリプションに追加します。
  14. Web Deploy Packagee_package/package.zipを入力します。
  15. Saveをクリックします。
    Create a build definition 13
  16. Nameにビルド定義の名前を入力後、OKをクリックします。

あなたのアプリケーションをアップロードする

  1. あなたがGitをインストールしていない場合、Gitをインストールします。
    使用しているプラットフォームのインストール手順については、Git download pageを参照してください。
  2. 私のシンプルなNode.jsアプリケーションをダウンロードするため、以下のコマンドを使用します:
    $ git clone https://github.com/changeworld/hello-world-nodejs-express.git
  3. 以下のコマンドを使用し、先程クローンしたアプリケーションの更新をVisual Studio Team Servicesに反映するためにのGitのリモートに追加します:
    $ cd hello-world-nodejs-express
    $ git remote add azure https://{your_account}.visualstudio.com/DefaultCollection/_git/{your_team_project}
  4. hello-world-nodejs-express/server.jsファイルをエディターで開き、空行を追加します。
  5. 以下のコマンドを使用し、リポジトリにファイルを追加します:
    $ git add .
    $ git commit -m “Management of source code #{copy the task number}”
  6. 以下のコマンドを使用し、Azureにpushします:
    $ git push azure master
  7. あなたのチームプロジェクトをブラウザ上で開きます。
  8. BUILDをクリックします。
  9. ビルド成功後、ビルド番号をクリックし、内容を確認します。その後、あなたのWebサイト: http://{your web app name}.azurewebsites.net をチェックしてください。
    Upload your application 2
    Upload your application 3

あなたのアプリケーションの変更を公開する

  1. hello-world-nodejs-express/routes/index.jsファイルをエディターで開き、’Hello, world!’を’Hello, Azure!’に変更後、保存します。
  2. 以下のコマンドを使用し、Azureにpushします:
    $ git add .
    $ git commit -m “Modify Hello World -> Hello Azure”
    $ git push azure master
  3. あなたのチームプロジェクトをブラウザ上で開きます。
  4. BUILDをクリックします。
  5. ビルド成功後、ビルド番号をクリックし、内容を確認します。その後、あなたのWebサイト: http://{your web app name}.azurewebsites.net をリロードします。ブラウザには’Hello, Azure!’と表示されていることをチェックしてください。
    Upload your application 1
    Upload your application 2