Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9145

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

$
0
0

Sigfoxが提供していたIoT Agency PlatformがGNU Affero General Public Licenseに基づくオープンソースとなりました。ここでは、IoT Agency PlatformをHeroku上にデプロイする方法を説明します。
image.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ウィザードに従いデプロイする方法と
image.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はユニークな名前になるように設定してください。
image.png
設定後、Deploy appボタンをクリックすると、デプロイが開始します。数分かかりますが、完成すると下記のような画面になります。
image.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というアドオンが表示されます。
image.png
mLab MongoDBを選択すると、下図の画面になりますので、有償版でも結構ですが、まずの動作確認としては、無償版(Sandbox - Free)を選択し、Provisionボタンをクリックしてください。
image.png

mLab MongoDBとの接続

追加された"mLab MongoDB"をクリックします。
image.png
mLabの管理画面が表示されます。
画面上に、MongoDB URIで接続する(To connect using a driver via the standard MongoDB URI)と書かれた下にmongodB://からはじまるURIが表示されています。このURIをHeroku側に設定してあげればOKです。
image.png
HerokuのSettingタグに遷移し、Config Vars(環境変数設定)をします。
image.png
新たに、MONGODB_URIをキーとし、先程のURIを貼り付けます。ただ、のところは、データベースの接続アカウントに置き換える必要があります。(MONGOLAB_CYAN_URIの値をコピー&ペーストしても良いかも)

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

Herokuの"More"のところにある**Restart all dynos"を選択し、アプリケーションを再起動します。
image.png
再起動は1,2分内で終わると思いますので、再起動後、"Open app"をクリックし、アプリケーションを表示します。
下図のようなログイン及びサインアップ画面が表示されれば成功です。
image.png

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

補足

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

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

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

Sigfox Japan KCCS
Twitter @ghibi


Viewing all articles
Browse latest Browse all 9145

Trending Articles