AWS SDK for JavaScriptでブラウザからEC2、CloudWatchを操作できるか

試してみました。

なんでそんなことやろうと思ったかというと、

『EC2の料金を円建て月額で表示するページを作ってみた』という記事を書いたところ、
友達に『稼働インスタンスの価格付きリストも出して』と言われて、

確かに支払情報と合わせてインスタンスの想定月額付きリストが簡単に見れると便利かも
さらにCloudWatchからCPU/メモリ使用率を取得すればコスト削減の提案が出来るかも

とか思ったからです。

で、結論、CloudWatchはいけるけどEC2はダメそう(´・ω・｀)

んー、CloudWatchだけだとちょっと辛いすなぁ。
やっぱりChrome拡張に作りなおせばいけるだろうけど、うーむ・・・

以下、確認手順です。

確認手順

まず公式githubに書いてあるように、sdkを読み込むHTMLを用意する。

<html lang="ja">
  <head>
    <meta charaset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.4.min.js"></script>
    <script src="js/index.js"></script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

JavaScriptファイルはこんな感じ。
今回はEC2、RDS、CloudWatchとS3のテキトウなデータを取得してみる。

$(function(){
  function print_result(service_name, err, data){
    if (err){
      console.log(service_name + " error : " + err.message);
    }else{
      console.log(service_name + " success");
      console.log(data);
    }
  }

  AWS.config.update({
    accessKeyId: 'XXX',
    secretAccessKey: 'XXX',
    region: 'ap-northeast-1'
  });

  var ec2 = new AWS.EC2();
  ec2.describeInstances({}, function(err, data){
    print_result("EC2", err, data);
  });

  var rds = new AWS.RDS();
  rds.describeDBInstances({}, function(err, data){
    print_result("RDS", err, data);
  });

  var s3 = new AWS.S3({params: {Bucket: 'mikeda-test'}});
  s3.listObjects({}, function(err, data){
    print_result("S3", err, data);
  });

  var cloudwatch = new AWS.CloudWatch();
  cloudwatch.listMetrics({}, function(err, data){
    print_result("CloudWatch", err, data);
  });

});

WEBサーバを起動して

$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

アクセスしてみる。

f:id:mikeda:20150108144835p:plain

エラー。
AWS.S3あるけど、AWS.EC2はそもそも定義されていないらしい。

なんかもうこの時点でダメそうな予感はするものの、いちおうEC2を含むように手元でビルドして、

$ git clone git@github.com:aws/aws-sdk-js.git
$ cd aws-sdk-js/
$ npm install
$ node dist-tools/browser-builder.js s3,ec2,rds,cloudwatch > /path/to/sample/js/aws-sdk.js

読み込むSDKファイルを変更してみる。

<html lang="ja">
  <head>
    <meta charaset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/aws-sdk.js"></script>
    <script src="js/index.js"></script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

アクセスすると、

f:id:mikeda:20150108144838p:plain

CORSエラー祭り。

エラーを非表示にすると、

f:id:mikeda:20150108144836p:plain

CloudWatchだけ取得できているけど、他は全部CORSエラーすね(´・ω・｀)

S3に関してはPermissionsからCORS設定を追加してやれば、
※こんなにいろんな権限いらないです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

アクセスできるようになります。

f:id:mikeda:20150108144837p:plain

EC2、RDSに関しては、まぁセキュリティ的にしゃあないかな。