Issue with compressed files deployed with CDK TS

Question

Hi,

If I  save compressed JSON files with brotli with the extension `.json, the stack deployment by the CDK/CloudFront produces files that can't be decompressed by browsers. If I save the files with the extension `.json.br`, the files are transferred without alteration and can be decompressed by browsers...

My guess is that file is transformed somehow b/c the extension `.json` is for text files, while `.br` is for binary files.

Note that transferring the files with the SDK is safe with the same `Content-Type: application/json` and `Content-Encoding: br`—It is just not as automatic as it can be with a `cdk deploy`...

The failing deployment definition:
``` typesccript
new BucketDeployment(this, 'CdnBucketDeploymentLessons', {
    cacheControl: [
        CacheControl.setPublic(),
        CacheControl.maxAge(Duration.days(1)),
        CacheControl.staleWhileRevalidate(Duration.minutes(10)),
    ],
    contentEncoding: 'br',
    contentType: 'application/json',
    destinationBucket: this.bucket,
    destinationKeyPrefix: 'data/kb/academy/lesson',
    distribution: this.distribution,
    memoryLimit: 512,
    prune: false,
    sources: [Source.asset(path.resolve(__dirname, '../../../cdn/data/kb/academy/lesson'))],
});
```

Any clue about the root cause of the file alteration?

I want to avoid having a CloudFront function to rename file access on-the-fly to add a `.br` after requests for `.json`. 
I also want to avoid forcing en client updates to get the data from `.json.br` files...

Thanks,
Dom

re:Post Agent · Answer

The issue you're experiencing is likely related to how CloudFront handles file compression and content types. When you save compressed JSON files with the extension `.json`, CloudFront may be attempting to re-compress or modify these files, leading to the decompression issues in browsers.

CloudFront supports Brotli compression, but it's important to note that some web browsers, like Chrome and Firefox, only support Brotli compression when the request is sent using HTTPS. They don't support Brotli with HTTP requests.

The reason your files work correctly when saved with the `.json.br` extension is that CloudFront recognizes this as an already compressed file and doesn't attempt to modify it further.

To resolve this issue without changing your file extensions or adding CloudFront functions, you could try the following:

1. Ensure that you're using HTTPS for your CloudFront distribution.

2. In your BucketDeployment configuration, try explicitly setting the content type and encoding:

```typescript
   new BucketDeployment(this, 'CdnBucketDeploymentLessons', {
     // ... other options ...
     contentType: 'application/json',
     contentEncoding: 'br',
     // ... rest of your configuration ...
   });
   ```

3. Make sure your CloudFront distribution is configured to respect the origin's cache headers and not override them.

4. In your CloudFront distribution settings, ensure that Brotli is enabled in the cache policy.

If these steps don't resolve the issue, you might need to consider using the `.json.br` extension for your files, as this seems to be the most reliable way to ensure the files are served correctly without alteration.

Remember, when using pre-compressed files, it's generally better to let CloudFront serve these files as-is rather than trying to compress them again at the edge. This approach can lead to faster content delivery and less processing overhead.  
**Sources**  
[Serve compressed files - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html)  
[Cloudfront not serving pre compressed .gz files from s3 | AWS re:Post](https://repost.aws/questions/QUeViviDG7TWO4gsQhooH12w/cloudfront-not-serving-pre-compressed-gz-files-from-s3)

Issue with compressed files deployed with CDK TS

Relevant content