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

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

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

由 Jean-Baptiste Guillois 建立 （AWS）

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

環境：生產

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

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

AWS 服務：Amazon API Gateway；Amazon CloudFront

Summary

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

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

先決條件和限制

先決條件

  • 作用中 AWS 帳戶。

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

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

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

架構

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

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

工具

AWS 服務

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

  • 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 （AmazonEC2） 執行個體。

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

史詩

任務描述所需的技能

複製儲存庫。

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

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

本機部署應用程式。

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

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

應用程式開發人員、 AWS DevOps

本機存取應用程式。

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

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

部署 AWS CloudFormation 範本。

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

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

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

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

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

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

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

應用程式開發人員、 AWS DevOps

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

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

  2. 複製 REST 的 CloudFront 分佈網域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 DevOps
任務描述所需的技能

存取和測試應用程式。

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

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

刪除 S3 儲存貯體內容。

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

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

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

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

AWS DevOps、應用程式開發人員

刪除 AWS CloudFormation 堆疊。

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

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

AWS DevOps、應用程式開發人員

相關資源

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

其他資訊

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

為了簡化 的管理CORS， 會透過 CloudFront 分佈RESTAPI公開。