AWS SDK for JavaScript in the Browserを使ってみる

2013.11.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ブラウザ用AWS SDK

先日、AWS SDK for JavaScript in the BrowserのDeveloper previewがリリースされました。
すでにNode用SDKはリリースされていますが、これはブラウザからJavaScriptを使用して、
サーバサイド用コードを書かずにS3やDynamo等のサービスを利用できるようです。

このSDKは、下記のようにAmazonのJavaScriptライブラリを指定するだけで利用できます。
※2013/11/11現在

    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script>

なお、このライブラリはAmazonのWeb ID連携をサポートするらしいので、
クライアントサイドのコード内にAWSの認証情報を書くことなく使用できます。(一応書くこともできる)

簡単なサンプルを作成

では、AWS SDK for JavaScript in the Browserを試してみます。
今回は、S3の任意のバケットにあるオブジェクト一覧を表示してみましょう。
まずはS3でバケットを作成し、そこに適当なファイルをアップロードしておきます。
次に、バケットに対してProperties>Permissions>add CORS Configurationを選択します。
ここで設定を下記のように記述し、バケットに対して外部からの接続を許可しましょう。 
※とりあえず全部許可しているので注意

<CORSConfiguration>
    <CORSRule>
        <AllowedHeader>*</AllowedHeader>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

バケットの設定ができたら、あとはJavaScriptからアクセスするだけです。
認証はWeb ID連携が一般ですが、今回はとりあえず直接AWS.config.updateにキーを指定しています。
※非推奨

<!DOCTYPE html>
<html>
<head>
    <title>AWS SDK for JavaScript in the Browser</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //クライアントにキーが丸見えになるので非推奨
        AWS.config.update({accessKeyId: '<アクセスキー>', secretAccessKey: 'シークレットキー'});

        //バケット名
        var s3BucketName = '<バケット名>';
        //リージョン
        var s3RegionName = '<リージョン>';
        
        listObject();
        
        function listObject() {
            var s3 = new AWS.S3({params: {Bucket: s3BucketName, Region: s3RegionName}});
            s3.listObjects(function (err, data) {
                if (err) {
                    console.error(err);
                    throw err;
                }
                var keys = 'Your Bucket Object Keys:<br />';

                $.each(data.Contents, function (index, obj) {
                    var params = {Bucket: s3BucketName, Key: obj.Key};
                    keys += (index + ': ' + obj.Key + '<br />');
                });
                $("#keys").html(keys);
            });
        }
    </script>
</head>
<body>
<div id="keys"/>
</body>
</html>

AWS SDK for Node.jsを使用したことがある人にとってはわかりやすいと思います。
ブラウザで上記HTMLを開くと、指定したバケットのオブジェクトが表示されます。

まとめ

今回はAWS SDK for JavaScript in the Browserを使ってみました。
しかしアクセスキーは直接クライアントに記述するというよろしくない方法をとっているので、次回はWeb ID連携を試してみます。

参考サイトなど