將 React 型單頁應用程式部署至 Amazon S3 和 CloudFront - AWS 方案指引
Summary先決條件和限制架構工具最佳實務Epics相關資源其他資訊

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

將 React 型單頁應用程式部署至 Amazon S3 和 CloudFront

由 Jean-Baptiste Guillois (AWS) 建立

程式碼儲存庫：React 型 CORS 單頁應用程式

環境：生產

技術：Web 和行動應用程式；無伺服器

工作負載：所有其他工作負載

AWS 服務：Amazon API Gateway；Amazon CloudFront

Summary

單頁應用程式 (SPA) 是使用 JavaScript APIsWord 動態更新所顯示網頁內容的網站或 Web 應用程式。此方法可增強網站的使用者體驗和效能，因為它只會更新新資料，而不是從伺服器重新載入整個網頁。

此模式提供 a step-by-step 方法來編碼和託管SPA在 Amazon Simple Storage Service (Amazon S3) 和 Amazon CloudFront 上的 React 中寫入的 Word。此模式中的 SPA 使用在 Amazon REST API Gateway 中設定的 API 並透過 Amazon CloudFront 分佈公開，以簡化跨來源資源共用 (CORS) 管理。

先決條件和限制

先決條件

  • 作用中 AWS 帳戶。

  • Node.js 和 npm，已安裝並設定。如需詳細資訊，請參閱 Node.js 文件的下載一節。

  • Yarn、已安裝和設定。如需詳細資訊，請參閱 Yarn 文件。

  • Git、已安裝和設定。如需詳細資訊，請參閱 Git 文件。

架構

將 React 型 SPA 部署至 Amazon S3 和 CloudFront 的架構

此架構會使用 AWS CloudFormation (infrastructure as code) 自動部署。它使用 Amazon S3 等區域服務來存放靜態資產，並使用 Amazon CloudFront Gateway 存放 AmazonAPI，以公開區域 API (REST) 端點。應用程式日誌是透過使用 Amazon CloudWatch 收集。系統會稽核 All AWS API 呼叫 AWS CloudTrail。所有安全組態 （例如身分和許可） 都會在 AWS Identity and Access Management (IAM) 中管理。靜態內容是透過 Amazon CloudFront 內容交付網路 (CDN) 交付，而 DNS 查詢則由 Amazon Route 53 處理。

工具

AWS 服務

  • Amazon API Gateway 可協助您建立、發佈、維護、監控和保護任何規模的 REST、HTTP 和 WebSocket APIsWord。

  • AWS CloudFormation 可協助您設定 AWS 資源、快速且一致地佈建資源，以及在整個 AWS 帳戶 和 區域的生命週期中管理這些資源。

  • Amazon CloudFront 透過全球資料中心網路提供 Web 內容，進而降低延遲並改善效能，進而加快 Web 內容的分發速度。

  • AWS CloudTrail 可協助您稽核 的治理、合規和營運風險 AWS 帳戶。

  • Amazon CloudWatch 可協助您 AWS 即時監控 AWS 資源的指標，以及您在 上執行的應用程式。

  • AWS Identity and Access Management (IAM) 透過控制誰經過身分驗證並獲授權使用資源，協助您安全地管理對 AWS 資源的存取。

  • Amazon Route 53 是高可用性且可擴展的 DNS Web 服務。

  • Amazon Simple Storage Service (Amazon S3) 是一種雲端型物件儲存服務，可協助您儲存、保護和擷取任何數量的資料。

Code

此模式的範例應用程式程式碼可在 GitHub React 型 CORS 單頁應用程式儲存庫中使用。

最佳實務

透過使用 Amazon S3 物件儲存，您可以安全、高彈性、高效能且符合成本效益的方式存放應用程式的靜態資產。此任務不需要使用專用容器或 Amazon Elastic Compute Cloud (Amazon EC2) 執行個體。

透過使用 Amazon CloudFront 內容交付網路，您可以減少使用者存取應用程式時可能發生的延遲。您也可以連接 Web 應用程式防火牆 (AWS WAF)，以保護資產免受惡意攻擊。

Epics

任務描述所需的技能

複製儲存庫。

