amazon-web-servicesamazon-cloudfrontamazon-app-runner

How to use CloudFront as reverse proxy to my App Runner service?

I have an App Runner service running a NodeJS/Express server which is a REST API. App Runner has given me the following end point - https://example_server_random_id.awsapprunner.com

The frontend is developed using React and deployed in S3 as a static website. I have created a CloudFront distribution for serving the static content from S3 and have a default behavior (*). CloudFront has given me the following URL - https://cloud_front_ranom_id.cloudfront.net

So I have updated the backend code to support CORS and added the CloudFront URL as allowed origin. From the React app, I am using the App Runner URL as my base URL for all the API calls. This setup works perfectly.

Now, I wanted to get rid of CORS related setup by using the CloudFront distribution as a reverser proxy to my App Runner service. To do that, I have done following -

  1. I have added a custom origin that points to my App Runner service endpoint - https://example_server_random_id.awsapprunner.com

  2. I have created a new behavior (/api*) that has precedence 0, so it should be handling all the requests that have "/api" in its path instead of the default behavior (*). This behavior uses the custom origin that I have created in the previous step.

  3. I have allowed all the HTTP request (GET, POST, OPTION, PUT etc.) for this new behavior.

  4. For the new behavior, I have used "CachingDisabled" as the Cache Policy and "All Viewer" as the Origin Request Policy.

  5. I have replaced the base URL and use /api as the new base URL instead of the App Runner endpoint.

  6. I did not remove the CORS related settings from the backend code (access-control-allow-origin header value is the CloudFront endpoint and access-control-allow-credential header value is true).

This setup is not working as expected. I can still access the static contents but for all the requests to the backend (with /api base URL) give me the following errors -

Cannot POST /api/users/sign-in Status Code: 404
Cannot GET /api/users Status Code: 404
etc.

Can you please let me know if there is any way to debug this and what could be the problem in the setup?

Solution

  • I am writing down how I fixed this in case someone faced the same issue.

    The following article helped me to pinpoint the issue - https://advancedweb.hu/how-to-debug-cloudfront-origin-requests/

    Basically, the problem was the cache policy I was using. I used the following webhook tester to find out the header values, query parameter and cookies and modified the cache policy to use the legacy cache settings (Appropriate header, cookies and query parameters)- https://webhook.site/