如何將 React + NodeJS Express 應用程序部署到 AWS？

Question

我有一個 React + Webpack/Babel + Node/Express 應用程序，我想將它部署在 AWS 上。

我需要分別部署 React 和 Node/Express 嗎？ 或者它們可以同時部署在一起嗎？

Answer 1

1. 如果你有兩個不同的項目

例如一個 React單頁應用程序和一個 Node/Express API。

一種。 您可以分別部署

• S3和CloudFront上的前端（React 應用程序）（ 教程）

• Elastic Beanstalk （推薦）或EC2上的后端（節點 API）

另一種選擇是在Elastic Beanstalk或EC2上同時部署這兩個部分。 但是，您將錯過在 S3 和 CloudFront 上托管的好處，即為您的用戶提供更快的交付和更便宜的成本。 在我看來，單獨更新和部署 Web 應用程序的客戶端和服務器端也更方便，更不容易出現意外錯誤。

單獨部署的另一個好處：對於前端和后端具有不同團隊的組織，每個團隊能夠更輕松地獨立部署他們自己的應用程序，而無需依賴其他團隊。

灣為什么是 S3 + CloudFront 而不是單獨的 S3？

• 使用 CDN 的所有好處
• 一鍵獲取您自己的域名和免費的 SSL 證書
• 4xx錯誤重定向（如果您的應用程序使用基於HTML5 History的路由器，則需要）
• 緩存系統
• http2和http to https重定向

C。 如何處理 CORS？

您可以使用不同的子域，例如

• 用於 Node/Express API 的api.domain.com
• React 應用程序的app.domain.com

然后在 API 中啟用 CORS ：

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2.如果你有一個項目

例如一個包含一些 React 視圖的 Node 應用程序。

您必須在Elastic Beanstalk或EC2上部署整個應用程序。

注意：如果你有一個包含兩個子項目的單個項目（即一個文件夾用於 React 應用程序，另一個用於 Node API），並且如果兩個子項目分開后仍然可以工作，那么你可以部署子項目單獨項目（請參閱答案的第一部分）。

3. 在這兩種情況下

在部署 React 部分之前運行您的Webpack 構建。 您可以手動（在 AWS 上部署之前）或自動（在您的CI / CD系統中）執行此操作。 如果您使用create-react-app (CRA) 引導您的應用程序，只需在項目的根目錄運行yarn build或npm run build並將“build”文件夾的內容上傳到您的 S3 存儲桶。

4. 工具

• 官方 AWS S3 CLI - 使用高級aws s3命令管理 S3 存儲桶和對象。
• 官方 AWS Elastic Beanstalk CLI - 使用eb命令管理和部署您的后端。
• S3-deploy - 用於將文件部署到 S3 的 CLI 實用程序。

5. 如果不限於 AWS

我回答了一個不限於 AWS的相關問題。

Answer 2

基本概念

要輕松部署您的應用程序，您需要了解三個概念：微服務、容器和流程管理器。 我將用更多細節和幾個鏈接來討論它們，以幫助您入門：

微服務

微服務是一種架構，可讓您將應用程序划分為更小的服務。 這有多種好處： 1- 服務易於測試。 2- 服務是可更換的。 3- 服務可以單獨擴展。

容器化

幾乎每個有用的應用程序都至少有幾十個依賴項。 您可以在目標機器上安裝依賴項，但您肯定會面臨一些挑戰。 Docker 等程序允許您為應用程序創建容器並將該容器部署到雲上。 （無論雲提供商如何）了解更多...

流程經理

流程管理器可確保您的應用程序運行順暢且所有部件均正常運行。 如果您的應用程序崩潰，它可以輕松地重新啟動應用程序。

1. 部署無服務器 NodeJS / React 應用程序

注意：如果您使用 ReactJS 進行服務器渲染，則此方法不起作用。 轉到下一個選項。

您可以簡單地構建您的應用程序並將其部署到靜態 S3 網站。 如果您使用微服務架構將 API 與 React 應用程序分開，則此選項有效。

在 S3 中創建靜態網站非常簡單：

1. 在 S3 中使用網站的確切名稱創建一個存儲桶。 示例：blog.stackoverflow.com。
2. 啟用靜態托管
3. 在 Route 53 中創建 A 記錄並將其連接到您創建的存儲桶。

有關更多信息，請查看 AWS 方便文檔。

2. 將 NodeJS 應用程序部署到 EC2

您可以為每個微服務啟動不同的 EC2 實例。 （API、React 應用程序等）您需要使用PM2等流程管理器來確保您的應用程序運行順暢。

持續交付（自動化部署）

為了創建自動部署，我更喜歡將Terraform與Ansible結合使用。 Terraform 非常具有聲明性。 您描述了雲基礎架構應該是什么樣子，然后 Terraform 會為您構建它。

另一方面，Ansible 非常程序化，非常適合配置新服務器。

錯誤處理和報告：哨兵

理想情況下，您應該進行單元測試以防止將錯誤代碼交付到生產環境中。 （將Jest與supertest一起使用， Enzyme用於淺層渲染）。 但是世界是不完美的，接收客戶端上發生的任何潛在錯誤是件好事。 進入哨兵

Answer 3

react 和 node 代碼都可以一次組合部署

您可以在此處獲取更多信息： 如何使用 eb cli 在彈性豆莖上部署 reactjs 和節點 typescript