(React)ブラウザ側のキャッシュ保存時間の変更がわからない

Question

現在React、AWSを用いてウェブアプリを作成しております。デプロイ時にキャッシュが残っていることによりデプロイが中々反映されない状態が起こってしまい、その問題を今後起こさないためにブラウザ、AWS側のキャッシュの保存時間を変更したいと考えています。サーバー側はcloudfront側で調整できたのですが、ブラウザ側の調整方法がわかりません、Headerのメタにcache-controlを記述しようと思いましたがHTML5以降では指示されていないようでした。何か方法をご存知の方がいらっしゃれば教えていただきたいです。

Answer 1

このような場合、ファイル内容の変更のたびにファイル名を変更して、前のファイルのキャッシュと無関係にしてしまう、という手法が一般的です。

Reactということで、何かしらのビルドプロセスを組んでいるかと思いますが、ファイル名の変更もプロセスに組み込むことが可能です。