きっかけ

「ステージング環境でUIが崩れているので、修正お願いします。」

「修正してデプロイしました。スーパーリロードしてみてください。」

「変わってないですね。」

「本当ですか？」

「はい、変わってないです。」

「CloudFrontのキャッシュをクリアしました。」

「あ、変わりました。」

「めんどくさいなあ...」

概要

「10人のうち９人はチョコレート好き。そして10人目は嘘をついている」
これはアメリカの漫画家、ジョンＧ.トゥリアス（John G. Tullius、1953年生まれ）の言葉です。

「10人のうち９人は静的ファイル配信にCDNを利用。そして10人目は嘘をついている」
これは私（Me、1998年生まれ）の言葉です。

CDN、特にAWSのCloudFront は、その高速配信や負荷軽減など、多くのメリットを提供してくれます。しかし、時にはキャッシュによって頭を悩ませることもあります。

「デプロイしたのに、なぜか古いCSSが...」私は何度も経験しました。

こういった意図しないキャッシュのふるまいに対しては、デプロイパイプライン上でキャッシュの削除を行うことが好ましいです。
ただ、なんらかの理由でキャッシュ削除のタイミングが合わないこともあります。

例えば、ローリングデプロイ中に新旧のタスクが混在し、CloudFrontが古いタスクから配信された静的ファイルをキャッシュしてしまうケースです。
このケースでは、環境が安定してからキャッシュを削除するべきですが、1日に何回もデプロイが行われるステージング環境などでは、時々CIが失敗し、結果として古いキャッシュがそのまま残ってしまうことがあります。

こういった時はマネジメントコンソールにて「キャッシュ削除」を行うのですが、これが非常に面倒です。

Ctrl+Shift+Rみたいな感覚でCloudFrontのキャッシュ削除できればいいのになぁ〜。。。

よし作ろう。

目的

Ctrl+Shift+0でCloudFrontのキャッシュを削除することが目的です。
そのために、Chrome拡張機能を開発しました。
この拡張機能では、次のフローを想定しています。

完成品

こちらになります٩( ᐛ )و

CRXJSというViteのPluginを使用し開発しておりVite + React + TypeScript + TailwindCSS という構成を採用しています。

ダウンロード方法

リリースノートにあるcf_cache_purge_extension.zipをダウンロードし展開します
chrome://extensions を開き、デベロッパーモードをオンにして、展開したフォルダを指定します

または、リポジトリ内でnpm run buildを実行し、/dist以下を指定することも可能です。

実行方法

拡張機能一覧にCloudFront cache purgeがあることを確認します
CloudFrontのdistributionIdと、下記相当のPolicyを持つIAMアクセスキーを取得します

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": ["cloudfront:GetInvalidation", "cloudfront:CreateInvalidation"],
      "Resource": "arn:aws:cloudfront::235087485205:distribution/E26EXPHJDDBX9Q"
    }
  ]
}

NOTE
リポジトリ配下で./create-acceskey.sh　<distribution_id> を実行すれば、該当のポリシーとユーザーが生成され、アクセスキーが払い出されます。

拡張機能を開き、必要情報を入力します
Ctrl+Shift+0を入力、もしくは拡張機能内でpurge cacheボタンをクリックします
キャッシュ削除が完了したら、WEB Pushが通知されます

ふりかえり

CRXJSの利用により、簡単に実装を行うことができました！
（ストアへの公開はコストがかかるため、今回は見送りました。（笑））

具体的な実装方法に関しては、既に多くのわかりやすい記事が存在するため、そちらを参照していただけますと幸いです。

何かご意見ご要望ございましたら、遠慮なくコメントいただければ！！