Deploy nodeJs apps to Heroku with VSTS

f:id:ninna2:20170409132859p:plain:w360

Overview

今回は、Visual Studio Team Service(VSTS)で遊んでみようと思います。VSTSはもちろんAzureとの親和性が抜群に良いので、Azureと組み合わせて使うのがセオリーだと思います。なんですが、ちょっと気まぐれで、別のPaaSにも連携できるはずだ、出来ないわけがないって勝手に思って、Herokuと連携をやってみました。これ、たぶん需要ない。なので本当に興味本位であくまでも遊びです。

遊びで始めたんですが、意外に簡単にVSTSからHerokuにデプロイ出来たので実は実用性があるのでは、なんて勘違いしそうです。VSTSが非常によく出来たApplication Lifecicle Management Tool(ALM)なので、工夫次第で利用の幅が広がりますね。ただ、やはりVisual StudioやAzureとの親和性は抜群ですし、使えるならそちらをベースにした方が良いです。

今回はVSTSのGitでソースコード管理しているアプリケーションをVSTSでビルド実行して、Herokuへデプロイしてみます。アプリケーションと言ってますが、Helloworldを出力するNode.jsの簡単なものです。

Prerequisites and preparation

さて、それではVSTSとHerokuの連携を始めていきましょう。まずは、必要なものの準備です。最低限必要なもののはこれらです。

Visual Studio Team Service
Heroku
サンプルアプリケーション

Visual Studio Team Service は、無料アカウント登録で始められるので、もしまだ利用していない方は、登録してください。VSTSのリポジトリを使い始めるまでの簡単な説明を過去記事にしてますので、是非参考にしてください。

ninna2.hatenablog.com

Herokuも準備しておいてください。こちらも過去記事に簡単に導入編を書いているので、Appsの作成を済ませておいてください。Deployの設定とかは不要です。Apps作るだけなので3分ぐらいで終わりますね。

f:id:ninna2:20170414185159j:plain:w360

サンプルアプリケーションの準備をしていきます。サンプルアプリケーションは、1から作成しても良いのですが、面倒なのでMicrosoftの提供しているNodejsのサンプルアプリケーションをHeroku用にカスタマイズして使っていこうと思います。ダウンロードは下記のサイトから出来ます。

www.visualstudio.com

ダウンロードしたら、zipを解凍して、VSTSに作成したGitにPushしておきます。今回は遊びなので、masterブランチしか作成ないので直接masterにPushしました。このサンプルアプリケーションは、VSTSからAzureにデプロイするためのサンプルですので、Heroku用に少しカスタマイズしていきます。

まずは、Herokuで動かすためには、Procfileが必要です。ですので新しく空のファイルを作成して、名前をProcfileとしておきます。ファイルの中身ですが、単純に1行書くだけです。この辺りは、Herokuの基本的な使い方にも別の記載されている内容ですので、Herokuを使ったことある人であればわかるはずです。

web: node server.js

次に、ソースコードを1行変更します。server.jsを開き、process.env.portのportを小文字から大文字に書き換えます。Azureだと小文字でも大文字でもうまくいくのですが、Herokuだと小文字ではうまく認識してくれません。これでかなりハマりました。デプロイは上手くいくのに実行すると動かない状態(503発生)に陥りますので、修正しておきます。

var port = process.env.PORT || 1337

これでサンプルアプリケーションの準備は完了です。Visual Studio Team Serviceの初期設定と、HerokuでのAppsの作成、サンプルアプリケーションを少しの変更して、VSTSのGitにPushする、まぁそれほど難しい事はないかと思います。

f:id:ninna2:20170414225725j:plain

install Extension

VSTSには、基本的な機能に加えて拡張機能をインストールできます。絶対誰かが作ってくれているだろうと期待しつつ今回の遊びを開始しました。で、やはりありました。VSTSのMarketplaceから、herokuで検索してみてください。Heroku Release ToolsというExtentionがあるので、インストールします。

f:id:ninna2:20170414185617j:plain

コードは、GitHubで開発されているようで、使い方もGitHubのWikiに書かれています。Push To HerokuというTaskが追加されるようです。

github.com

