病みつきエンジニアブログ

機械学習、Python、Scala、JavaScript、などなど

AWS の CloudWatch Logs を便利に見れる GUI 環境を作ってみた

github.com

github.com

screenshot

コンセプト

先行アプリケーションとして awslogs という CLI がある。これを GUI = ブラウザで見れるようにしたもの。なので awslogs-gui、awslogs-api という名前だし、パラメータやデフォルトの挙動は awslogs に倣っている(API の依存ライブラリですらある)。

awslogs-api は awslogs の機能を API として提供していて、 Swagger も用意している。

awlogs-gui は awslogs-api を叩くための SPA として作っている。

CloudWatch Logs 公式管理画面の問題点

いくつか問題点があると思っている。

  • 管理画面の認証:AWSの管理画面が提供する認証方法しか提供していない。例えばイントラネットであればOK、 ベーシック認証、セッション時間を伸ばすなどができない(のもセキュアで正しくはあるんだけど)
    • へーしゃの場合だと Google 認証に統一しているが、セッション時間が短い。かつ、Switch Role して管理画面にたどり着くのが面倒(けど、これは僕が知らないだけで回避策があるのかもしれない、、、ので教えて欲しい)
  • ページング前提の UX
  • ログの表示順

その点 awslogs は大変重宝しているけど、全員(例えば非エンジニア)に使いやすいわけではない。もちろんCLIの方が便利なケースもある。

使ったもの

  • Vue
  • Vuex
  • Parcel (非Webpack)
  • element-ui
  • awslogs
  • Swagger (connexion)

いつものように Docker ベースで作成。

Parcel は、詰まらない限り便利なので、今後も簡単なユースケースに使っていきたいし、進化のスピードが速いので、僕がハマってた何かを誰かが解決してくれてるかもしれないし僕も解決していきたい。

Vue / Vuex で作ったもののソースコードを外に出すのは初めてだったりする、、、ギョームでも使ったこともないので、まだまだ汚い。

API の方では、Swagger と UI を提供している。初めて connexion 使ったが便利だった。

今後追加したい(してほしい)機能

  • Stream API で表示する
    • 実は awslogs-api の方はストリーム対応済み
  • awslogs のパラメータへの対応
    • これも awslogs-api の方では対応済み。というかフロント書いてる途中に飽きた
  • PWA または Local Storage を使った、ロググループなどのキャッシュ