こんにちは、虎の穴ラボの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="削除"/>
これでテキストボックスから削除したいオブジェクトパスを入力し、
「削除」ボタンを押せば、キャッシュ削除処理が実行されます。
◼️実行サンプル
・入力画面
・API実行時のレスポンス
これにより、わざわざマネジメントコンソールにログインしなくても、
ツールからキャッシュの削除が簡単に出来るようになりました!
※CloudFront API のリファレンスは下記にて公開されています。
これ以外にも様々な機能がありますので、ぜひご参考下さい。
https://docs.aws.amazon.com/cloudfront/index.html#lang/ja_jp
虎の穴ではJavascriptエンジニアをはじめとして一緒に働く仲間を絶賛募集中です!
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
www.toranoana.jp
また虎の穴は、技術書典5にスポンサー出展します!
新刊もありますので、ぜひブース番号「ス08」へお越しください。
techbookfest.org