土曜日, 6月 21, 2025
- Advertisment -
ホームニューステックニュース閉域網でも使える!CloudWatchダッシュボードにUIを組み込む方法 #AWS - Qiita

閉域網でも使える!CloudWatchダッシュボードにUIを組み込む方法 #AWS – Qiita



閉域網でも使える!CloudWatchダッシュボードにUIを組み込む方法 #AWS - Qiita

先日、 AWS ガバメントクラウドワークショップで、ガバメントクラウド環境における生成 AI 活用事例をご紹介させて頂きました。その中で取り上げた「ログ要約ツール」は、指定した時間とキーワードを入力するだけで、該当ログを抽出・要約してくれるものです。ツールの詳細は AWS Blog のこちらの記事をご参照ください。このツールを作成する上で、工夫した点は CloudWatch カスタムウィジェットという機能の使用です。以下の流れでカスタムウィジットを作成することによって、CloudWatch ダッシュボード上から直接アプリケーションを呼び出せるようにしました。

  • Lambda 関数内に HTML/CSS を記述
  • CloudWatch ダッシュボードの作成
  • 作成した Lambda 関数をカスタムウィジェットとして追加

cw01.png

閉域網で構築した環境では、インターネット経由でアプリケーションの UI にアクセスできないケースがあります。CloudWatch カスタムウィジェットを使えば、AWS マネジメントコンソールに入れる権限さえあれば ネットワーク経路を気にせずアプリケーションを利用できます。

CloudWatch ウィジェットで動く簡易アプリ 「WEBサイト確認」 を作ってみます。URL を入力し 実行 を押すと、内部で curl を実行して到達可否を返します。

cw02.png

  • アクセス可能な場合

cw03.png

  • アクセス不可の場合

cw04.png

上記リポジトリに CloudFormation テンプレートを公開しています。

git clone https://github.com/Toru-Kubota/cw-widget-cfn.git

または GitHub から cw-widget-cfn.yml をダウンロードしてください。

CloudFormation スタック作成

テンプレートを指定し、他のパラメータはデフォルトのままデプロイします。

cw05.png

プロイ完了後、以下 2 つの関数が作成されます。

  • cw-01-lambda :curl を実行するバックエンド
  • cw-02-lambda :UI を返すフロントエンド

cw06.png

CloudWatch ダッシュボード作成

CloudWatch コンソールでダッシュボードを新規作成します。

cw07.png

「その他のコンテンツタイプ」から「カスタムウィジット」を選択します。

cw08.png

この画面は何も選択せず、「次へ」をクリックします。

cw09.png

「Lambda関数」に「cw-02-lambda」を選択後、「ウィジットの追加」をクリックします。

cw10.png

ダッシュボート内に下記の様なUI画面が追加されます。「Lambdaの実行を許可するか?」の警告が表示されるため、許可します。また、ここで忘れずに右上の「保存」をクリックしてダッシュボードを保存します。

cw02.png

CloudWatch カスタムウィジェットを使えば、Lambda でホストした小さな Web アプリをダッシュボードに埋め込み、閉域網でも簡単に利用できます。運用改善に使用出来るアイデア等があれば、教えて頂ければ幸いです。





Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -