なになれ

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版を使っていくことになりそうです。

Amazon Echoとラズパイでスマートホーム化

Alexa Skill AWS Raspberry Pi Node.js

Amazon Echoとラズパイでスマートホームを実現します。
Amazon Echoに対して音声で呼びかけて、Alexaスキルからラズパイを通して家電を操作します。

構成図

f:id:hi1280:20180129215335p:plain

AWS IoTの準備

AWS IoTを使って、Alexaスキルとラズパイとを連携します。
デバイスの設定を案内通りに進めることで、該当のデバイスをAWS IoTに接続することができます。
AWS IoTに接続するのに必要な証明書が得られます。
f:id:hi1280:20180129225533p:plain

今回はNode.jsを使用しました。
Node.jsでAWS IoTを使用したメッセージングの簡単な例はこちらが参考になります。
aws-iot-device-sdk-js/README.md at master · aws/aws-iot-device-sdk-js · GitHub

ラズパイでのAWS IoTプログラムの実装

AWS IoTのdeviceオブジェクトに証明書の情報を設定します。

AWS IoTからのメッセージを受け取って、赤外線を送信するコード

subscribeメソッドで受け取るメッセージを指定するのと、メッセージを受け取った後に実施する処理をmessageイベントで定義します。

AWS IoTの動作確認

テスト > 発行 からメッセージを発行することができます。
f:id:hi1280:20180130000103p:plain

ラズパイでの家電の操作方法は過去記事を参照してください。
hi1280.hatenablog.com

Alexaスキルの実装

Alexaスキルの種類はカスタムスキルとして実装しました。
カスタムスキルは名前を指定して、スキルを呼び出します。
例えば、こんな呼びかけになります。
「アレクサ、リモコンで照明をつけて」

「リモコン」の部分がスキルの名前になります。

AWS IoTのメッセージを送信するAlexaスキルのコード

AWS IoTのdeviceオブジェクトのpublishメソッドを実行することで、メッセージを送信します。

Alexaスキルの作成方法は過去記事を参照してください。
hi1280.hatenablog.com

まとめ

ラズパイでの赤外線による家電操作とAlexaスキルを組み合わせることでスマートホームっぽくなりました。
今回はスキルをカスタムスキルとして実装しましたが、スキルの名前をいちいち呼ぶのは面倒です。
スマートホームスキルとして実装すると名前を呼びかける必要がなくなるようです。
ただし、スマートホームスキルに対応しているデバイスがまだ少ないようなので、まだこれからという状況かと思います。
スマートホームスキルを複数の言語で開発する | ASK

Web画面経由でコマンドを操作する

Node.js Express

Web画面経由でコマンドを操作してみました。
Node.jsでExpressを利用しています。

今回の実装時のポイントは以下の通りです。

Node.jsでコマンドを実行する

Node.jsの標準APIであるchild_processを使用します。
以下のようにexecメソッドでコマンドを実行することができます。

const { exec } = require('child_process');
exec('echo "The \\$HOME variable is $HOME"', (error, stdout, stderr) => {
  console.log(stdout);
});

画面を描画する

画面の描画にはejsを使いました。
ejsファイルではありますが、内容はHTMLそのものです。

ejs.renderFile('./views/index.ejs', (err, str) => {
  if (err) {
    res.send(err.message);
  }
  res.send(str);
});

感想

簡単なWebアプリケーションを作るのにExpressは楽だと思います。
今回の方法を使ってラズパイで作成した赤外線リモコンをWeb画面経由で操作しています。

hi1280.hatenablog.com

参考情報

Child Process | Node.js v9.4.0 Documentation