Skip to content
By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post
About re:Post

AWS CDK - Why is my React app build not compressed on CloudFront despite using gzip , custom cache policy ?

0

Hello AWS Community, I am facing an issue with the build size of my React application when distributing it via CloudFront. Here are the details of my setup:

  1. Build Process
    • I am compressing the build using gzip algorithm from my local machine.
    • The compressed build is then uploaded to an S3 bucket.
  2. CloudFront Distribution
    • I am using AWS CDK to create the CloudFront distribution.
    • I have set the compress option to true in the CloudFront distribution configuration.
    • I am using a custom cache policy.
    • Gzip and Brotli settings are both enabled and TTL values are greater than zero.
    • I am allowing all headers in the CORS rule for the S3 bucket

Despite these configurations, the build size for my home page is 35 MB when served through CloudFront. However, when I use the same compressed build on an EC2 instance, it is correctly compressed to 8 MB.

Topics
AWS Cloud Development Kit (CDK)Networking & Content Delivery
Tags
Amazon Route 53Amazon CloudFrontAWS Cloud Development Kit (CDK)
Language
English
asked 2 years ago335 views
2 Answers
0

We’re sorry, but we’re having difficulty fully understanding your issue. Could you please provide a more brief overview or clarify the specific points you’re concerned about?

thanks Pritam

answered 2 years ago
  • User-5100386
    2 years ago
    1. I am using AWS CDK to sets up the infrastructure for deploying a web application, including S3 for hosting, CloudFront for distribution, and Route 53 for DNS management.
    2. I am deploying my local Web app build(compressed using compression-webpack-plugin to compress assets(js,css,html) using gzip alogorithm) on S3 bucket for hosting but the build is still taking 30MB not compressed to 8 MB.
    3. when I am running it on my local system it is still taking (8MB) to load.

    To summarize it , I am facing issue regarding build compression on cloudFront.

0
  1. Response from S3 must include Content-Length
  2. Not all files can be compressed by cloudfront
  3. The response must not include a Content-Encoding header!
  4. Size of files should be at least 1KB So first you have to ensure Cloudfront compressing at all. Check all the requirements above:
  5. Test simply with CURL some of your static files in Static files in Cloudfront distribution curl -H "Accept-Encoding: gzip" https://test.com/static.js"
  6. Check if Content-Encoding: gzip response header present

If its present then you can start solving the problem, file size from EC2 is much smaller. EC2 probably using NGINX or Apache to deliver static files, which migh have different settings for compression

answered 2 years ago
  • User-5100386
    2 years ago

    Hi Oleksandr, I tested the compression of our static files served by CloudFront using the following command : curl -H "Accept-Encoding: gzip" https://<cloudFrontLink>/main.xyz.esm.js -I

    Here is the response I received (sensitive information is in xyz): HTTP/2 200 content-type: application/javascript content-length: 10555700 date: Thu, 19 Sep 2024 05:49:27 GMT last-modified: Wed, 18 Sep 2024 13:06:51 GMT etag: "55b3f0a7533ecbaae29ec8ff5ed7d6b0-2" server: AmazonS3 x-cache: Hit from cloudfront via: 1.1 xyz.cloudfront.net (CloudFront) x-amz-cf-pop: xyz x-amz-cf-id: xyz age: 3

    Based on the response, the following points are satisfied: 1.The response from S3 includes the Content-Length header. 2.Not all files can be compressed by CloudFront. 3.The response does not include a Content-Encoding header. 4.The size of the file is at least 1KB. However, the Content-Encoding: gzip header is not present in the response, indicating that CloudFront is not serving the file in a compressed format.

    Please let me know how we should proceed to ensure that CloudFront compresses and serves the files correctly.

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Relevant content