導入

このブログでは、AWS - IOTを使ってフロントエンドアプリケーションをバックエンドから切り離す方法をご紹介します.
基本的に、フロントエンドは、APIのゲートウェイに残りのエンドポイントを通して話します.我々は、データベース内のすべての動物を得るために2つの方法を持っています.そして、動物を挿入するもう一つの方法.
これは、チュートリアルのブログは、フロントエンドのアプリは非常に最小限の意味です.
フロントエンドは、単純な角度10のアプリケーションで構成されます.
完全なコードをチェックアウトするには、GitHub repo

建築

ご覧の通り、バックエンドは以下の通りです.

2つの方法で休息エンドポイントを持つAPIゲートウェイ

ストリームを有効にしたダイナモテーブル

ストリームの変更によって取得される警告

AutotiotFunctionでメッセージを発行するために使用されるIOTトピック.

それで、高いレベルで、我々は、顧客が行動をするシステムを想像することができます.この挿入物は、ラムダを呼ぶストリームをトリガします.そして、それは支払いのためにプロセスを引き起こすことができます、あるいは、確認またはいくらかの時間がかかる何か⏳.
私たちの場合では、このプロセスは、新たに追加された動物を取り、IOTのトピックにそれを発行します.そして、我々はクライアントのコンソールでそれを見ることができて、必要に応じてそれに作用することができます🙄 )

コード例

フロントエンド

フロントエンドのために、すべてはGithubレポの中のAWS例にあります.それを実行するには、次のことができますREADME .
IOTのトピックを購読するには、AWSライブラリを使用しますaws-iot-device-sdk . 私たちはMQTT.js 我々が望むならば.
フロントエンドアプリケーションで動作するように、パッケージに次のように追加しました.JSON :

"browser": {
   "fs": false,
   "tls": false,
   "path": false
},

この部分がなければ、アプリケーションを実行するとエラーが発生します.ERROR in ./node_modules/aws-iot-device-sdk/common/lib/tls-reader.js
Module not found: Error: Can't resolve 'fs' in '/Users/.../aws-examples/aws-examples/node_modules/aws-iot-device-sdk/common/lib'さらに、我々はポリフィルで以下の部分を加えなければなりません.TS

(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;

import * as process from 'process';
window['process'] = process;

それがなければブラウザはindex.js:43 Uncaught ReferenceError: global is not definedコードはかなり簡単です.アプリで.コンポーネント.TS
コンストラクターでは、IOTトピックに接続します.
ℹ️ AWSサービスへのアクセスを必要とするすべてを知っているように資格情報が必要です.これが我々が認知を使用している理由です.我々は、アプリケーションがiOTトピックを購読できるように一時的な資格情報を生成するために使用している.

// 1
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: this.AWSConfiguration.poolId
})

const clientId = 'animals-' + (Math.floor((Math.random() * 100000) + 1)); // Generating a clientID for every browser

// 2
this.mqttClient = new AWSIoTData.device({
    region: AWS.config.region,
    host: this.AWSConfiguration.host,
    clientId: clientId,
    protocol: 'wss',
    maximumReconnectTimeMs: 8000,
    debug: false,
    secretKey: '', // need to be send as an empty string, otherwise it will throw an error
    accessKeyId: '' // need to be send as an empty string, otherwise it will throw an error
});

' 1 'で、IdentityPoolidはバックエンドから来ます、そこで、我々は若干の認知資源でテンプレートを展開します🤓.
' 2 'では、IOTのエンドポイントに接続しようとしていますREADME )
NGoninitに移動すると、次のようになります.

this.mqttClient.on('connect', () => { // 1
    console.log('mqttClient connected')
    this.mqttClient.subscribe('animals-realtime')
});

this.mqttClient.on('error', (err) => { // 2
    console.log('mqttClient error:', err);
    this.getCreds();
});

this.mqttClient.on('message', (topic, payload) => { // 3
    const msg = JSON.parse(payload.toString())
    console.log('IoT msg: ', topic, msg)
});

this.http.get(`${this.api}get-animals` // 4
)
    .subscribe((data) => {
        console.log('data: ', data)
    });

' 1 'で、それが正しく確立されるならば、我々は接続イベントを聞いています.
' 2 'で、エラーの場合、GetCredsメソッドを呼び出しています.これを知って興味深いことは、最初に我々はアプリケーションを実行すると、IOTトピックに接続するエラーをスローしますが、資格情報がMQttClientに渡されないため、エラーイベントでは、GetCreddsメソッドを使用して資格情報を正しく設定します.
' 3 'では、我々はIOTのトピックに公開されているメッセージングを聞いている、ここで我々はちょうど物事をシンプルに保つためにログをコンソールです.
“4”では、我々はちょうどDynamicDBの動物を得るためにAPIゲートウェイのエンドポイントを要求している.
getCredsメソッドへの移行

const cognitoIdentity = new AWS.CognitoIdentity(); // 1
(AWS.config.credentials as any).get((err, data) => {
    if (!err) {
        console.log('retrieved identity: ' + (AWS.config.credentials as any).identityId)
        var params = {
            IdentityId: (AWS.config.credentials as any).identityId as any
        }
        // 2
        cognitoIdentity.getCredentialsForIdentity(params, (err, data) => {
            if (!err) {
                // 3
                this.mqttClient.updateWebSocketCredentials(data.Credentials.AccessKeyId,
                    data.Credentials.SecretKey,
                    data.Credentials.SessionToken,
                    data.Credentials.Expiration
                )
            }
        })
    } else {
        console.log('Error retrieving identity:' + err)
    }
})

' 1 'では、認知アイデンティティのインスタンスを取得しています.
' 2 '我々は資格を取得している資格証明書から
' 3 'では、取得した資格情報を持つmqttclientを更新します.
これをテストするには、簡単なボタンをクリックします.

insertAnimal() {
    this.http.post(`${this.api}add-animal`, {
        "name": "cat",
        "age": 1
        // other fields ...
    }
    )
        .subscribe((data) => {
            console.log('data: ', data)
        });
}

数秒後コンソールコンソールでコンソールを受信します.IoT msg: animals-realtime ... 🎉
demo

バックエンド

バックエンドコードは/backend/iot
我々はリソースを定義しているtemplate.yml . バックエンドを使用しますAWS SAM
どのようにそれを展開するかを知るにはREADME .
テンプレートの高レベルで.YMLには複数のリソースがあります.

AWSのIOTのもの

InsertanimalFunction , Animal Animalを使用してAPIエンドポイントを呼び出すときに呼び出されるラムダ関数

GetAnimalsFunction , Get Animalを使用してAPIエンドポイントを呼び出すときに呼び出されるラムダ関数

RadioDBストリームでトリガされるラムダ関数

APIゲートウェイ

アイテムを保存するためのDynamoDBデータベース

ユーザプールとUserIdentity、フロントエンドへのアクセスを与えて、IOTトピックを購読します

結論

要約すると、非同期/長期バックエンドプロセスからフロントエンドを分離する方法がたくさんあります.これらのアプローチの一つは、IOT発行/購読方法論を活用することである.クライアントがイベントを実行し、トピックを購読する場合.そして、バックエンドが必要なタスクの処理を終了すると、トピックに結果/通知を発行できます.
我々のケースでは、それはフロントエンドに新しい追加された動物を返す簡単なアクションだった.それは、より多くのそれより複雑でありえます.
この記事が役に立つと思います.ご意見・ご質問をお寄せください🙏