なになれ

IT系のことを記録していきます

MEAN and Cosmos DBをVisual Studio Team ServicesでApp Service on Linuxにデプロイする

Azure Angular Visual Studio Team Services

AzureのApp ServiceにはWindows版とLinux版があります。
OSSを使用するアプリケーションではLinux上で動作させる方がシンプルな形になりそうです。
Linux版のApp ServiceであるApp Service on Linuxを試してみます。

サンプルアプリの準備

MEAN構成のサンプルアプリとして以下を使用します。
GitHub - hi1280/angular-cosmosdb: Cosmos DB, Express.js, Angular, and Node.js app

前準備

Azure CLIをインストールします。
Azure CLI 2.0 のインストール | Microsoft Docs

Angular CLIをインストールします。

npm install -g @angular/cli

VSTSのプロジェクトを作成します。
Create a VSTS account with a Microsoft account or a work/organization account | Microsoft Docs

Cosmos DBの作成

Cosmos DBを以下のコマンドで作成します。
コマンドのオプションは環境に応じて適宜変更する必要があります。

az login
# リソースグループを作成する
az group create -n my-heroes-db-group -l "Japan East"

# Cosmos DBをMongoDBのAPIで作成する
az cosmosdb create -n my-cosmos-heroes-example -g my-heroes-db-group --kind MongoDB

サンプルアプリとCosmos DBの連携

Cosmos DBの接続文字列を確認します。

az cosmosdb list-connection-strings -n my-cosmos-heroes-example -g my-heroes-db-group --query "connectionStrings[0].connectionString"

example-environment.jsを接続文字列の内容に沿って修正します。
example-environment.jsにはサンプルアプリからCosmos DB(MongoDB)に接続するためのパラメータが定義されています。
example-environment.jsのファイル名をenvironment.jsに変更します。

ローカルでのアプリ起動
# Angular CLIのビルド実行
npm run build

# Node.jsの実行
npm start

http://localhost:3000をブラウザで開きます。

App Service on Linuxの作成

# リソースグループを作成する
az group create --name my-heroes-group --location "Japan East"

# App Serviceプランを作成する
az appservice plan create --name my-app-heroes-plan --resource-group my-heroes-group --sku B1 --is-linux

# App Service on Linuxを作成する
az webapp create --resource-group my-heroes-group --plan my-app-heroes-plan --name my-app-heroes-example --runtime "NODE|8.1"

Visual Studio Team Services(VSTS)との連携とデプロイ

サンプルアプリのコードをVSTSのリポジトリにPushします。
Git index to content for VSTS & TFS | Microsoft Docs

ビルド定義

ビルドタスクは以下の通りに定義します。

Get Sources

  • This accountを選択します
  • 該当のリポジトリとブランチを選択します

npmパッケージをインストール

  • Add Taskをクリックし、npmを追加します
  • installコマンドを選択します

Angular CLIのビルド実行

  • Add Taskをクリックし、npmを追加します
  • customコマンドを選択します
  • Command and argumentsをrun buildと入力します

サーバのnpmパッケージをインストール

  • Add Taskをクリックし、npmを追加します
  • installコマンドを選択します
  • Working folder with package.jsonをdistと入力します

成果物を公開する

  • Add Taskをクリックし、Publish Build Artifactsを追加します
  • Path to Publishをdistと入力します
  • Artifact Nameをdistと入力します
  • Artifact publish locationでVisual Studio Team Services/TFSを選択します

f:id:hi1280:20180217232228g:plain

リリース定義

リリースタスクは以下の通りに定義します

Artifact

  • ビルドのArtifactの最新を選択します

Azure App Serviceにデプロイする

  • Run on agentの+マークをクリックし、Azure App Service Deployを追加します
  • Azure subscriptionを選択します
  • App typeでLinux Web Appを選択します
  • App Service nameを選択します
  • Package or folderを$(System.DefaultWorkingDirectory)/my-app-heroes-example-build/distと入力します
  • Runtime StackでNode.jsを選択します

f:id:hi1280:20180218002023g:plain

感想

App ServiceのWindows版とほぼ変わらずに構成することができました。
Linux版ではそのままNode.jsが動作しているのでVSTSの設定もシンプルになっています。
Windows版ではIIS上でNode.jsのアプリケーションを動かすようになっていて、IISの設定が必要といった勝手が違う部分があります。
今後はLinux版を使っていくことになりそうです。