4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【AWS】CloudFront+S3でコンテンツを即時反映する方法

Last updated at Posted at 2021-03-14

はじめに

静的および動的なウェブコンテンツ (.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」**をクリックします(ディストリビューションの選択)。
1.png

手順2

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

手順3

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

手順4

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

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

4
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?