1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-07

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

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

##アプリケーションの再起動
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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?