[AWS] S3+CloudFront で運用中の静的サイトを更新する方法 [2022年版]
S3 + CloudFront での更新では、次の手順で更新を進めます。
S3 バケットのファイルを更新
いらなくなったものを削除して、必要なものをアップロードします。
ファイルはフィルタしているので見えませんが (ΦωΦ)
アップロードはファイルをドラッグ＆ドロップすれば、自動的にアップロード画面に切り替わります。
更新があったファイルは、そのままアップロードしても上書きできます。
削除は消したいファイルやフォルダを選んで「削除」を押すと、削除画面に切り替わります。
SPA（Single Page Application）やSSG（Static Site Generator: 静的サイトジェネレータ）を使っている場合はファイル名の hash値 が変わっていたりするので、バケットの中身をすべて削除してアップロードしなおすのがお手軽です。
CloudFront のキャッシュをクリア
S3 + CloudFront の構成では、S3 のコンテンツを CloudFront がキャッシュしています。
ファイルの更新をする時は S3 のコンテンツを入れ替えたあと、CloudFront のキャッシュを更新します。
特に、SPAのようにファイル名にハッシュ値が含まれる場合は、ファイルの整合がとれずに画面が表示されなかったりなど、ユーザがアクセスできない時間ができることがあります。
まずは、IDをクリックして、ディストリビューションの詳細ページに移動します。
ファイルはフィルタしているので見えませんが (ΦωΦ)
「キャッシュ削除」を押して、タブを移動します。
「キャッシュ削除を作成」を押して、画面を移動します。
「オブジェクトパスを追加」の欄に、キャッシュを削除するパスを入力します。
個別の設定ではなく、すべてのキャッシュを消す場合には /* と入力します。
入力したら、「キャッシュ削除を作成」を押して、しばらく待ちます。
ステータスが「完了済み」になれば、キャッシュの削除は完了です。
動作確認
最後に、入れ替え後のURLにアクセスして確認します。
更新後の画面が表示されていれば、終わりです。