静的WebアプリをS3へ更新！syncとCloudFrontキャッシュ削除の手順

この記事は約7分で読めます

こんにちは、 @Manabu です。

HTML、CSS、JavaScriptだけで作成したWebアプリは、S3とCloudFrontを使って公開できます。

最初の公開が終わった後も、機能追加や不具合修正のたびに、S3上のファイルを更新する作業が必要です。

ただし、S3へ新しいファイルをアップロードしただけでは、CloudFrontに残っているキャッシュが返され、変更がすぐに表示されない場合があります。

今回は、AWS CLIのs3 syncで静的WebアプリをS3へ同期し、CloudFrontのキャッシュ削除まで行う手順を紹介します。

この記事は、以下のような方におすすめです。

こんな方におすすめ

HTMLやJavaScriptで作成したWebアプリをS3で公開している
更新したファイルをS3へ効率よくアップロードしたい
CloudFront経由で確認しても古い画面が表示される
--deleteを安全に使う方法を知りたい

今回の前提
AWS CLIの接続を確認する
S3へ同期する前に変更内容を確認する
静的WebアプリをS3へ同期する
S3へ配置されたファイルを確認する
CloudFrontのキャッシュを削除する
キャッシュ削除の完了を確認する
更新後に確認すること
毎回キャッシュ削除が必要なのか
更新作業の流れ
まとめ
参考資料

今回の前提

この記事では、次の環境を前提にします。

静的Webアプリのファイルがローカルのdistディレクトリにある
公開先のS3バケットとCloudFrontが作成済み
AWS CLIがインストールされている
S3とCloudFrontを操作できる認証情報が設定されている

例として、Webアプリを次のURLで公開しているものとします。

https://example.com/products/app/sample-app/

S3には、次のようにファイルを配置します。

products/app/sample-app/
├── index.html
├── assets/
│   ├── style.css
│   └── app.js
└── images/
    └── main.webp

バケット名やディレクトリ名、CloudFrontディストリビューションIDは、自分の環境に置き換えてください。

AWS CLIの接続を確認する

最初に、AWS CLIが利用できることを確認します。

aws --version

続いて、現在使用している認証情報でAWSへ接続できるか確認します。

aws sts get-caller-identity

複数のプロファイルを使い分けている場合は、以降のコマンドへ--profileを追加します。

aws sts get-caller-identity --profile my-profile

表示されたアカウントIDやARNが、更新したいAWS環境のものか確認してから作業を進めます。

S3へ同期する前に変更内容を確認する

静的WebアプリのファイルをS3へ同期する場合は、aws s3 syncを使用できます。

最初から実際の同期を行うのではなく、--dryrunを付けて実行予定の処理を確認します。

aws s3 sync ./dist/ \
  s3://example-products-bucket/products/app/sample-app/ \
  --delete \
  --dryrun

--dryrunを付けた場合、アップロードや削除は実行されません。実際に行われる予定の処理だけが表示されます。

特に確認したいのは、次の項目です。

同期元が目的のdistディレクトリになっているか
同期先のバケット名が正しいか
他のアプリやサイトのディレクトリを指定していないか
意図しないdeleteが表示されていないか

--deleteの対象に注意

--deleteを付けると、同期元に存在しないファイルが同期先のS3から削除されます。バケットのルートや他のコンテンツを含むディレクトリを誤って指定しないようにしてください。

静的WebアプリをS3へ同期する

実行内容に問題がなければ、--dryrunを外して同期します。

aws s3 sync ./dist/ \
  s3://example-products-bucket/products/app/sample-app/ \
  --delete

s3 syncは、同期元と同期先を比較し、新しく追加されたファイルや更新されたファイルをコピーします。

--deleteを付けることで、開発中に削除した古いJavaScriptや画像もS3から削除され、ローカルのdistと公開先を同じ状態にできます。

古いファイルをS3に残しても問題ない場合や、削除の影響を判断できない場合は、最初は--deleteを付けずに実行しても構いません。

s3 syncの基本的な使い方やオプションについては、以下の記事でも紹介しています。

REFERENCE初心者向け！EC2からS3 snycでs3バケットにディレクトリ同期する方法！IT自習室

S3へ配置されたファイルを確認する

同期後は、対象のS3プレフィックスにファイルが配置されていることを確認します。

