Я размещаю статический веб-сайт с использованием S3 + CloudFront + Route53, развернутый через Terraform.
Все работает правильно, когда я загружаю одни и те же файлы локально, но когда CloudFront обслуживает сайт, макет CSS совершенно неправильный, как будто применяются разные стили, хотя это не так.
Я проверил, что это не проблема с кэшированием, загрузкой или различием файлов. Я скачал все файлы CSS, JS и HTML, которые предоставляет CloudFront, и сравнил их с локальными версиями — все побайтно идентично. Если я возьму точный index.html CloudFront и подам его локально с теми же файлами CSS, страница будет отображаться идеально. Я также несколько раз аннулировал CloudFront, подтвердил правильность типов MIME и проверил, что все ресурсы загружаются с номерами 200 и нет ошибок консоли. Чтобы полностью исключить JavaScript, я удалил все теги (jQuery, Bootstrap, плагины, Ionicons, Google Maps и мои собственные пользовательские скрипты) и повторно развернул их, но макет в рабочей среде по-прежнему был нарушен. Я также очистил кеш браузера, протестировал режим инкогнито, принудительно воссоздал объекты S3 с помощью Terraform и убедился в отсутствии смешанного контента или проблем с CORS. Несмотря на то, что все файлы точно совпадают, макет нарушается только тогда, когда сайт обслуживается через CloudFront, а не локально, поэтому что-то в ответе или заголовках CloudFront заставляет браузер отображать один и тот же HTML/CSS по-разному.
Есть ли другие советы по отладке или что может быть причиной этого?
Подробнее здесь: https://stackoverflow.com/questions/798 ... -though-fi
