nginx configuration for the amplify hosted application to enable gzip

You can enable gzip compression using a cache policy in CloudFront. You can configure the cache policy to handle compression efficiently.

Here’s how you can set up a cache policy in CloudFront for your Amplify-hosted application:

=== 1. Create a New Cache Policy===

-> Log in to the AWS Management Console** and open the CloudFront service. -> Select "Policies" from the left sidebar, and then click on "Create cache policy." -> Configure the cache policy with the following settings:

• Name: Provide a name, such as EnableGzipCompressionPolicy.
• TTL Settings:
  • Adjust the TTL settings (e.g., minimum, maximum, and default) based on your caching needs.
• Header Settings:
• Under Headers, select "Whitelist" and add Accept-Encoding. This tells CloudFront to respect the Accept-Encoding header from clients, enabling gzip compression.
• Enable Gzip/Brotli: By default, CloudFront will compress files if you have allowed the Accept-Encoding header and set the "Compress objects automatically" option to "Yes" in the behaviors.

-> Click "Create" to create your cache policy.

=== 2. Attach the Cache Policy to Your Distribution===

-> Go back to your CloudFront distribution and select the distribution ID. -> Go to the "Behaviors" tab and click "Edit" on the default behavior (or create a new behavior if needed). -> Under Cache Policy and Origin Request Policy, Choose your newly created cache policy from the Cache Policy dropdown. -> Make sure that "Compress objects automatically" is set to "Yes".

--> Allow some time for CloudFront to propagate the changes.

By using a custom cache policy, CloudFront can handle compression efficiently, delivering optimized, compressed content based on the Accept-Encoding header from the client. This approach is flexible and allows fine-tuned control over caching and compression behavior for your Amplify-hosted application.

Alternatively, if the CloudFront approach does not work for you, you can customize the build settings and include a customHttp.yml file. However, Amplify doesn't provide direct access to the Nginx configuration, so you cannot modify it directly. Instead, you can achieve gzip compression by creating a customHttp.yml file with the gzip settings you want.

Here's how you can set up gzip compression in your Amplify application:

1. Create a customHttp.yml file:

• Create a file named customHttp.yml at the root of your project.

customHeaders:
  - pattern: "**/*"
    headers:
      - key: "Content-Encoding"
        value: "gzip"

2. Modify the build settings:

• Update the amplify.yml file in your project (or create one if it doesn't exist) to include gzip settings.

Example amplify.yml:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install # or yarn install
    build:
      commands:
        - npm run build # or yarn build
  artifacts:
    baseDirectory: /build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  customHeaders:
    - pattern: "**/*"
      headers:
        - key: "Content-Encoding"
          value: "gzip"

3. Configure Amplify hosting:

• Deploy the changes to your Amplify application.

These steps will enable gzip compression for your application. Note that Amplify automatically compresses text-based assets like HTML, CSS, and JavaScript files, so you might already be getting some compression benefits.

1. Create a customHttp.yml file:

...
      - key: "Content-Encoding"
...

This step cannot work as this header-key is one of the few read-only keys which will result in a deploy fail in Amplify. You can only add this to the the amplify.yaml which unfortunately does not work properly for now. It seems that PRE-compressed content in Amplify currently does not work.

In selfmaintained S3 buckets with Cloudfront, maintaining content-encoding at the **source **(S3) works as intended and prevents Cloudfront from compressing it again but still has it send the response-header correctly. In amplify the response-header is missing and leads to failure.