MEAN and Cosmos DBをVisual Studio Team ServicesでAzure App Serviceにデプロイする
サンプルアプリの準備
MEAN構成のサンプルアプリとして以下を使用する
https://github.com/hi1280/angular-cosmosdb
前提条件
Azure CLI 2.0をインストールしている
https://docs.microsoft.com/ja-jp/cli/azure/install-azure-cli
Angular CLIをインストールしている
npm install -g @angular/cli
VSTSのプロジェクトが作られている
https://www.visualstudio.com/en-us/docs/setup-admin/team-services/sign-up-for-visual-studio-team-services
Cosmos DBの作成
以下のコマンドを実行する
# コマンドのオプションは環境に応じて適宜変更する az login az group create -n my-heroes-db-group -l "Japan East" # Cosmos DBをMongoDBのAPIで作成する # Cosmos DBの名前が競合して作成できない場合、-nオプションの値を適宜変更する 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
を接続文字列の内容に沿って修正する
このパラメータはサンプルアプリからCosmos DB(MongoDB)に接続する際の接続文字列に使われる
example-environment.js
のファイル名をenvironment.js
に変更する
ローカルでアプリを起動する
# Angular CLIのビルド実行 npm run build # Node.jsの実行 npm start
http://localhost:3000
をブラウザで開く
Azure App Serviceの作成
az group create --location "Japan East" --name myResourceGroup # FREEプランで作成 az appservice plan create --name my-app-heroes-plan --resource-group myResourceGroup --sku FREE az webapp create --name my-app-heroes-example --resource-group myResourceGroup --plan my-app-heroes-plan # node.jsのバージョン指定 az webapp config appsettings set -g myResourceGroup -n my-app-heroes-example --settings WEBSITE_NODE_DEFAULT_VERSION=6.11.1
Visual Studio Team Services(VSTS)との連携とデプロイ
プロジェクトをVSTSにPushする
プロジェクトルートで以下のコマンドを実行する
# 既存のgitリポジトリを削除 rm -fR .git # gitのローカルリポジトリに対する操作 git init git add . git commit -m "initial commit" # gitのリモートリポジトリに対する操作 # xxxxxは任意 git remote add origin https://xxxxx.visualstudio.com/_git/my-app-heroes-example git push -u origin --all
VSTS上でプロジェクトのビルド定義をする
ビルドタスクは以下の通りに定義する
Get Sources
This Project
を選択する- 該当のリポジトリとブランチを選択する
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 Type
でServer
を選択する
VSTS上でプロジェクトのリリース定義をする
リリースタスクは以下の通りに定義する
Artifact
- ビルドのArtifactの最新を選択する
Azure App Serviceにデプロイする
Run on agent
の+マークをクリックし、Azure App Service Deploy
を追加する- Azure subscription及びApp Service nameを適宜選択する
Package or folder
を$(System.DefaultWorkingDirectory)/my-app-heroes-example-build/dist
と入力するGenerate Web.config
にチェックをつけるWeb.config parameters
を-Handler iisnode -NodeStartFile index.js -appType node
と入力するPublish using Web Deploy
にチェックをつける
VSTS上からビルド及びリリースを実行した後に、Azure App ServiceのURLを開くとアプリが実行できる