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

5903 ワード
Heroku MongoDB IoT Node.js deploy Node.js テキストリンク

※IoT Agency Platfromは2020年12月31日をもってサービス終了予定となります。
※GitHubリポジトリは引き続きご利用いただけます。

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

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ウィザードに従いデプロイする方法と

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はユニークな名前になるように設定してください。

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

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というアドオンが表示されます。

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

mLab MongoDBとの接続

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

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

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

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

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

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

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

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

補足

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

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

なお、本投稿に当たっては、Antoine de Chassey、Louis Moreauそして、Guillaume Noelに感謝します。

Sigfox Japan KCCS
Twitter @ghibi