AWS CloudFront API を使ったキャッシュ削除ツール

こんにちは、虎の穴ラボのS.Sです。

季節の変わり目でもあり、最近は朝晩が少し肌寒くなりましたね。

さて弊社の通販サイトでは、画像のキャッシュサーバーにAWS CloudFrontを利用していますが、
キャッシュしている画像をリンクはそのままに、今すぐに新しい画像に差し替えたい場合、
マネジメントコンソールにアクセスして、古い画像のキャッシュを削除する必要があります。
（デフォルト設定では、キャッシュが保持される期間は、24時間になっているため）

でも、非エンジニアがマネジメントコンソールにアクセスするのはハードル高いですよね。
そこで今回は、CloudFrontのAPI を使って、ブラウザ上で簡単にキャッシュの削除ができるツールをつくりました！

CloudFront API のSDKは [.NET、C++、Go、Java、JavaScript、PHP、Python]が用意されていますが、
この中でも今回は、社内ツールとして使うため、簡単に実装できるJavaScriptのSDKを選択しました。

◼️ API 接続に必要なアクセスキーを取得する
アクセスキーIDとシークレットアクセスキーをマネジメントコンソールにて作成します。
詳しくは、下記を参考にしてください。
docs.aws.amazon.com

◼️ CloudFront API に接続してみる
HTML上にて、SDKをインポートさせます。

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

（※2018/9/18 時点での最新バージョン）

javascript にて、接続情報を設定します。

    var config = new AWS.Config({
        accessKeyId : xxxxxxxxxxxxx, //アクセスキーID
        secretAccessKey : xxxxxxxxxxxxx, //シークレットアクセスキー
        region : xxxxxxxxxxxxx  //リージョン
    });
    cloudfront = new AWS.CloudFront(config)

(※ 今回はサンプルなので、シークレットアクセスキーなど接続情報を直接書いていますが、くれぐれもマネはしないでくださいね)

これで一度実行してみて、エラーが発生しなければ、接続成功です！

◼️ 実際にCloudFront API で、キャッシュの削除処理をやってみる

・createInvalidation.js

$(".js-createInvalidationBtn").on('click', function() {
  //キャッシュを削除したいオブジェクトパスを格納
  var invalidationPath = $("#createInvalidationText").val();
  var invalidationPathList = invalidationPath.split(/\n/);

  var params = {
      DistributionId: xxxxxxx, //ディストリビューションの ID (CloudFrontのマネジメントコンソールにて確認)
      InvalidationBatch: {
         CallerReference: xxxxxxxx, //任意のユニークなID（timestampで可）
         Paths: {
           Quantity: invalidationPathList.length,
           Items: invalidationPathList
        }
     }
  };

  cloudfront.createInvalidation(params, function(err, data) {
      if (err){
         console.log(err, err.stack); // エラー発生時
      }
      else{
         console.log(data); // 成功（削除IDなどが返却される）
      }
  });
});

・createInvalidation.html （入力画面）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.316.0.min.js"></script>
<script src="/js/cdn/createInvalidation.js"></script>

<textarea id="createInvalidationText" rows="10" cols="50" placeholder="キャッシュを削除したい画像パスを入力して下さい"></textarea>
<input type="button" class="js-createInvalidationBtn" value="削除"/>