在一个 CloudFront 分配上托管来自两个存储桶的两个 React 应用程序。如何处理两个静态目录？

Question

我有两个 React 应用程序，我想通过一个 CloudFront 分配来提供服务。它们都依赖 react-router 进行导航。

我有两个 S3 存储桶配置为源。默认 (*) 行为设置为托管登录页面的我的一个存储桶。我希望某些其他 URL（如 /dashboard、/task）使用我的其他存储桶。

这可以很好地设置模式匹配这些特定路径的行为，但我被困在一件事上。构建 React 应用程序会将应用程序需要运行的脚本默认到“静态”目录。我必须为其中一个或另一个设置一个行为 static*，并且只有行为指向的那个才有效。

我能做些什么来解决这个问题吗？通过搜索，我没有找到任何方法告诉 npm run-script build 构建一个使用不同命名静态目录的应用程序。

谢谢。

Answer 1

我采取了以下步骤来解决这个问题：

在 package.json 中添加选项 "homepage": "landing"

使用 npm run-script build 重建 react 应用

将文件上传到存储桶，但将 assets 和 static 放入 landing 目录。

在 CloudFront 上添加一个新行为，将landing/* 重定向到登陆存储桶。

现在似乎可以正常工作了。