在AWS S3上使用身份驗證重定向託管Angular SPA

Question

我們的SPA使用Angular（Angular2，Angular4，而不是AngularJS）編寫，並使用OAuth2對Azure AD進行身份驗證。我們正在使用OIDC library來處理認證。

該應用程序駐留在配置爲服務靜態網站的AWS S3存儲桶中。爲了論證的緣故，讓我們假裝URL是myapp.example.com。

當用戶點擊登錄按鈕時，它們被重定向到一個微軟頁面來處理認證。到現在爲止還挺好。一旦他們通過身份驗證，他們將被重定向回myapp.example.com/login。

但是我的S3存儲桶中沒有名爲login的工件。 login路由由Angular路由器處理，並在我的應用程序中調用一個組件。當我在本地機器上運行時，這一切都可以正常工作。但是，當我運行S3中託管的版本時，重定向回myapp.example.com/login失敗，並出現404錯誤。

我知道錯誤的原因 - 我的S3存儲桶中沒有名爲login的工件。但我想這將是我的應用程序中的任何鏈接的問題。例如，如果我與另一位用戶分享了myapp.example.com/objects/1234的鏈接，我想這對他們也是404。

所以問題是，我需要做些什麼才能在AWS中正確託管此SPA，以便重定向和其他鏈接正常工作？

Answer 1

在S3前面配置AWS CloudFront，併爲CloudFront（使用CNAME）執行域映射。然後使用AWS Edge Lambda，您可以重寫/ login的URL以指向index.html。

這將加載index.html也爲/ login路徑，並在重定向發生後在客戶端觸發Angular中的路由。