読者です 読者をやめる 読者になる 読者になる

a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

Visual Studio Team ServiceでAzure Web Appsへデプロイする

f:id:ninna2:20170409020434j:plain:w360

Visual Studio Team Service(VSTS)はもう少し普及してもいいのでは?と思っています。Microsoftがかなり丁寧にドキュメントを公開してくれているのですが、それ以外の情報がなかなか少ない印象ですね。特に日本語での情報はあまり無い。積極的に情報発信していければと思います。

今回は、VSTSBuild&Releaseの機能を中心にできるだけわかりやすくまとめておきたいと思います。Goalは、VSTSリポジトリ(Git)にPushすると、Build Taskが実行され、Azure Web AppsにアプリケーションがDeployされるようにすることです。

Git

まずは、VSTSのGitを使えるようにしていきましょう。前回、書いたので細かいことはこちらをみてください。

ninna2.hatenablog.com

Microsoftのドキュメントで公開していたNode.jsのサンプルアプリをGitに登録して、ビルド、デプロイとつなげていきたいと思います。

Microsoftサンプルアプリ

http://download.microsoft.com/download/5/C/4/5C4CB575-D022-4BB8-9E95-5A2958C83CD2/nodejs-express-hello-world-app.zip

実は、VSTS使わなくてもほぼ同じことがAzureとGitHubがあれば出来ます(その方法は過去記事を参照ください)。ただ柔軟性は全然違うのでVSTSでやるメリットはあるかと思います。VSTSのGitにはサンプルコードをPushしておいてください。

Build Definition

サンプルアプリケーションをビルドするタスクを定義していきましょう。VSTSのプロジェクトにアクセスしてBuild&ReleaseからBuildsの画面を表示します。+NewでCreate new build definitionから、まずTemplateを選択します。まだPreview版ですが、NodeJS with GulpというTemplateを使っていきましょう。Templateはよく使う組み合わせであらかじめ準備してくれている便利なものです。もちろん、Empty Templateで1からビルドタスクを組み合わせて作っても構いません。

Templateを選択するとRepositoryやBranchを選択します。今回は、masterにマージされた時にBuildしたいので、masterにしてます。Pushされた時に自動的にビルドをまわしたい場合は、Continuous integrationにチェックを入れます。

NodeJS with GulpというTemplateでは、

  • npm install
  • Run gulp task
  • Archive files
  • Copy publish Artifact drop

という4つのBuild Stepが最初から定義されます。

これらの設定を埋めていけばBuild Definitionが完成します。簡単ですね。しかも、今回は全部デフォルト設定で問題ないのでそのままの定義でビルド出来てしまいます。早速、ビルドしてみたいと思います。Queue new build…からビルドの実行が出来ます。

特に何も指定しなくてもOKなのでそのままOKします。

画面が切り替わって、ビルドの実行過程が見れます。コマンドラインで実行されている状態が見えるわけですね。エラーになってもすぐにわかります。

緑になれば、無事成功です。ビルドの成果物はArtifactから確認できます。

これでビルド定義は完成です。今回はCIの設定をしているので、masterにmarge(Push)されれば、このビルド定義が毎回走ることになります。

Release Definition

ビルドの実行まで設定できたので、次にReleaseの定義を作っていきたいと思います。その前に、リリース先のAzure Web Appsが必要なので事前にサクッと作成しておいてください。過去記事参考にしてもらえれば一応手順はわかるかと思います。

ninna2.hatenablog.com

これの前半部分を参考にしてもらえればと思います。

Azureの設定が出来たら、VSTSのプロジェクトにアクセスしてBuild&ReleaseからReleasesの画面にアクセスします。+からCreate release definitionを選択し、新しく定義を作っていきます。Buildの際と同じようにTemplateを選ぶことが出来るので、今回はAzure App Service Deploymentを使っていきます。

Releaseの定義でとりあえず、設定しないといけないのは、どのAzure App Serviceにデプロイするのかという部分です。Azure subscriptionApp Service Nameを各環境に合わせて設定してくださいね。subscriptionはアカウント認証が求められたはずです。

これでReleaseの定義は完了です。Azureがデプロイ先だとすごく簡単ですね。

初回Deploy

Release定義が出来たのでAzureにデプロイしていきましょう。+ReleaseからCreate ReleaseでRelease出来ます。そうすると、in Processになって、正しくデプロイされれば、SUCCEEDEDになります。これでデプロイできたらしいです。

Azure側から、Web Appsにアクセスして、アプリケーションが動いているのか確認しておきましょう。

ちゃんとHello Worldが出ましたね。すごく単純なアプリケーションですが、VSTSを使って、GitからBuildしてDeployまでの一連の定義が出来ました。CI/CDが出来る環境は整ったので、アプリケーションをどんどん拡張していけばいいだけですね。

VSTSは便利で簡単だぞ・・・

もう少しちゃんと触って評価をしていきたいとおもいます。皆さんの参考になれば幸いです。では。