Статический сайт CloudFront + S3: тот же HTML/CSS отображается иначе, чем при локальном обслуживании. Неправильная ли у ⇐ CSS

[Anonymous]

Я размещаю статический веб-сайт на Amazon S3 за CloudFront, при этом вся настройка создается и развертывается с помощью Terraform. Странное поведение, с которым я столкнулся, заключается в том, что одни и те же файлы HTML и CSS отображаются правильно, когда я обслуживаю их локально (с помощью простого локального HTTP-сервера), но макет становится неправильным, когда страница доставляется через CloudFront. Макет навигации, интервалы и другие визуальные элементы смещаются, как если бы применялись разные стили, хотя сами файлы выглядят неизменными.
Вот соответствующая конфигурация Terraform, настраивающая загрузку S3 и распространение CloudFront:

Код: Выделить всё

locals {
content_type_map = {
"html" = "text/html",
"css"  = "text/css",
"js"   = "application/javascript",
"jpg"  = "image/jpeg",
"png"  = "image/png"
}
}

resource "aws_s3_object" "website_contents" {
for_each     = fileset("../site/", "**/*")
bucket       = data.aws_s3_bucket.main_bucket.id
key          = each.key
source       = "../site/${each.value}"
content_type = lookup(
local.content_type_map,
length(split(".", each.value)) > 1 ? split(".", each.value)[1] : "",
"text/plain"
)
etag         = filemd5("../site/${each.value}")
}

resource "aws_cloudfront_distribution" "cdn" {
origin {
domain_name              = data.aws_s3_bucket.main_bucket.bucket_regional_domain_name
origin_access_control_id = aws_cloudfront_origin_access_control.oac.id
origin_id                = "s3-origin"
}

default_root_object = "index.html"
enabled             = true
is_ipv6_enabled     = true
aliases             = ["example.com"]

default_cache_behavior {
allowed_methods  = ["GET", "HEAD"]
cached_methods   = ["GET", "HEAD"]
target_origin_id = "s3-origin"

forwarded_values {
query_string = false
cookies {
forward = "none"
}
}

viewer_protocol_policy = "redirect-to-https"
min_ttl     = 1
default_ttl = 86400
max_ttl     = 31536000
compress    = true
}

price_class = "PriceClass_100"

viewer_certificate {
cloudfront_default_certificate = false
acm_certificate_arn            = "arn:aws:acm:us-east-1:..."
ssl_support_method             = "sni-only"
minimum_protocol_version       = "TLSv1"
}
}

Что я уже проверил:
Я загрузил все файлы CSS, JS и HTML, которые обслуживает CloudFront (через Curl), и сравнил их с локальными файлами с помощью diff -u. Все файлы побайтно идентичны. Если я беру точный index.html CloudFront и передаю его через локальный HTTP-сервер вместе с теми же CSS-файлами, макет отображается идеально. Я несколько раз признавал CloudFront недействительным (включая /*), подтверждал правильные типы MIME для каждого объекта S3 и проверял, что все ресурсы загружаются с 200 ответами. Я также временно удалил все теги (jQuery, Bootstrap, плагины и мои собственные скрипты) и повторно развернул их, чтобы исключить изменение DOM с помощью JavaScript — макет по-прежнему выглядит неправильным только тогда, когда сайт обслуживается через CloudFront. Нет проблем со смешанным контентом, ошибок CORS, ошибок консоли и проблем с устаревшим кэшем. Единственная разница — это путь доставки (CloudFront или локальный сервер), а не сами файлы.
Вопрос:
Учитывая приведенную выше конфигурацию Terraform, есть ли что-нибудь в моей настройке CloudFront или S3 (заголовки, сжатие, обработка корневых объектов, кодирование контента и т. д.), что могло бы привести к тому, что браузер будет отображать один и тот же HTML/CSS по-разному при обслуживании через CloudFront, чем при локальном обслуживании? Какие настройки CloudFront/S3 следует изучить или изменить, чтобы версия, обслуживаемая CDN, отображалась идентично локальной версии?

Подробнее здесь: https://stackoverflow.com/questions/798 ... hen-served