はじめに
静的および動的なウェブコンテンツ (.html、.css、.js、イメージファイルなど) を Amazon S3 に低コストかつ安全に格納し、 Amazon CloudFront を用いて効率よくコンテンツを配信するという設計は割と良くあるのではないでしょうか。
しかし、効率よくコンテンツを配信してくれる反面、即時差し替えたいファイルがあっても 「キャッシュのせいでなかなか反映されない」 ということが起こります。
AWSの公式にも下記のように記載されています。
デフォルトでは、CloudFront は Amazon S3 からのレスポンスを 24 時間 (86,400 秒間のデフォルト TTL) キャッシュしています。リクエストが エッジロケーションに到着してから24 時間以内に Amazon S3 を提供した場合、Amazon S3 のコンテンツを更新したとしても、CloudFront はキャッシュされたレスポンスを使います。
この記事では、そんなキャッシュ問題を簡単に解消する方法を紹介します。
対処方法
即時差し替えたいファイルがあっても 「キャッシュのせいでなかなか反映されない」 ・・・それならば 「CloudFrontのキャッシュを削除してしまえばいいじゃん」 という方法の紹介です。
早速キャッシュの削除方法を説明します。
手順1
マネージメントコンソールで 「CloudFront Distributes」 を開き、キャッシュを削除したいサイトの 「ID」 をクリックします(ディストリビューションの選択)。

手順2
「Invalidations」 タブを選択し、 「Create Invalidation」 ボタンをクリックします。

手順3
モーダルが表示されるので、 「Object Paths」 のテキストボックスにキャッシュを削除したいファイルのパスを入力します。
私はまとめてキャッシュを削除したいので常に 「/*」 (すべてのキャッシュを削除)と指定していますが、全削除はリスクがありそうなので「/css/*」のように部分削除することをオススメします。
「Invalidate」 ボタンをクリックするとキャッシュの再作成が開始されます。

手順4
数分待ちます。
Statusが 「Completed」 となればキャッシュの再作成が完了しています。

以上です。
AWSの公式ドキュメントに別の対策が載っていたのでそちらもリンクを置いておきます。
(今回紹介したキャッシュの削除の方が簡単だとは思います。)
CloudFront が、Amazon S3 から古いコンテンツを提供し続けるのはなぜですか?