はじめに
初めての個人開発投稿です。
過去にRaspberry PiやAWS IoTCore、DynamoDBの学習をしてアウトプットをしてきましたが、これらを技術を使って自宅の熱帯魚を飼っている水槽温度を管理するIoTシステムを開発しました。
RasberryPiを使ったエッジデバイス開発からAWSサービスを使用したクラウド環境の構築、Webアプリケーションにおけるバックエンド〜フロントエンドまでフルスタックに開発を進めました。
システム構成
主に3部構成に分けることができます。
- 水槽周りのローカルシステム
- AWSサービスを利用したクラウド
- Webアプリケーション
ローカルシステム
Raspberry Pi と水温センサー(DS18B20)を使用して、水槽の温度を取得し、IoT CoreへMQTTプロトコルで取得したデータをパブリッシュします。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3774903%2Ff50b5197-e9a8-234f-1f36-62e2d9d170ad.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f594e041cc908e8b46139b6cc7024859)
先日の記事で挙げた構成と同じものになります。
水温センサー〜Raspberry Piへの配線図やPythonプログラムはこちらの記事で紹介しています。
クラウド
ローカルシステムからMQTTプロトコルでパブリッシュされたデータを、AWS IoT Coreがサブスクライブし、IoTCoreのルールアクションでDynamo DBへ保存します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3774903%2F244aa96e-abff-f241-7dfd-4e41b6dce06d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b123dc6c1d913e5872b0ba443c93c44d)
ローカルシステムからAWS IoT Core〜Dynamo DBへの実装手順はこちらの記事で紹介しています。
Webアプリケーション
フロントエンドをReact、バックエンドをFlaskで構築しました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3774903%2F4a043e4f-0586-19f0-e8f7-0f052bed99d2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1c17eaf237e6060ae6e097ae973a602a)
Reactは現在フロントエンド開発の主流ということで、今後フルスタックに開発していくためには必要な経験だと思い採用することにしました。
Flaskに関しては、Pythonが使い慣れていることもあり、気軽にWebアプリケーションを作れるフレームワークということで採用しました。同じPythonのWebフレームワークでDjangoもありますが、データベースもDynamoDBからデータを取得するくらいの用途しかなく、認証などの機能も作らない想定なので、軽量で構造がシンプルなFlaskにしました。
実際の動き
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3774903%2Fc0526ca1-d64b-1b9d-b47e-d3fd80135739.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7fd192e73ed988071806eb156c0ff1ff)
用意したもの
- 温度センサー(DS18B20)
- Raspberry Pi
- AWSアカウント
- Webサーバー(Render)
デプロイ
AWS EC2やECSを使ってデプロイすることももちろんできますが、個人開発で収益も生まないシステムのため、無料で使用できるWebサーバーを探し、特にドメインにもこだわりはなかったので、Renderを使用することにしました。
初めて使ったサービスでしたが、1時間ほどで簡単にReact+FlaskのWebアプリケーションをデプロイすることができました。
手順は大まかに以下のような感じです。
- デプロイに使用するGitHubリポジトリと連携
- リポジトリからアプリケーションのルートディレクトになるディレクトリを指定
- AWSの認証情報などの環境変数を設定
- 起動用のコマンド(pythonファイルの実行コマンド)を指定
上記を設定しておけば、あとはGithubへのプッシュをトリガーとして自動デプロイしてくれます。
無料で使えて簡易CI/CD パイプラインまでやってくれます。
最後に
今回の開発でエッジデバイス、クラウド、Webアプリケーションのバックエンドからフロントエンドまでの経験ができたので、今後はスマホアプリ開発もやっていきたいと思う。
今回はフロントにReactを使用したので、ReactNativeであればキャッチアップしやすそうな感じがする。
また、これから冬になって水温が下がってくるので、熱帯魚が住める適温に保つためにもヒーターを取り付けて温度制御する機能やWebブラウザから遠隔操作する機能追加もしていきたい。
参考記事