M5Stack + UiFlow + AWS でグラフ化 & 異常通知
M5Stack + UiFlow + AWS でグラフ化 & 異常通知
2020-01-25
JAWS-UG金沢 #49 × Marutsu Maker Starter #70 AWS×M5StackでIoTをはじめよう
JAWS-UG金沢 PhalanXware ふぁらお加藤
AWS とは
クラウド業界トップシェア。IoTとの連携方法もたくさんあるのでぜひ使いましょう。
全体的な設計
やりたいこと
温度を測定して送信。グラフで確認できる。しきい値を超えたら自動でメール通知くるようにする。
AWS IoTを使いたいんだけれど
AWS IoTへはMQTTやHTTPでデータをやりとりするんですが、今日のUiFlowを使うと、メモリが足りないのか?認証をM5Stackに組み込む難易度が高い。(UiFlowを使わない方法ならできる)
今日はせっかくUIFlowを使うので、そこから呼び出せるものを作る。
流れ
センサー > M5Stack > AWS > メール > 俺たち
M5Stackでまず温度を毎秒とるようにしてみる
Aに環境センサーをとりつけて温度を表示できることを確認します。
- まず、温度センサーをAポートにとりつける
- flow.m5stack.com をブラウザで表示、m5stackを接続
- 「Units」から「+」を選択して「ENV」を追加
- labelを4つ配置(1つは後から使います
- 図のようにブロックを組んで実行
ここまでできたら、この温度をAWSに送信し、一定値を超えたらメールがくるようにする
流れ
センサー > M5Stack > AWS > メール > 俺たち
AWS部分の流れさらに詳細
CloudFront > AWS API Gateway > Lambda > CloudWatch > SNS > スマホへ
CloudWatchにデータを送るLambdaの作成
Lambda
- 関数の作成
- イチから作成
- 関数名に
m5stack-temp
- ランタイムは
Python 3.8
- 「基本的なLambdaアクセス権限で新しいロールを作成」
- 「関数の作成」を実行
## コード
import boto3
import json
import datetime
print('Loading function')
cloudwatch = boto3.client('cloudwatch')
def lambda_handler(event, context):
PutMetricData = cloudwatch.put_metric_data(
Namespace='M5STACK',
MetricData=[
{
'MetricName': 'fromM5Stack-temp',
'Timestamp': datetime.datetime.utcnow(),
'Value': float(event['body']),
'Unit': "None"
},
]
)
PutMetricData
ロールの設定
- コードから下にスクロールすると「実行ロール」があり、ここから「IAMコンソールでxxxxロールを表示します」リンクをクリックして移動。
- ポリシー名のリンクをクリック
- 「ポリシーの編集」をクリックし、「JSON」タブをクリック。
- 最後のEffectを追加して、cloudwatch:PutMetricData権限を設定する。
- 「ポリシーの確認」をクリックして「CloudWatch 制限:書き込み」「CloudWatch Logs 制限: 書き込み」を確認して「変更の保存」実行。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "logs:CreateLogGroup",
"Resource": "arn:aws:logs:ap-northeast-1:999999999999:*"
},
{
"Effect": "Allow",
"Action": [
"logs:CreateLogStream",
"logs:PutLogEvents"
],
"Resource": [
"arn:aws:logs:ap-northeast-1:999999999999:log-group:/aws/lambda/m5stackTest:*"
]
},
{
"Effect": "Allow",
"Action": [
"cloudwatch:PutMetricData"
],
"Resource": "*",
"Condition": {
"Bool": {
"aws:SecureTransport": "true"
}
}
}
]
}
Lambdaを呼び出すAPI Gatewayの作成
- 「APIを作成」
- 「REST API」を選んで「構築」
- REST
- 新しいAPI
- 「API名」に
m5stack-api
- 「エンドポイントタイプ」は 「エッジ最適化」
- 「APIの作成」を実行
- 「リソース」右の「アクション」からドロップダウンして「メソッドの作成」
- 表示されたドロップダウンから「POST」を選択して、✓をクリック
- 「統合タイプ」を「Lambda関数」選択
- Lambda関数に
m5stack-temp
を指定
- 関数名クリックで関数ページに飛ぶことを確認
- テストしてみる。
- テスト⚡をクリック
- リクエスト本文を
{
"
body
"
: 30.0}
と指定。最後がこんな感じのログがでてれば成功。
Fri Jan 24 14:54:41 UTC 2020 : Successfully completed execution
Fri Jan 24 14:54:41 UTC 2020 : Method completed with status: 200
Lambdaで保存されたデータをCloudWatchをみてみる
- 左から「メトリクス」を選ぶ
- 「すべてのメトリクス」タブ、「カスタム名前空間」から「M5STACK」を選択
- 「ディメンションなしのメトリクス」
-
fromM5Stack-temp
のチェックを入れるとグラフが表示され、30℃があれば成功。
API Gatewayをhttpで呼び出せるようにCloudFrontを準備する
- 関数の作成
- イチから作成
- 関数名に
m5stack-temp
- ランタイムは
Python 3.8
- 「基本的なLambdaアクセス権限で新しいロールを作成」
- 「関数の作成」を実行 ## コード
import boto3
import json
import datetime
print('Loading function')
cloudwatch = boto3.client('cloudwatch')
def lambda_handler(event, context):
PutMetricData = cloudwatch.put_metric_data(
Namespace='M5STACK',
MetricData=[
{
'MetricName': 'fromM5Stack-temp',
'Timestamp': datetime.datetime.utcnow(),
'Value': float(event['body']),
'Unit': "None"
},
]
)
PutMetricData
ロールの設定
- コードから下にスクロールすると「実行ロール」があり、ここから「IAMコンソールでxxxxロールを表示します」リンクをクリックして移動。
- ポリシー名のリンクをクリック
- 「ポリシーの編集」をクリックし、「JSON」タブをクリック。
- 最後のEffectを追加して、cloudwatch:PutMetricData権限を設定する。
- 「ポリシーの確認」をクリックして「CloudWatch 制限:書き込み」「CloudWatch Logs 制限: 書き込み」を確認して「変更の保存」実行。
- 「ポリシーの編集」をクリックし、「JSON」タブをクリック。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "logs:CreateLogGroup",
"Resource": "arn:aws:logs:ap-northeast-1:999999999999:*"
},
{
"Effect": "Allow",
"Action": [
"logs:CreateLogStream",
"logs:PutLogEvents"
],
"Resource": [
"arn:aws:logs:ap-northeast-1:999999999999:log-group:/aws/lambda/m5stackTest:*"
]
},
{
"Effect": "Allow",
"Action": [
"cloudwatch:PutMetricData"
],
"Resource": "*",
"Condition": {
"Bool": {
"aws:SecureTransport": "true"
}
}
}
]
}
Lambdaを呼び出すAPI Gatewayの作成
- 「APIを作成」
- 「REST API」を選んで「構築」
- REST
- 新しいAPI
- 「API名」に
m5stack-api
- 「エンドポイントタイプ」は 「エッジ最適化」
- 「APIの作成」を実行
- 「リソース」右の「アクション」からドロップダウンして「メソッドの作成」
- 表示されたドロップダウンから「POST」を選択して、✓をクリック
- 「統合タイプ」を「Lambda関数」選択
- Lambda関数に
m5stack-temp
を指定
- 関数名クリックで関数ページに飛ぶことを確認
- テストしてみる。
- テスト⚡をクリック
- リクエスト本文を
{
"
body
"
: 30.0}
と指定。最後がこんな感じのログがでてれば成功。
Fri Jan 24 14:54:41 UTC 2020 : Successfully completed execution
Fri Jan 24 14:54:41 UTC 2020 : Method completed with status: 200
Lambdaで保存されたデータをCloudWatchをみてみる
- 左から「メトリクス」を選ぶ
- 「すべてのメトリクス」タブ、「カスタム名前空間」から「M5STACK」を選択
- 「ディメンションなしのメトリクス」
-
fromM5Stack-temp
のチェックを入れるとグラフが表示され、30℃があれば成功。
API Gatewayをhttpで呼び出せるようにCloudFrontを準備する
- REST
- 新しいAPI
- 「API名」に
m5stack-api
- 「エンドポイントタイプ」は 「エッジ最適化」
- 「APIの作成」を実行
- 表示されたドロップダウンから「POST」を選択して、✓をクリック
- 「統合タイプ」を「Lambda関数」選択
- Lambda関数に
m5stack-temp
を指定 - 関数名クリックで関数ページに飛ぶことを確認
- テスト⚡をクリック
- リクエスト本文を
{
"
body
"
: 30.0}
と指定。最後がこんな感じのログがでてれば成功。
Fri Jan 24 14:54:41 UTC 2020 : Successfully completed execution
Fri Jan 24 14:54:41 UTC 2020 : Method completed with status: 200
- 左から「メトリクス」を選ぶ
- 「すべてのメトリクス」タブ、「カスタム名前空間」から「M5STACK」を選択
- 「ディメンションなしのメトリクス」
-
fromM5Stack-temp
のチェックを入れるとグラフが表示され、30℃があれば成功。
API Gatewayをhttpで呼び出せるようにCloudFrontを準備する
https://〜をUIFlowから呼び出すと、メモリが足りない?エラーになってしまうので避ける。(超上級編ではC++を使って接続できている)
API Gateway デプロイする
- 「リソース」右の「アクション」ドロップダウンから「APIのデプロイ」を選択
- 「デプロイされるステージ」に「[新しいステージ]」を選択
- ステージ名を「v1」に
- 説明は空欄で「デプロイ」を実行
- v1 ステージエディター画面にて「URLの呼び出し https://〜/v1」とあるので、これをメモしておく
CloudFrontを経由するように設定する
- 「Create Distribution」をクリック
- Web の 「Get Started」をクリック
- 「Origin Domain Name」にメモした 〜 の部分 (例:
4g65v9xnXX.execute-api.ap-northeast-1.amazonaws.com
)を入力 - 「Origin Path」に「v1」
- 「Origin Protocol Policy」を「HTTPS Only」を選択
- 「Default Cache Behavior Settings」の「Allowed HTTP Methods」を「GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE」を選択
- 「Query String Forwarding and Caching」を「Forward all, cache based on all」を選択
- 「Create Distribution」を実行
- Status が Deployed になることを待つ
- IDをクリックして「Domain Name」の欄をメモする
- (curl が使えるのならば
curl -v -d "{\"body\":1024}" http://メモしたURL.cloudfront.net/
を試す。(CloudWatchで↑と同じ方法で確認できる。今回は値1024がきてる。
- 「Origin Domain Name」にメモした 〜 の部分 (例:
定期的に温度を送るようにUiFlowを書く
URLには↑でメモした 〜cloudfront.net
のURLを指定すること。
CloudWatchでグラフを確認する
success!!とラベルがで出続けていれば、送信するのに成功しているので、CloudWatchのグラフ画面を再描画させるなどしたらグラフが確認できる。
Amazon SNSを設定する
- SNSを開く
- 「m5stack-notif」と入力して「次のステップ」を実行
- 「トピックの作成」を実行
- 「サブスクリプションの作成」を実行
- 「プロトコル」をEメール
- 「エンドポイント」を自分のメールアドレスにする
- 「サブスクリプションの作成」を実行
- 確認のための電子メールがくるのを確認
- メールを開いて「Confirm subscription」リンクを開く
- 「Subscription confirmed!」と表示されればOK
- SNSを開き、左から「トピック」を選び「m5stack-notif」を選択
- サブスクリプションのところに「確認済み」となっていればOK
# アラームを設定する
- CloudWatchを開く
- 左のメニューからアラームを選択
- 「アラームの作成」を実行
- 「メトリクスの選択」を実行
- 「カスタム名前空間」の「M5STACK」を選択する
- 「ディメンションなしのメトリクス」
- 「fromM5Stack-temp」にチェックして「メトリクスの選択」
- 「統計」を「最大」にし、「期間」を「1分」に
- 「しきい値の種類」を「静的」にし、「より大きい」を選択、「... よりも」に30を設定して「次へ」
- 「SNSトピックの選択」で「既存のSNSトピックを選択」し、「通知の送信先」で先程作成した「m5stack-notif」を選択して「次へ」
- 一意の名前を定義で「m5stack-alerm」として「次へ」
- 「アラームの作成」を実行
通知をださせてみる!
- M5Stackのセンサーをホッカイロで包んで温度を上げてみる!
- しきい値を超えたら「ALARM: "m5stack-alerm" in Asia Pacific (Tokyo)」っていうタイトルのメールが送られてくることを確認
リソースを削除しよう
- 「プロトコル」をEメール
- 「エンドポイント」を自分のメールアドレスにする
- 「サブスクリプションの作成」を実行
- メールを開いて「Confirm subscription」リンクを開く
- 「Subscription confirmed!」と表示されればOK
- SNSを開き、左から「トピック」を選び「m5stack-notif」を選択
- サブスクリプションのところに「確認済み」となっていればOK # アラームを設定する
- 「しきい値の種類」を「静的」にし、「より大きい」を選択、「... よりも」に30を設定して「次へ」
- 「SNSトピックの選択」で「既存のSNSトピックを選択」し、「通知の送信先」で先程作成した「m5stack-notif」を選択して「次へ」
- 一意の名前を定義で「m5stack-alerm」として「次へ」
- 「アラームの作成」を実行
- M5Stackのセンサーをホッカイロで包んで温度を上げてみる!
- しきい値を超えたら「ALARM: "m5stack-alerm" in Asia Pacific (Tokyo)」っていうタイトルのメールが送られてくることを確認
リソースを削除しよう
削除に時間がかかるので注意!
- CloudFront を開いて対象のDistributionsを選択して > Disable > In Progress
- 削除に時間がかかるんで他のを並行してやってください
- API Gateway を開いて「m5stack-api」を選択して > 右上のActions > Delete
- Lambda を開いて「m5stack-temp」を選択して > 右上のアクション > 削除
- CloudWatch を開いて「アラーム」を選択して > 「m5stack-alerm」にチェック > 右上のアクション > 削除
- SNSを開いて 「トピック」を選択して > 「m5stack-nofif」にチェック > 上段の「削除」
- CloudFront を開いて対象のDistributionsを選択して > Delete
おつかれさまでした
Author And Source
この問題について(M5Stack + UiFlow + AWS でグラフ化 & 異常通知), 我々は、より多くの情報をここで見つけました https://qiita.com/PharaohKJ/items/de75ff5a7bb1bfec57e2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .