[AWS] S3+CloudFront で運用中の静的サイトを更新する方法 [2022年版]

2022-09-15

S3 + CloudFront での更新では、次の手順で更新を進めます。

S3 バケットのファイルを更新

いらなくなったものを削除して、必要なものをアップロードします。
ファイルはフィルタしているので見えませんが (ΦωΦ)

アップロードはファイルをドラッグ&ドロップすれば、自動的にアップロード画面に切り替わります。
更新があったファイルは、そのままアップロードしても上書きできます。

削除は消したいファイルやフォルダを選んで「削除」を押すと、削除画面に切り替わります。

SPA(Single Page Application)やSSG(Static Site Generator: 静的サイトジェネレータ)を使っている場合はファイル名の hash値 が変わっていたりするので、バケットの中身をすべて削除してアップロードしなおすのがお手軽です。

CloudFront のキャッシュをクリア

S3 + CloudFront の構成では、S3 のコンテンツを CloudFront がキャッシュしています。

ファイルの更新をする時は S3 のコンテンツを入れ替えたあと、CloudFront のキャッシュを更新します。
特に、SPAのようにファイル名にハッシュ値が含まれる場合は、ファイルの整合がとれずに画面が表示されなかったりなど、ユーザがアクセスできない時間ができることがあります。

まずは、IDをクリックして、ディストリビューションの詳細ページに移動します。
ファイルはフィルタしているので見えませんが (ΦωΦ)

「キャッシュ削除」を押して、タブを移動します。

「キャッシュ削除を作成」を押して、画面を移動します。

「オブジェクトパスを追加」の欄に、キャッシュを削除するパスを入力します。
個別の設定ではなく、すべてのキャッシュを消す場合には /* と入力します。

入力したら、「キャッシュ削除を作成」を押して、しばらく待ちます。

ステータスが「完了済み」になれば、キャッシュの削除は完了です。

動作確認

最後に、入れ替え後のURLにアクセスして確認します。

更新後の画面が表示されていれば、終わりです。

技術AWS

Posted by 86