NGINX proxy cache configuration

[marco910]

Hi community,

I am also trying to configure NGINX as a cache proxy for the Serverless Image Handler and alternative to CloudFront.

This already works, however the AUTO_WEBP function does not work. My browser (Google Chrome) supports WebP and this is also included in the accept request header which is logged in CloudWatch.
When I request an image file via CloudFront, I automatically get a WebP file without any additional specifications in the URL. Only via NGINX this does not work.

What could be the reason for this?

[fisenkodv]

@marco910 could you please make sure when NGINX proxies a request it passes Accept header? See how it works:
https://github.com/aws-solutions/serverless-image-handler/blob/b6a4f88567ba7a1f2c64978f9a2edd0051c4e938/source/image-handler/image-request.ts#L369

[marco910]

@fisenkodv I've set NGINX to pass all request headers to the backend by setting proxy_pass_request_headers on;.

This is the header object of an NGINX proxy request in the CloudWatch logs:

  headers: {
    accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
    'accept-encoding': 'gzip, deflate, br',
    'accept-language': 'de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7',
    'cache-control': 'no-cache',
    Host: 'api_gateway_endpoint_here',
    pragma: 'no-cache',
    'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"',
    'sec-ch-ua-mobile': '?0',
    'sec-ch-ua-platform': '"macOS"',
    'sec-fetch-dest': 'document',
    'sec-fetch-mode': 'navigate',
    'sec-fetch-site': 'none',
    'sec-fetch-user': '?1',
    'upgrade-insecure-requests': '1',
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36',
    'X-Amzn-Trace-Id': 'Root=1-626a50e6-4718885d6cfaa266182ab6fa',
    'X-Forwarded-For': 'client_ip_here, proxy_ip_heere',
    'X-Forwarded-Port': '443',
    'X-Forwarded-Proto': 'https',
    'X-Real-IP': 'client_ip_here'
  },

The accept header contains image/webp so it should work in my eyes because nothing is different from a CloudFront request, isn't it?

[fisenkodv]

Are those headers part of an event object and you see that log from this line? https://github.com/aws-solutions/serverless-image-handler/blob/b6a4f88567ba7a1f2c64978f9a2edd0051c4e938/source/image-handler/index.ts#L27
If so, could you please confirm that the log event Received event has the following structure?

{
    ...
    "headers": {
        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
        ...
    },
    "multiValueHeaders": {
        "Accept": [
            "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8"
        ],
        ...
    },
     ...
    "pathParameters": {
        "proxy": "..."
    },
    ...
    "requestContext": {
        ...
        "httpMethod": "GET",
        ...
        "identity": {
           ...
        },
        ...
    },
    ...
}

Also, what I've noticed that the Accept here https://github.com/aws-solutions/serverless-image-handler/blob/b6a4f88567ba7a1f2c64978f9a2edd0051c4e938/source/image-handler/image-request.ts#L369 suppose to be in the upper case, i.e. Accept instead of accept.

[marco910]

@fisenkodv Those headers are part of the event object, that is logged to CloudWatch, but that does not contain Received event. But that's not the case with CloudFront either.

But thanks to your question about the Accept I found the issue which is caused by NGINX. In the event object with the headers from CloudFront, the accept header is called Accept and in my NGINX request nginx. As a result, the Image Handler was unable to find the header in the object. Now I added this to my NGINX config and got it working:

proxy_set_header Accept $http_accept;

The code is passing the HTTP accept header as a new header called Accept to the API request. Now, all response images have a content-type of image/webp.

Thanks for your help!