Как заставить CloudFront никогда не кэшировать index.html в ведро S3

У меня есть приложение React, размещенное на ведре S3. Код минимизируется с помощью yarn build (это приложение, основанное на создании приложения). Папка build выглядит примерно так:

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

Я никогда не хочу, чтобы index.html был кэширован, потому что, если я обновляю код (вызывая суффикс hex в main.*.js для обновления), мне нужен следующий визит пользователя, чтобы выбрать изменение index.html <script src> index.html чтобы указать на обновленный код.

В CloudFront я могу только исключить пути, и исключение "/" похоже не работает должным образом. Я получаю странное поведение, когда меняю код, и если я удалю обновление, я это вижу, но если я уйду из Chrome и вернусь, по какой-то причине я вижу очень устаревший код.

Я не хочу запускать недействительность для каждой версии кода (через CodeBuild). Есть ли другой способ? Я думаю, что одна из проблем заключается в том, что, поскольку это приложение использует React Router, мне нужно сделать некоторые обманчивые меры, установив документ с ошибкой в index.html и заставляя HTTP-статус 200 вместо 403.

Ответ 1

Если вы никогда не хотите, чтобы index.html был кэширован, установите заголовок Cache-Control: max-age=0 в этом файле. CloudFront отправит запрос обратно в исходное ведро S3 по каждому запросу, но похоже, что это желаемое поведение.

Если вы хотите установить более длительное время истечения срока действия и аннулировать кеш CloudFront вручную, вы можете использовать * или /* как ваш путь недействительности (не / как вы уже упоминали). Это может занять до 15 минут для всех краевых узлов CloudFront по всему миру, чтобы отразить изменения в вашем происхождении.

Ответ 2

Вот команда, которую я выполнил, чтобы установить кеш-контроль в моем файле index.html после загрузки новых файлов на s3 и аннулирования Cloudfront:

aws s3 cp s3://bucket/index.html s3://bucket/index.html --metadata-directive REPLACE --cache-control max-age=0

Ответ 3

Решение на основе конфигурации CloudFront:

Перейдите в свой дистрибутив CloudFront на вкладке "Поведение" и создайте новое поведение. Укажите следующие значения:

Шаблон пути: index.html
Кеширование объектов: настройка
Максимальный TTL: 0 (или другое очень маленькое значение)
TTL по умолчанию: 0 (или другое очень маленькое значение)

Сохраните эту конфигурацию.

CloudFront больше не будет кэшировать index.html.