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

Question

I use S3 static website hosting for React apps in my dev and prod environments and it works great.我在我的开发和生产环境中为 React 应用程序使用 S3 静态网站托管，并且效果很好。 I use a bucket naming scheme like dev-myapp-mycompany and prod-myapp-mycompany and have a dedicated bucket for each environment.我使用诸如dev-myapp-mycompany和prod-myapp-mycompany类的存储桶命名方案，并且为每个环境都有一个专用存储桶。

My team constantly creates feature branches that need testing and while I could create a new bucket for each new branch, we would have to ask for a bucket increase within a few sprints and then prune them frequently.我的团队不断创建需要测试的功能分支，虽然我可以为每个新分支创建一个新的存储桶，但我们必须在几个 sprint 内请求增加存储桶，然后经常修剪它们。

What I'd like to do is have a single bucket feature-myapp-mycompany with a simple index.html at the root which would provide a link to each app currently deployed into this feature bucket.我想要做的是有一个单一的存储桶feature-myapp-mycompany ，在根目录下有一个简单的index.html ，它将提供一个指向当前部署到这个功能存储桶中的每个应用程序的链接。 Something like就像是

<!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>

For this the bucket structure would look like为此，桶结构看起来像

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

I deploy all of the apps through the AWS cli, so it isn't a challenge to script it.我通过 AWS cli 部署了所有应用程序，因此编写脚本并不困难。 I use something like我使用类似的东西

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

Getting the code out to the buckets is no problem.将代码放入桶中是没有问题的。 Here is where I get stuck:这是我卡住的地方：

My Problem: I have the code deployed as described above but the create-react-app project defines its static dependencies from the root of the domain.我的问题：我已经按照上述方式部署了代码，但是 create-react-app 项目从域的根目录定义了它的静态依赖项。 So the index.html for feature1 has hrefs like /static/css/main.9fac6334.chunk.css .所以 feature1 的 index.html 有像/static/css/main.9fac6334.chunk.css这样的 hrefs。 This request goes and looks at the root of my bucket where there is only the primary index.html and a "directory" for each feature.此请求会查看我的存储桶的根目录，其中每个功能只有主index.html和一个“目录”。 My links on the main index.html do indeed take me to the right app index.html but none of the script or css references are valid since they are based on the root.我在主index.html上的链接确实将我带到了正确的应用程序index.html但没有任何脚本或 css 引用是有效的，因为它们基于根。

Attempted Solution: create-react-app allows you to specify a homepage option in the package.json that is uses to set the baseURL in your app.尝试的解决方案： create-react-app 允许您在package.json中指定homepage选项，用于在您的应用程序中设置 baseURL。 What I seem to need is relative paths, not absolute ones, so I tried to set the value of homepage to "./" and then http://feature-myapp-mycompany.s3-website-us-east-1.amazonaws.com/feature1 .我似乎需要的是相对路径，而不是绝对路径，所以我尝试将主页的值设置为"./" ，然后http://feature-myapp-mycompany.s3-website-us-east-1.amazonaws.com/feature1 。 In both cases, the links take me to the right place for a moment and then redirect me back to the main index.html file at the root.在这两种情况下，链接都会将我带到正确的位置，然后将我重定向回根目录下的主index.html文件。 I know it's kind of working because I see the styling and theme of my site for a split-second before it redirects me.我知道它是有效的，因为在重定向我之前，我会在一瞬间看到我网站的样式和主题。 I even see the right requests happening in the network tab of Chrome, but after all the requests are attempted, I see it redirect back to the primary index document at the root.我什至在 Chrome 的网络选项卡中看到了正确的请求，但是在尝试了所有请求之后，我看到它重定向回根目录下的主索引文档。

Attempted Solution Continued: S3 static hosting allows redirection rules.尝试的解决方案（续）： S3 静态托管允许重定向规则。 I attempted a variety of redirect options that ended up putting me in an infinite loop for the same resource which caused the request to fail.我尝试了各种重定向选项，最终使我陷入对导致请求失败的同一资源的无限循环中。 My configuration was something like我的配置是这样的

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

Of course, this didn't work because it was rewriting the prefix back to the same value.当然，这不起作用，因为它正在将前缀重写回相同的值。 Doing the same kind of redirect rules without my Attempted Solution also did not work since the request was not going to a resource with prefix feature1/ , it was going to the root.在没有我的尝试解决方案的情况下执行相同类型的重定向规则也不起作用，因为请求不会发送到带有前缀feature1/的资源，而是发送到根。

My ideal solution: I'd like to have some combination of the homepage option in the package.json and some redirect rules in place to redirect requests for static resources within each app back to the root of their respective feature branch directories.我的理想解决方案：我希望将package.json中的homepage选项和一些重定向规则结合起来，以将每个应用程序内的静态资源请求重定向回其各自功能分支目录的根目录。 For example a request for the /static/css/main.9fac6334.chunk.css should look inside the feature1 directory, not the root.例如，对/static/css/main.9fac6334.chunk.css的请求应该查看feature1目录，而不是根目录。

I'm not afraid of scripting this for the many branches we will have but I can't seem to get the options right for an individual example sub-app.我不害怕为我们将拥有的许多分支编写脚本，但我似乎无法为单个示例子应用程序提供正确的选项。

Thank you in advance for helping out and best of luck in your own coding adventures.提前感谢您的帮助，并祝您在自己的编码冒险中好运。

Answer 1

I was able to use this SO post to accomplish what I needed to do.我能够使用这个 SO 帖子来完成我需要做的事情。 We already were using a cloudfront distribution for our other environments and this was very easy to set up.我们已经在其他环境中使用了 Cloudfront 发行版，这很容易设置。

Here's a summary of what we learned here:这是我们在这里学到的东西的总结：

It is definitely possible to host multiple react apps in the same bucket绝对可以在同一个存储桶中托管多个 React 应用程序
You can put each app into a directory/prefix of your choosing您可以将每个应用程序放入您选择的目录/前缀中
Create a cloudfront distribution for each app pointing to your bucket with settings like the following使用如下设置为指向您的存储桶的每个应用程序创建一个 Cloudfront 分配
a.一种。 Put feature1 in bucket directory/prefix feature1/将 feature1 放在存储桶目录/前缀feature1/
b.湾Create a distribution with Origin Path /feature1 and Default root object index.html使用 Origin Path /feature1和默认根对象index.html创建分发
c. C。 Ride away clean骑得干净

使用一个 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