CloudFront+S3でWebホスティングしたときにキャッシュしたくない！

前がき

普段、AWSでSPA(Angular)をデプロイするときによくCloudFrontとS3のWebホスティングの機能を使って環境にデプロイすることがあります。
開発中に実際の環境で動かしてテストした場合にCloudFrontのキャッシュによって新しいバージョンのコードが動かなかったので、解決方法を紹介したいと思います。

発生した事象

CloudFront + S3の構成でAngularアプリを開発中にS3にアプリをデプロイすると新しいバージョンのアプリが動かず、古いバージョンのアプリのままになっていることがありました。
正しいバージョンをS3にデプロイしているはずなのになぜかアプリケーションが更新されないという現象にハマっていました。

原因

初めてのデプロイの時はCloudFrontにキャッシュがないのでデプロイしたコードがそのまま動きますが、2回目以降になるとCloudFrontがキャッシュを持っていて、CloudFrontで指定している時間が経過しないとCloudFrontにキャッシュされているコンテンツがS3から更新されません。

対処法

CloudFrontの設定からキャッシュのTTLを0に設定します。

最後に

S3のファイルを更新したにもかかわらず、アプリケーションが更新されていないことがありました。
何度更新してもアプリケーションが更新されず、随分と時間を溶かしてしまいました。
開発中はキャッシュはそれほど必要なので上記の設定を入れておきたいです。
もちろん公開する場合はキャッシュしないとオリジンに対して毎回リクエストが発生してしまい、不要な負荷とコストがかかってしまうのでキャッシュの設定は入れていきましょう。