執行下列命令以複製範例應用程式的儲存庫：

git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
應用程式開發人員、AWS DevOpsWord

本機部署應用程式。

  1. 在專案目錄中，執行 npm install命令以啟動應用程式相依性。 

  2. 執行 yarn dev命令，在本機啟動應用程式。 

應用程式開發人員、AWS DevOpsWord

本機存取應用程式。

開啟瀏覽器視窗並輸入 URL http://localhost:3000 以存取應用程式。

應用程式開發人員、AWS DevOpsWord
任務描述所需的技能

部署 AWS CloudFormation 範本。

  1. 登入 AWS Management Console，然後開啟AWS CloudFormation 主控台。

  2. 選擇建立堆疊，然後選擇使用新資源 （標準）。

  3. 選擇 Upload a template file (上傳範本檔案)。

  4. 選擇選擇檔案，從複製的儲存庫中選擇react-cors-spa-stack.yaml檔案，然後選擇下一步。

  5. 輸入堆疊的名稱，然後選擇下一步。

  6. 保留所有預設選項，然後選擇下一步。

  7. 檢閱堆疊的最終設定，然後選擇建立堆疊。

應用程式開發人員、AWS DevOpsWord

自訂您的應用程式來源檔案。

  1. 部署堆疊後，開啟輸出索引標籤並識別Bucket名稱和APIDomain值。

  2. 複製 CloudFront 的 REST 分佈網域API。

  3. 導覽至 <project_root>/src/pages/index.tsx，然後將此網域插入或貼到index.tsx檔案第 13 行的APIEndPoint變數值。

應用程式開發人員

建置應用程式套件。

在專案目錄中，執行 yarn build命令以建置應用程式套件。

應用程式開發人員

部署應用程式套件。

  1. 開啟 Amazon S3 主控台。

  2. 識別並選擇先前由 CloudFormation 堆疊建立的 S3 儲存貯體。

  3. 選擇上傳，然後選擇新增檔案。

  4. 選擇out資料夾的內容。

  5. 選擇新增資料夾，然後選擇_next目錄。

    重要：選擇_next目錄，而非內容。

  6. 選擇上傳，將檔案和目錄上傳至 S3 儲存貯體。

應用程式開發人員、AWS DevOpsWord
任務描述所需的技能

存取和測試應用程式。

開啟瀏覽器視窗，然後貼上 CloudFront 分佈網域 （您先前部署的 CloudFormation 堆疊SPADomain輸出） 以存取應用程式。

應用程式開發人員、AWS DevOpsWord
任務描述所需的技能

刪除 S3 儲存貯體內容。

  1. 開啟 Amazon S3 主控台，然後選擇堆疊先前建立的儲存貯體 （名稱開頭為 的第一個儲存貯體react-cors-spa-)。 

  2. 選擇空白以刪除儲存貯體的內容。

  3. 選擇堆疊先前建立的第二個儲存貯體 （名稱開頭react-cors-spa-為 並以 結尾的第二個儲存貯體-logs)。

  4. 選擇空白以刪除儲存貯體的內容。

 DevOpsAWS、應用程式開發人員

刪除 AWS CloudFormation 堆疊。

  1. 開啟AWS CloudFormation 主控台，然後選擇您先前建立的堆疊。

  2. 選擇刪除以刪除堆疊和所有相關資源。

 DevOpsAWS、應用程式開發人員

相關資源

若要部署和託管您的 Web 應用程式，您也可以使用 AWS Amplify Hosting，它提供 Git 型工作流程，以託管具有連續部署的全堆疊無伺服器 Web 應用程式。Amplify Hosting 是 的一部分AWS Amplify，提供一組專用工具和功能，讓前端 Web 和行動開發人員能夠快速輕鬆地在 上建置完整堆疊的應用程式 AWS。

其他資訊

若要處理使用者請求且可能產生 403 個錯誤的無效 URLs CloudFront ，在 Word 分佈中設定的自訂錯誤頁面會擷取 403 個錯誤，並將其重新導向至應用程式進入點 (index.html)。

為了簡化 CORS 的管理，REST API 透過 a CloudFront 分發公開。