Cloudfront cache display mobile view for desktop users - terraform

Question

I am using cloudfront caching for several weeks now (7 days caching).
Since then, I have several pages for which the mobile version is displayed to desktop users, as if the cache was storing a mobile version for every users.
Here is the terraform configuration of cloudfront:
resource "aws_cloudfront_cache_policy" "proxy_hubspot_cache_policy" {
name = "custom-caching-policy"
comment = "Our caching policy for the Cloudfront proxy"
default_ttl = 604800 # seven day of cache
max_ttl = 604800
min_ttl = 604800
parameters_in_cache_key_and_forwarded_to_origin {
enable_accept_encoding_brotli = true
enable_accept_encoding_gzip = true
cookies_config {
cookie_behavior = "none"
}
headers_config {
header_behavior = "none"
}
query_strings_config {
query_string_behavior = "all"
}
}
}
resource "aws_cloudfront_origin_request_policy" "proxy_hubspot_request_policy" {
name = "custom-request-policy-proxy"
cookies_config {
cookie_behavior = "all"
}
headers_config {
header_behavior = "allViewer"
}
query_strings_config {
query_string_behavior = "all"
}
}
resource "aws_cloudfront_distribution" "proxy_cdn" {
enabled = true
price_class = "PriceClass_100"
origin {
origin_id = local.workspace["cdn_proxy_origin_id"]
domain_name = local.workspace["cdn_domain_name"]
custom_header {
name = "X-HubSpot-Trust-Forwarded-For"
value = "true"
}
custom_header {
name = "X-HS-Public-Host"
value = local.workspace["destination_url"]
}
custom_origin_config {
origin_protocol_policy = "https-only"
http_port = "80"
https_port = "443"
origin_ssl_protocols = ["TLSv1", "TLSv1.1", "TLSv1.2"]
}
}
default_cache_behavior {
viewer_protocol_policy = "redirect-to-https"
allowed_methods = ["GET", "HEAD", "OPTIONS", "PUT", "POST", "PATCH", "DELETE"]
cached_methods = ["GET", "HEAD"]
target_origin_id = local.workspace["cdn_proxy_origin_id"]
cache_policy_id = aws_cloudfront_cache_policy.proxy_hubspot_cache_policy.id
origin_request_policy_id = aws_cloudfront_origin_request_policy.proxy_hubspot_request_policy.id
compress = true
}
logging_config {
include_cookies = true
bucket = data.terraform_remote_state.shared_infra.outputs.cloudfront_logs_s3_bucket_url
prefix = "proxy_${local.workspace["env_type"]}"
}
restrictions {
geo_restriction {
restriction_type = "none"
}
}
viewer_certificate {
acm_certificate_arn = aws_acm_certificate.proxy_certificate.arn
ssl_support_method = "sni-only"
}
aliases = [local.workspace["destination_url"]]
depends_on = [
aws_acm_certificate_validation.proxy_certificate_validation
]
}
resource "aws_cloudfront_monitoring_subscription" "monitor_www_proxy" {
distribution_id = aws_cloudfront_distribution.proxy_cdn.id
monitoring_subscription {
realtime_metrics_subscription_config {
realtime_metrics_subscription_status = "Enabled"
}
}
}
Any idea what can be wrong in the configuration?
Thanks a lot

Answer 1

I believe the easiest way to get CloudFront to cache mobile pages separately from desktop pages is to configure the CloudFront-Is-Mobile-Viewer and CloudFront-Is-Desktop-Viewer headers as part of the cache key. Note all the headers that are available there, if you also want separate cache for table viewers, or iOS and Android caches, etc.
The Terraform config would look like:
resource "aws_cloudfront_cache_policy" "proxy_hubspot_cache_policy" {
name = "custom-caching-policy"
comment = "Our caching policy for the Cloudfront proxy"
default_ttl = 604800 # seven day of cache
max_ttl = 604800
min_ttl = 604800
parameters_in_cache_key_and_forwarded_to_origin {
enable_accept_encoding_brotli = true
enable_accept_encoding_gzip = true
cookies_config {
cookie_behavior = "none"
}
headers_config {
header_behavior = "whitelist"
headers {
items = ["CloudFront-Is-Mobile-Viewer", "CloudFront-Is-Desktop-Viewer"]
}
}
query_strings_config {
query_string_behavior = "all"
}
}
}
Note that these headers will also be passed to your backend origin after you implement this configuration, so you could change the logic of your application to render mobile vs desktop based on the value of those headers instead of inspecting the user-agent header.