share facebook facebook twitter menu hatena pocket slack

2011.11.10 THU

実験くん(jsPlumbでAWSの構成を可視化)

三浦 悟

WRITTEN BY 三浦 悟

jsPlumbという、HTMLのエレメント同士をコネクタで接続して移動させることができるライブラリがあります。

jsPlumbはjQueryのプラグインとしてもリリースしているので、これを使用してEC2とセキュリティグループの関係を接続図としてHTMLレンダリングするように実験してみました。

EC2とセキュリティグループの情報をjsonで出力するPHPを以下のように用意します。

awsplug – awsplug.php GitHub Gist

set_region(AmazonEC2::REGION_APAC_NE1);
  $instance_res = $ec2->describe_instances();
  $instance = json_decode($instance_res->body->reservationSet->to_json());
  $sg_res = $ec2->describe_security_groups();
  $sg = json_decode($sg_res->body->securityGroupInfo->to_json());
  $aws = array('ec2' => $instance, 'sg' => $sg);
  echo json_encode($aws);

?>

jsPlumbはGoogleCodeでホストされているので、以下からダウンロードします。

・jsPlumb
Downloads – jsplumb – Google Project Hosting

次に、HTMLページを用意し、PHPからJSONを取得したものをjsPlumbに適用させます。

awsplug – index.html GitHub Gist



awsplug




上記のみで設定完了なので、早速実行してみます。
下記のように正しく表示されました。
これにより、セキュリティグループの違うものが一目でわかります。

jsPlumbはjQueryUI.Draggableをサポートしているので、コネクタで接続されたエンドポイント(ノード)は
ドラッグで移動することもできます。

ELBの接続状況など、いろいろなことが可視化できそうです。

こちらの記事はなかの人(memorycraft)監修のもと掲載しています。
元記事は、こちら

三浦 悟

三浦 悟

高円寺在住のなんじゃ系男子 またの名をmemorycraftといいます。 炭水化物大好き 日々の「なんじゃ?」を記事にしてます。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。