状況
S3 + CloudFront の静的サイトで、CSS を直した版を本番に出す。CloudFront は 1 日キャッシュする設定で、ファイル名にハッシュは付けていない(同じ名前で上書きする)。
作業する順番に並べてください。
正答
- CloudFront で変更したパスのキャッシュを無効化する
- 直したファイルを本番の S3 バケットにアップロードする
- 本番 URL を開き、新しい CSS が届いているか確かめる
- ステージング環境で表示崩れが無いか確かめる
正しい順番
- ステージング環境で表示崩れが無いか確かめる
- 直したファイルを本番の S3 バケットにアップロードする
- CloudFront で変更したパスのキャッシュを無効化する
- 本番 URL を開き、新しい CSS が届いているか確かめる
解説
本番に出す前にステージングで確かめ、S3 にアップロードしてから CloudFront のキャッシュを無効化し、最後に本番 URL で確かめる。無効化をアップロードより先にすると、その間に来たリクエストで S3 の古い CSS が再びエッジにキャッシュされ、1 日間古いままになる。同じファイル名で上書きする構成では、アップロード → 無効化の順が欠かせない。確認を無効化より前にすると、キャッシュの古い CSS を見て「反映されていない」と誤って判断しやすい。
この問題を含む AWS のテストを制限時間つきで解く
AWSクイズへ