amazon-web-services - 如何使用 CloudFront 作为我的 App Runner 服务的反向代理？

Question

我有一个运行 NodeJS/Express 服务器的 App Runner 服务，它是一个 REST API。 App Runner 给了我以下终点 - https://example_server_random_id.awsapprunner.com

前端使用 React 开发，并作为静态网站部署在 S3 中。我已经创建了一个 CloudFront 分配来提供来自 S3 的静态内容并具有默认行为 (*)。 CloudFront 给了我以下 URL - https://cloud_front_ranom_id.cloudfront.net

因此，我更新了后端代码以支持 CORS，并将 CloudFront URL 添加为允许的来源。在 React 应用程序中，我使用 App Runner URL 作为我所有 API 调用的基本 URL。此设置完美运行。

现在，我想通过使用 CloudFront 分发作为我的 App Runner 服务的反向代理来摆脱与 CORS 相关的设置。为此，我完成了以下操作 -

1. 我添加了一个指向我的 App Runner 服务端点的自定义来源 - https://example_server_random_id.awsapprunner.com

2. 我创建了一个优先级为 0 的新行为 (/api*)，因此它应该处理其路径中包含“/api”的所有请求，而不是默认行为 (*)。此行为使用我在上一步中创建的自定义原点。

3. 我已允许此新行为的所有 HTTP 请求(GET、POST、OPTION、PUT 等)。

4. 对于新行为，我使用“CachingDisabled”作为缓存策略，使用“All Viewer”作为源请求策略。

5. 我已经替换了基本 URL 并使用/api 作为新的基本 URL 而不是 App Runner 端点。

6. 我没有从后端代码中删除 CORS 相关设置(access-control-allow-origin header 值为 CloudFront 端点，access-control-allow-credential header 值为 true)。

此设置未按预期工作。我仍然可以访问静态内容，但是对于对后端的所有请求(使用/api 基本 URL)给我以下错误 -

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

能否请您告诉我是否有任何调试方法以及设置中可能存在的问题？

Answer 1

我正在写下我是如何解决这个问题的，以防有人遇到同样的问题。

以下文章帮助我查明了问题 - https://advancedweb.hu/how-to-debug-cloudfront-origin-requests/

基本上，问题出在我使用的缓存策略上。我使用以下 webhook 测试器找出 header 值、查询参数和 cookie，并修改了缓存策略以使用旧缓存设置(适当的 header 、cookie 和查询参数)- https://webhook.site/