使用一个 S3 存储桶托管多个 React 应用程序

Question

我在我的开发和生产环境中为 React 应用程序使用 S3 静态网站托管，并且效果很好。 我使用诸如dev-myapp-mycompany和prod-myapp-mycompany类的存储桶命名方案，并且为每个环境都有一个专用存储桶。

我的团队不断创建需要测试的功能分支，虽然我可以为每个新分支创建一个新的存储桶，但我们必须在几个 sprint 内请求增加存储桶，然后经常修剪它们。

我想要做的是有一个单一的存储桶feature-myapp-mycompany ，在根目录下有一个简单的index.html ，它将提供一个指向当前部署到这个功能存储桶中的每个应用程序的链接。 就像是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Feature Bucket</title>
</head>
<body>
    <h1>Feature Branches</h1>
    <ul>
        <li>
            <a href="./feature1/index.html">Feature 1</a>
        </li>
        <li>
            <a href="./feature2/index.html">Feature 2</a>
        </li>
        ...
        <li>
            <a href="./featuren/index.html">Feature n</a>
        </li>
    </ul>
</body>
</html>

为此，桶结构看起来像

index.html
    /feature1
        index.html
        /static
    /feature2
        index.html
        /static
    /featuren
        index.html
        /static

我通过 AWS cli 部署了所有应用程序，因此编写脚本并不困难。 我使用类似的东西

npm run build
aws s3 sync ./build s3://%bucket%/%feature% --delete --profile=%profile% --region=us-east-1

将代码放入桶中是没有问题的。 这是我卡住的地方：

我的问题：我已经按照上述方式部署了代码，但是 create-react-app 项目从域的根目录定义了它的静态依赖项。 所以 feature1 的 index.html 有像/static/css/main.9fac6334.chunk.css这样的 hrefs。 此请求会查看我的存储桶的根目录，其中每个功能只有主index.html和一个“目录”。 我在主index.html上的链接确实将我带到了正确的应用程序index.html但没有任何脚本或 css 引用是有效的，因为它们基于根。

尝试的解决方案： create-react-app 允许您在package.json中指定homepage选项，用于在您的应用程序中设置 baseURL。 我似乎需要的是相对路径，而不是绝对路径，所以我尝试将主页的值设置为"./" ，然后http://feature-myapp-mycompany.s3-website-us-east-1.amazonaws.com/feature1 。 在这两种情况下，链接都会将我带到正确的位置，然后将我重定向回根目录下的主index.html文件。 我知道它是有效的，因为在重定向我之前，我会在一瞬间看到我网站的样式和主题。 我什至在 Chrome 的网络选项卡中看到了正确的请求，但是在尝试了所有请求之后，我看到它重定向回根目录下的主索引文档。

尝试的解决方案（续）： S3 静态托管允许重定向规则。 我尝试了各种重定向选项，最终使我陷入对导致请求失败的同一资源的无限循环中。 我的配置是这样的

 <RoutingRules>
    <RoutingRule>
    <Condition>
      <KeyPrefixEquals>feature1/</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyPrefixWith>feature1/</ReplaceKeyPrefixWith>
    </Redirect>
    </RoutingRule>
  </RoutingRules>

当然，这不起作用，因为它正在将前缀重写回相同的值。 在没有我的尝试解决方案的情况下执行相同类型的重定向规则也不起作用，因为请求不会发送到带有前缀feature1/的资源，而是发送到根。

我的理想解决方案：我希望将package.json中的homepage选项和一些重定向规则结合起来，以将每个应用程序内的静态资源请求重定向回其各自功能分支目录的根目录。 例如，对/static/css/main.9fac6334.chunk.css的请求应该查看feature1目录，而不是根目录。

我不害怕为我们将拥有的许多分支编写脚本，但我似乎无法为单个示例子应用程序提供正确的选项。

提前感谢您的帮助，并祝您在自己的编码冒险中好运。

Answer 1

我能够使用这个 SO 帖子来完成我需要做的事情。 我们已经在其他环境中使用了 Cloudfront 发行版，这很容易设置。

这是我们在这里学到的东西的总结：

绝对可以在同一个存储桶中托管多个 React 应用程序
您可以将每个应用程序放入您选择的目录/前缀中
使用如下设置为指向您的存储桶的每个应用程序创建一个 Cloudfront 分配
一种。 将 feature1 放在存储桶目录/前缀feature1/
湾使用 Origin Path /feature1和默认根对象index.html创建分发
C。 骑得干净

使用一个 S3 存储桶托管多个 React 应用程序

问题描述

1 个解决方案

解决方案1
4 已采纳 2019-05-03 02:26:01

使用一个 S3 存储桶托管多个 React 应用程序

问题描述

1 个解决方案

解决方案1 4 已采纳 2019-05-03 02:26:01

解决方案1
4 已采纳 2019-05-03 02:26:01