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