如何在 AWS S3 存儲桶中使用 Angular 應用程序對 AWS Elastic Beanstalk 中的服務進行 API 調用

Question

我將一個網站轉移到 AWS，該網站在一台服務器上有 Angular，在另一台服務器上有 Nodejs/Express，並在 RDB 中使用了 PostgreSQL 數據庫。 這很好用，目前正在運行，但在可擴展性和可用性方面不是很好。

因此，我已將 Angular 從通過 CloudFront 訪問的 S3 存儲桶中提供服務，並使用 WebHook 更新到我的 GitHub 存儲庫中。 這一切似乎都很好。

我有使用 Elastic Beanstalk 的 Nodejs/Express，並再次使用 WebHook 從 GitHub 存儲庫更新。 在部署時仍有一些項目需要解決，但我認為它們會很小（這意味着它們稍后會咬我）。

我似乎無法弄清楚是一種允許 Angular 對 Elastic Beanstalk 中的負載均衡器進行 API 調用的方法。

• 我仍然使用 proxy.config.json 嗎？ 如果是這樣，我指的是什么？ 我嘗試在 Route 53 中為 api.myapp.com 創建一個 CNAME 記錄，指向負載均衡器 DNS 的值。 那似乎不起作用。

• 我是否使用 AWS API 網關。 我在這里嘗試了一些不同的東西，但似乎無法讓它發揮作用。 唯一似乎有可能的事情需要我定義每個 API，如果可能的話，這將是我最后的手段。

• 這是不能做的事嗎？

我已經閱讀了很多有些類似問題的文章，但似乎沒有一篇文章足夠貼切地給我一個答案。 也許我只是看錯了。 任何幫助將非常感激。

---

已編輯

在過去幾天追逐許多松鼠之后，我想我已經將范圍縮小到 CloudFront 的配置問題。

• 我在 Route 53 中有一條路由指向我的 CloudFront 為“dev.mydomain.com”，並且效果很好。
• 我在 Route 53 中有一條路由指向我的 Elastic Beanstalk 負載均衡器，名稱為“api.mydomain.com”。
• 我可以通過將 url 輸入到瀏覽器（例如“ https://api.mydomain.com/api/getInfo ”）來進行調用，它會隨 cors 標頭一起返回信息。 當我讓應用程序進行與 CloudFront 從 S3 存儲桶提供服務的相同調用時，我得到“訪問 XMLHttpRequest at ' https://api.mydomain.com/api/getInfo ' from origin ' https://dev。 mydomain.com ' 已被 CORS 策略阻止：請求的資源上不存在 'Access-Control-Allow-Origin' 標頭。” 果然，響應頭中沒有 cors 頭。

我發現了幾篇文章似乎解決了這個問題，但它們沒有奏效（或者我錯誤地實現了它們）。 我試圖創造一個起源，我試圖創造一種行為。 到目前為止，一切都沒有奏效。

我任何人都處理過這個問題，或者知道一篇可以幫助我的文章，我將不勝感激。

Answer 1

您可以從 Route53 為負載均衡器 url 創建自定義域名。 您需要創建一個A記錄，將Alias屬性設置為yes指向負載均衡器的 dns URL。

Amazon Route 53 還提供別名記錄，它們是 Amazon Route 53 特定的 DNS 擴展。 您可以創建別名記錄以將流量路由到選定的 AWS 資源，包括 Amazon Elastic Load Balancing 負載均衡器、Amazon CloudFront 分配、AWS Elastic Beanstalk 環境、API 網關、VPC 接口終端節點和配置為網站的 Amazon S3 存儲桶

希望這可以幫助。

參考：

問題“Amazon Route 53 支持哪些 DNS 記錄類型？” 在https://aws.amazon.com/route53/faqs/

Answer 2

解決了

這個問題的答案讓我接近了我想去的地方，但它仍然沒有回應我的所有電話。 最后發現是數據庫調用沒有響應。 我沒有使用彈性 beanstalk 設置數據庫，因為我正在為生產設置進行概念驗證，因此數據庫需要分開。 終於想通了，我沒有在數據庫的安全組中添加規則來允許彈性beanstalk調用。 添加該規則並在 CloudFront 中添加行為和源規則后，它似乎很有魅力。