reactjs - 使用一个 S3 存储桶托管多个 React 应用程序
问题描述
我在我的开发和生产环境中为 React 应用程序使用 S3 静态网站托管,它运行良好。我使用存储桶命名方案,例如dev-myapp-mycompany
andprod-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
. 此请求会查看我的存储桶的根目录,其中index.html
每个功能只有主目录和“目录”。我的主链接index.html
确实将我带到了正确的应用程序index.html
,但没有一个脚本或 css 引用是有效的,因为它们是基于根的。
尝试的解决方案:
create-react-app 允许您在用于设置应用程序中的 baseURL的homepage
选项中指定一个选项。package.json
我似乎需要的是相对路径,而不是绝对路径,所以我尝试将 homepage 的值设置为"./"
then 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/
,而是发送到根目录。
我的理想解决方案:
我希望将homepage
选项中的选项package.json
和一些重定向规则结合起来,以将每个应用程序中对静态资源的请求重定向回其各自功能分支目录的根目录。例如,对 的请求/static/css/main.9fac6334.chunk.css
应该查看feature1
目录内部,而不是根目录。
我不害怕为我们将拥有的许多分支编写脚本,但我似乎无法为单个示例子应用程序选择正确的选项。
预先感谢您在自己的编码冒险中提供帮助并祝您好运。
解决方案
我能够使用这个 SO 帖子来完成我需要做的事情。我们已经在我们的其他环境中使用了云端发行版,这很容易设置。
以下是我们在这里学到的内容的摘要:
- 绝对可以在同一个存储桶中托管多个 React 应用程序
- 您可以将每个应用程序放入您选择的目录/前缀中
使用如下设置为指向您的存储桶的每个应用程序创建一个云端分发
一种。将 feature1 放在存储桶目录/前缀中
feature1/
湾。
/feature1
使用原始路径和默认根对象创建分布index.html
C。干净地骑车
推荐阅读
- android - 如何允许“不受信任”的 android 应用程序建立连接?
- mysql - 如何使用 node.js 和 mysql 将数据存储在数组中
- javascript - 使用 R 抓取 JavaScript 繁重的网页
- security - 如果使用 HTTPOnly cookie,是否需要 CSRF 中间件?它应该是基于会话的吗?
- python - Locust/Python:使用 SequentialTaskSet 中的 if 条件拆分任务数组
- image-size - 如何在大卡特尔 Luna 主题中将产品图像大小从正方形更改为矩形
- javascript - 如何使用 require 而不是 import,同时仍然能够访问变量的属性?
- python - python中的平均距离函数
- react-native - 奖励广告结束时是否可以显示警报或查看?(上面的奖励广告)
- python - 如何转向改进我的硬编码函数,以便它可以轻松更改