なになれ

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

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

Azure Angular Visual Studio Team Services

サンプルアプリの準備

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)に接続する際の接続文字列に使われる
f:id:hi1280:20170730143854p:plain

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を選択する

f:id:hi1280:20170730230357g:plain

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にチェックをつける

f:id:hi1280:20170730230455g:plain

VSTS上からビルド及びリリースを実行した後に、Azure App ServiceのURLを開くとアプリが実行できる