一个 CloudFront，一个 S3 存储桶，使用 Lambda@Edge 为许多反应应用程序提供服务

Question

我工作的公司希望使用单个 S3 存储桶和 Cloudfront 分发服务多个 React 网站，因为 AWS 允许的存储桶数量是有限的。 我们想要的基本文件结构在bucket的根目录下有三个文件夹（即dev、prod和sandbox），每个文件夹都有对应的react项目。

从 Cloudfront 分发中，我发送主机 header 以了解应该为哪个环境和存储桶提供服务。 我在 Lambda@Edge function 中发现了这一点，然后路由到相应的存储桶，该存储桶一直有效。 Lambda@Edge function 正确获取 index.html 文件，但无法提供文件夹中的所有其他文件。 这会导致在控制台中出现空白屏幕并出现几个错误： The stylesheet was not loaded because its MIME type, "text/html" is not "text/css并且Loaded file has not a valid JavaScript MIME type ”。

我使用的 Lambda@Edge function 如下：

'use strict';

exports.handler = (event, context, callback) => {
    
    // Extract the request from the CloudFront event that is sent to Lambda@Edge 
    var cf = event.Records[0].cf;
    var request = event.Records[0].cf.request;
    const origin = request.origin;
    const domain = request.headers.host[0].value;

    if (domain.includes("dev")) {
        request.uri = "/dev-test/index.html"
    } else if (domain.includes("sandbox") {
        request.uri = "/sandbox-test/index.html";
    } else {
        request.uri = "/prod-test/index.html";
    }
    request.headers.host[0].value = origin.s3.domainName

    // Return to CloudFront
    return callback(null, request);
}

即function从Host header中提取域，设置相应的URI，将Host header改为S3域名，避免权限出错。 我也尝试过更改 S3 路径和 URI，只更改路径而不是 URI，但似乎没有任何效果。 我不知道我是否应该在请求中设置/更改其他内容，或者我应该更改我的 S3 存储桶和/或 Cloudfront 分发中的设置/权限。

顺便说一句，我正在使用一个基本的 React JS 应用程序对此进行测试，我只运行npx create-react-app my-app然后构建它并将构建文件夹中的所有内容上传到 S3 存储桶文件夹。

非常感谢您在此问题上提供的任何帮助。

Answer 1

您的所有请求是否都以 200 OK 状态和正确的内容返回——您只是看到一个带有该控制台错误的空白屏幕？ 如果是这种情况，那么问题是您需要在 CSS 文件上设置 mime 类型，以便浏览器显示它。 如果没有 text/css Content-Type header，某些浏览器（如 Chrome）将无法提供 CSS 文件。

您可以通过三种方式进行设置：

1. 将其作为元数据添加到 S3 存储桶中的每个 CSS 文件中
2. 使用 Lambda@Edge 源响应 function 根据文件扩展名动态设置 Content-Type header。
3. 使用*.css的路径模式创建一个新的缓存行为，并附加一个响应 Header 策略，将 text/css 的内容类型设置为自定义 header @Edge，因为它是本机功能）

如果您将其添加为上传工作流程的一部分，选项 1 是最简单的。 否则会推荐选项3。