aws s3 ls \
  s3://example-products-bucket/products/app/sample-app/ \
  --recursive

最低限、エントリーポイントとなるindex.htmlが存在することを確認してください。

S3のオブジェクトキーと、CloudFrontがオリジンへ送信するパスが一致していない場合、AccessDeniedや404が発生することがあります。

CloudFrontのキャッシュを削除する

S3の更新後も古い画面が表示される場合は、CloudFrontに以前のファイルがキャッシュされている可能性があります。

次のコマンドで、更新したWebアプリのパスをキャッシュから削除します。

aws cloudfront create-invalidation \
  --distribution-id E1234567890ABC \
  --paths "/products/app/sample-app/*"

E1234567890ABCは、使用しているCloudFrontディストリビューションIDへ置き換えてください。

ワイルドカードを含むパスは、シェルによって展開されないように引用符で囲みます。

サイト全体を更新した場合は、次のようにすべてのパスを対象にすることもできます。

aws cloudfront create-invalidation \
  --distribution-id E1234567890ABC \
  --paths "/*"

ただし、1つのアプリだけを更新した場合は、アプリのパスだけを指定した方が対象範囲を分かりやすくできます。

キャッシュ削除の完了を確認する

キャッシュ削除を作成すると、結果に無効化IDとステータスが表示されます。

{
  "Invalidation": {
    "Id": "IABCDEFGHIJKLMN",
    "Status": "InProgress"
  }
}

完了するまで待つ場合は、表示された無効化IDを使って次のコマンドを実行します。

aws cloudfront wait invalidation-completed \
  --distribution-id E1234567890ABC \
  --id IABCDEFGHIJKLMN

コマンドが終了したら、ブラウザから公開URLを確認します。

更新後に確認すること

公開URLを開き、次の項目を確認します。

更新した画面や機能が表示されている
CSSやJavaScriptの読み込みエラーがない
画像が正しく表示されている
ブラウザの開発者ツールに404や403が出ていない
PCとスマートフォンの両方で操作できる

ブラウザ側にもキャッシュが残る場合があります。表示が変わらない場合は、シークレットウィンドウやスーパーリロードでも確認します。

毎回キャッシュ削除が必要なのか

すべての更新で、必ず/*のキャッシュ削除が必要になるわけではありません。

JavaScript、CSS、画像のファイル名にハッシュ値やバージョンを含める方法もあります。

app.a1b2c3.js
style.20261101.css

ファイル名が変わるとCloudFrontでは別のオブジェクトとして扱われるため、新しいファイルを取得できます。

一方、index.htmlは同じ名前で更新することが多いため、短いキャッシュ時間を設定するか、更新時にindex.htmlを無効化する運用が考えられます。

小規模なWebアプリでは、最初はアプリのパス全体を無効化する方法でも管理しやすいです。更新頻度が増えてきたら、ファイル名のバージョン管理やCache-Controlの設定を検討しましょう。

更新作業の流れ

最後に、作業の流れをまとめます。

ローカルでWebアプリの動作を確認する
s3 sync --dryrun --deleteで変更内容を確認する
s3 sync --deleteでS3へ同期する
S3に必要なファイルが配置されていることを確認する
CloudFrontで対象パスのキャッシュを削除する
無効化の完了後に公開URLを確認する

特に重要なのは、--deleteを実行する前に、同期先のバケットとプレフィックスを確認することです。

まとめ

今回は、静的Webアプリをaws s3 syncでS3へ同期し、CloudFrontのキャッシュを削除する手順を紹介しました。

S3へファイルを配置した後にCloudFrontの対象パスを無効化することで、更新した内容を利用者へ反映できます。

安全に更新するため、最初に--dryrunで処理内容を確認し、アプリごとにS3の配置先とキャッシュ削除の対象を限定するようにしましょう。

CloudFrontと非公開S3を使って静的サイトを配信する構成については、以下の記事で紹介しています。

REFERENCECloudFrontと非公開S3で静的サイトを配信する方法｜OAC構成を解説IT自習室

参考資料

REFERENCEsync — AWS CLI 2.39.3 Command Referencedocs.aws.amazon.com

REFERENCEcreate-invalidation — AWS CLI 2.39.3 Command Referencedocs.aws.amazon.com

REFERENCEInvalidate files to remove content - Amazon CloudFrontdocs.aws.amazon.com