title: How to make CloudFront never cache index.html on S3 bucket
body: <p>I have a React app hosted on an S3 bucket. The code is minified using <code>yarn build</code> (it's a create-react-app based app). The <code>build</code> folder looks something like:</p>
  
  <pre><code>build
  ├── asset-manifest.json
  ├── favicon.ico
  ├── images
  │   ├── map-background.png
  │   └── robot-icon.svg
  ├── index.html
  ├── js
  │   ├── fontawesome.js
  │   ├── packs
  │   │   ├── brands.js
  │   │   ├── light.js
  │   │   ├── regular.js
  │   │   └── solid.js
  │   └── README.md
  ├── service-worker.js
  └── static
      ├── css
      │   ├── main.bf27c1d9.css
      │   └── main.bf27c1d9.css.map
      └── js
          ├── main.8d11d7ab.js
          └── main.8d11d7ab.js.map
  </code></pre>
  
  <p>I never want <code>index.html</code> to be cached, because if I update the code (causing the hex suffix in <code>main.*.js</code> to update), I need the user's next visit to pick up on the <code>&lt;script src&gt;</code> change in <code>index.html</code> to point to the updated code.</p>
  
  <p>In CloudFront, I can only seem to exclude paths, and excluding "/" doesn't seem to work properly. I'm getting strange behavior where I change the code, and if I hit refresh, I see it, but if I quit Chrome and go back, I see very outdated code for some reason.</p>
  
  <p>I don't want to have to trigger an invalidation on every code release (via CodeBuild). Is there some other way? I think one of the challenges is that since this is an app using React Router, I'm having to do some trickery by setting the error document to <code>index.html</code> and forcing an HTTP status 200 instead of 403.</p>