MEAN and Cosmos DBをVisual Studio Team ServicesでApp Service on Linuxにデプロイする
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
を選択します
リリース定義
リリースタスクは以下の通りに定義します
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を選択します
感想
App ServiceのWindows版とほぼ変わらずに構成することができました。
Linux版ではそのままNode.jsが動作しているのでVSTSの設定もシンプルになっています。
Windows版ではIIS上でNode.jsのアプリケーションを動かすようになっていて、IISの設定が必要といった勝手が違う部分があります。
今後はLinux版を使っていくことになりそうです。