MQTTメッセージでLambdaからブラウザを更新する 〜Vue+Amplify編 | DevelopersIO
1 はじめに CX事業本部の平内（SIN）です。 以前、下記のような記事を書きました。 こちらは、ブラウザ上で、aws-iot-device-sdkを使用して、AWS IoT Coreのメッセージブローカーをsubscribeし、特定のTopicが到着した時点で、ブラウザを更新するものでした。 やってることは、全く同じなのですが、今回は、これをAWS Amplify（以下、Amplify）で作成してみました。使用したウェブフレームワークは、Veu.jsです。 Amplifyでは、ライブラリAWSIoTProviderを使用することで、簡単にPub/Subが可能です。 Amplify Libraries AWSIoTProvider また、権限については、AmplifyにAuthカテゴリを追加することで、CognitoのFederated Identitiesが利用可能なので、未認証IDを許
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-no
Vue.jsとAWSでつくる、シングルページの家計簿アプリ - Qiita
概要 作ったもの 最近お金が減るのが早くなった気がしたので、家計簿をつけようと思い立ちました。アプリをダウンロードしてきてもよいのですが、せっかくなので自分で作ることにしました。 タブレット、スマホ、パソコンのどれでも見れるようレスポンシブ対応を行ったのですが、タブレット(iPad)からみると以下の画像のようなものになっています。 チャート画面 記入画面 取引一覧画面 構成 静的ファイルはAWSのS3にホスティングし、お金のやり取りに関する情報はRDSに貯め、情報の追加・削除・修正にはLambdaとAPI Gatewayを用いて作ったAPIを通して行います。LambdaのコードはPythonで書いています。 簡単な図にすると、以下の画像のようになります。 共通部分 フロントエンド フロントはVue.jsを使って実装します。以下の画像の赤枠で囲った部分に表示するコンポーネントを切り替えます（
LambStatus - Lambdaを使ったWeb APIステータスページ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クラウドサービスを提供しているのであればステータスページは必須と言えます。そうすることで万一サーバが落ちていても開発者に通知することができます。サービス停止はもちろん困りものですが、まったく状況が分からないのに比べたら大幅に良いでしょう。 ステータスページを提供するサービスは幾つかありますが、今回はAWS Lambdaを使ったLambStatusを紹介します。 LambStatusの使い方 ユーザ向けの画面です。 グラフが表示されているので状況の変化が追えます。 過去に起きた問題を記録しておけます。 こちらは管理者向けの画面です。 インシデントは自分たちで登録します。 メンテナンス情報も記録しておけます。 測定する情報。 設定。 LambStatusはLambdaを使うことによって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
