Javascript React 單頁應用程序 + Amazon S3：永久鏈接問題

Question

我使用 S3 存儲桶作為靜態 Web 解決方案來托管單頁 React 應用程序。 當我點擊根域s3-bucket.amazon.com時，react 應用程序工作正常，每次點擊鏈接時 HTML5 歷史 API 工作正常，新 url 看起來很好：_http://s3-bucket.amazon.com/ entity/entity_id_ 當我使用永久鏈接訪問應用程序時會出現問題。 假設我在瀏覽器中輸入相同的 url (_http://s3-bucket.amazon.com/entities/entity_id_) 我將從 Amazon S3 收到以下錯誤：

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: users
RequestId: 3A4B65F49D07B42C
HostId: j2KCK4tvw9DVQzOHaViZPwT7+piVFfVT3lRs2pr2knhdKag7mROEfqPRLUHGeD/TZoFJBI4/maA=

是否可以使 Amazon S3 與永久鏈接和 HTML5 歷史記錄 api 很好地工作？ 也許它可以充當代理？

謝謝

Answer 1

使用 AWS CloudFront 的解決方案：

步驟 1：轉到 CloudFront

單擊分發 ID

轉到錯誤頁面選項卡

單擊創建自定義錯誤響應

第 2 步：將表格填寫為

HTTP 錯誤代碼：404

TTL：0

自定義錯誤響應：是

響應頁面路徑：/index.html

HTTP 響應代碼：200

來源： https : //medium.com/@nikhilkapoor17/deployment-of-spa-without-location-strategy-61a190a11dfc

Answer 2

遺憾的是，S3 不支持單頁應用程序所需的通配符路由（基本上，您希望 url 中主機之后的所有內容都提供 index.html，但保留路由。

所以www.blah.com/hello/world實際上會為www.blah.com/index.html提供服務，但將路由傳遞給單頁應用程序。

好消息是您可以在 S3 前使用諸如 Fastly (Varnish) 之類的 CDN 來做到這一點。 設置規則，例如：

if(req.url.ext == "" ) {
    set req.url = "/index.html"; 
}

這會將所有非資產請求（任何沒有文件擴展名的請求）重定向到域上的 index.html。

Answer 3

我沒有在 Amazon S3 上運行 SPA 的經驗，但這似乎是 url 重寫的問題。 在運行您的應用程序/站點時，歷史 (html5) api 重寫您的 url 是一回事。 但是，當刷新或冷瀏覽您的站點時，允許訪問重寫的 url 肯定需要在服務器級別進行 url 重寫。 我在考慮 web.confg (IIS)、.htaccess (Apache) 或 nginx 站點配置。

似乎前段時間已經問過同樣的問題： https : //serverfault.com/questions/650704/url-rewriting-in-amazon-s3

Answer 4

為“靜態網站托管”屬性上的索引和錯誤文件指定相同的名稱。 請參閱鏈接圖像1 。

Answer 5

老問題，但最簡單的方法是使用散列路由。 所以不是 mydomain.com/somepage/subpage 而是 mydomain.com/#/somepage/subpage