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