IoT Agency PlatformをHeroku上にデプロイする

技術情報

Sigfoxが提供していたIoT Agency PlatformがGNU Affero General Public Licenseに基づくオープンソースとなりました。ここでは、IoT Agency PlatformをHeroku上にデプロイする方法を説明します。

technical0408_01.png

IoT Agency Platformは、SigfoxやMQTT、Webhookに対応したIoTデバイスからデータを取得し、グラフや地図形式でダッシュボード化できるアプリケーションです。使い方に関しては、こちらを参考にしてください。

全体の流れ

Sigfox IoT Agency PlatformをHeroku上にデプロイする方法は下記の通りの流れとなります。
1. Sigfox PlatformのGithubからHerokuにアプリケーションをデプロイする
2. MongoDBを立ち上げ、データベースを紐づける

Sigfox PlatformのGitHubからHerokuにアプリケーションをデプロイする

デプロイ方法は2種類あります。下記ボタンをクリックして、UIウィザードに従いデプロイする方法と

technical0408_02.png

Heroku CLIで下記のようにデプロイする方法です。

git clone https://github.com/IoT-Makers/sigfox-platform.git my-project
cd my-project
heroku apps:create my-project
git push heroku master

ここでは、前者の方法で説明します。

新しいアプリケーションを生成する

先程の"Deploy to Heroku"ボタンをクリックしApp nameとregionを選択します。App nameはユニークな名前になるように設定してください。

technical0408_03.png

設定後、Deploy appボタンをクリックすると、デプロイが開始します。数分かかりますが、完成すると下記のような画面になります。

technical0408_04.png

Manage Appボタンをクリックし、アプリケーションの管理画面に遷移します。

MongoDBを立ち上げ、データベースを紐づける

ここでは、MongoDBのアドオンをアプリケーションにアタッチします。mLabはMongoDBをDBaaS(Database-as-a-Service)として提供するものです。

mLabはmongoDB.Altasに統合されたため、mongoDB.Altasでも同じようなことができると思いますが、ここでは、mLabで進めます。

mLab MongoDBアドオンの追加

Heroku管理画面のResourcesタグ内にあるQuickly add add-ons from Elements検索フィールドで"MongoDB"をキーに検索するとmLab MongoDBというアドオンが表示されます。

technical0408_05.png

mLab MongoDBを選択すると、下図の画面になりますので、有償版でも結構ですが、まず動作確認としては、無償版(Sandbox - Free)を選択し、Provisionボタンをクリックしてください。

technical0408_06.png

mLab MongoDBとの接続

追加された"mLab MongoDB"をクリックします。

technical0408_07.png

mLabの管理画面が表示されます。
画面上に、MongoDB URIで接続する(To connect using a driver via the standard MongoDB URI)と書かれた下にmongodB://からはじまるURIが表示されています。このURIをHeroku側に設定してあげればOKです。

technical0408_08.png

HerokuのSettingタグに遷移し、Config Vars(環境変数設定)をします。

technical0408_09.png

新たに、MONGODB_URIをキーとし、先程のURI(下記)を貼り付けます。ただし、dbuserとdbpassword、dbnameのところは、データベースの接続アカウントに置き換える必要があります。(MONGOLAB_CYAN_URIの値をコピー&ペーストしても良いかも)
mongodb://:@ds253348.mlab.com:53348/

アプリケーションの再起動

Herokuの"More"のところにある”Restart all dynos”を選択し、アプリケーションを再起動します。

technical0408_10.png

再起動は1,2分内で終わると思いますので、再起動後、"Open app"をクリックし、アプリケーションを表示します。
下図のようなログイン及びサインアップ画面が表示されれば成功です。

technical0408_11.png

なお、ソースコードは、[リポジトリ名]\frontend\srcの中にあります。

補足

ちなみに、下記のフレームワークを使っているようです。

  • Backend: Loopback 3+
  • Frontend: Angular 6+
  • Real-time: Primus
  • Database: MongoDB
  • Pub-sub & queuing: RabbitMQ