4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

内容

先日、 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 アプリをダッシュボードに埋め込み、閉域網でも簡単に利用できます。運用改善に使用出来るアイデア等があれば、教えて頂ければ幸いです。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?