Wikiの抜粋です。HerokuのAPI Keyが必要なのと、dropフォルダに成果物を置かないといけないみたいですね。

1.Create an Heroku App or use an existent one;

2.Retrieve the API Key from an valid App Contributor User;

3.Configure a build definition that generates the final files that should be pushed to Heroku (we recommend you to put all your file structure under a “drop” named folder;

4.Configure a release definition with the Push to Heroku task in it.

Build Definition

VSTSのビルド定義(Build Definition)をしていきましょう。ビルド定義を1からやっていってもいいのですが、テンプレートをある程度利用できるので、利用していきます。今回使用するテンプレートは、NodeJS With Gulp (PREVIEW)です。Previewなのですが、問題ないでしょう。テンプレートから作成すると、4つぐらいTaskが定義されるので、カスタマイズしていきます。

まず、Get sourceの取得先をアプリケーションを格納したリポジトリに変更しておいてください。私の場合は、sampleNodeAppsForHerokuというリポジトリです。ブランチはmasterしかないのでmasterで。実際に運用する際には、ちゃんとブランチを作成して運用するようにしましょう。今回は遊びなのでmasterから直接ビルドしてます。

次に、Archive FilesというTaskを削除します。Herokuの場合、zip圧縮されたものを連携しても展開してデプロイしてくれないようでArchiveは不要です。消してください。

Archive Filesを削除したので、その次のCopy and Publish Build Artifactsタスクを変更します。もともとの定義では、zip圧縮したファイルを成果物(Artifacts)登録するタスクなのですが、zip圧縮を削除したので、ビルドしたものをそのまま成果物登録します。Copy and Publish Build Artifacts タスクを選択し、Copy Rootを変更します。"$(Build.ArtifactStagingDirectory)“となっているので、”$(System.DefaultWorkingDirectory)“に変更します。Contentsも変更しておかないと、zipファイル以外のコピーがされないので、変更します。”$(Build.BuildId).zip"を"*“に変更して、WorkingDirectoryにあるファイル・ディレクトリをすべてコピーするように設定を変更します。

これでビルド定義(Build Definition)は完了です。Queueに突っ込んでビルドしておきましょう。

Release Definition

やっとHerokuへのデプロイする設定にたどり着きました。リリース定義(Release Definition)していきます。リリースは、テンプレートからでなく、空の状態から作成していきます。Newで新しくリリースを定義し、Taskを追加します。タスクには、MarketplaceからインストールしたHeroku Release ToolsのPush to Herokuを使います。

いくつか設定すべき項目があるので、設定していきます。まず、HerokuにアクセスするためのAPI Keyを入力します。API KeyはHerokuのアカウント設定(Account Settings)に記載されています。その情報をコピーして、Push to HerokuのAPI Keyの入力項目に貼り付けます。次に、App Nameを入力します。App Nameは、HerokuのAppsの名前です。最初に作成したAppsの名前を入力して下さい。最後に、Push Rootを入力します。これはビルドによってできた成果物(Artifacts)の場所を示します。私の場合は、"$(System.DefaultWorkingDirectory)/nodejsForHeroku"というところに"drop"ディレクトリがあるのでそこを指定しています。

f:id:ninna2:20170414225724j:plain

リリース定義(Release Definition)は完了です。試行錯誤しながらやったので、本当にこれが正しいやり方なのか若干自身がないですが、何とか設定はできました。さて実行してみましょう。

Execute

リリースは、Create Releaceから作成してあげると実行されます。リリースが成功するとHeroku側でBuild succeededとDeployedになるはずです。

f:id:ninna2:20170414225722j:plain

上手くいってますね。

遊びにしては、少々長くなりすぎました。とりあえず、Visual Studio Team ServiceからHerokuへデプロイすることはできることは確認できましたが、やっぱりAzureの方が便利だなっていうのが遊んでみた感想です。VSTSは他にもいろいろ連携できると思うので、別の遊びもまたやってみようと思います。

はてなブログに移管したので自分のブログの記事を改めて読み直しリライトしてるのですが、最近の記事は画面キャプチャばかりで文字の量が少ない傾向なのかなと思いました。なので、今回はちょっと文字をたくさん書いてみました。5000文字超えた！！

皆さんのお役にたてば幸いです。