我如何在 AWS Cloud Snd CloudFront 上部署 React 應用程式 – 完整演練

將 React 應用程式部署到 AWS S3 和 CloudFront：逐步指南

本指南將引導您將 React 應用程式部署到 Amazon S3 進行靜態託管，並使用 CloudFront 進行內容交付。

第 1 步：開始

開始之前，請確保您已：

1. 本地安裝了 Node.js 和 npm。
2. 具有管理員權限的 AWS 帳戶。

第 2 步：建立你的 React 應用程式

1. 打開你的終端機。
2. 使用 Vite 建立新的 React 應用程式：npm create vite@latest <your_project_name>（將 <your_project_name> 替換為您想要的名稱）。
3. 導覽至專案目錄：cd <your_project_name>

第 3 步：驗證與建構

1. 啟動開發伺服器進行測試：npm start。透過 http://localhost:3000 存取您的應用程式。
2. 停止開發伺服器（Ctrl C）。
3. 建立您的生產應用程式：npm run build。這將建立一個包含最佳化檔案的 build/ 資料夾。

第 4 步：設定 S3 儲存桶

1. 在 AWS 管理主控台中，導覽至 S3 服務。
2. 建立一個新儲存桶，並提供一個唯一的名稱（例如，<your_unique_bucket_name>）。
3. 選擇一個區域並建立儲存桶。

第 5 步：在 S3 上啟用靜態網站寄存

1. 選擇您新建立的儲存桶。
2. 轉到「屬性」標籤。
3. 在「靜態網站寄存」下啟用它。
4. 將「索引文件」和「錯誤文檔」設定為index.html。
5. 儲存更改。

第 6 步：設定儲存桶權限

1. >導航到“權限”選項卡。
2. 編輯存儲措施策略。 確保該策略允許公眾訪問您的網站（考慮安全含義並相應地針對生產環境進行調整）。
保存策略。 通過訪問瀏覽器中的S3存儲桶URL來測試您的部署。
3. >

>

步驟7：測試S3部署>

>通過S3 URL訪問您已部署的應用程序（例如，

）。 http://<your_unique_bucket_name>.s3-website-.amazonaws.com/

>

步驟8：為cdn

配置雲方面

在AWS管理控制台中，導航到CloudFront Service。

>創建一個新的分佈。選擇“ Web”作為交付方法。
配置原始設置，指向您的S3存儲端端點。
2. >將查看器協議策略設置為“將http重定向到https”。
創建分佈。
>

步驟9：測試CloudFront部署

>

>一旦部署了CloudFront Distribution，請通過CloudFront URL訪問您的應用程序。

結論

>您已成功將React應用程序部署到AWS S3和CloudFront！現在，您的應用程序是通過CDN提供的，可確保全球用戶的高可用性和優化性能。 請記住，用您的實際值替換佔位符名稱和區域。 部署到生產時，始終優先考慮安全性最佳實踐。

以上是我如何在 AWS Cloud Snd CloudFront 上部署 React 應用程式 – 完整演練的詳細內容。更多資訊請關注PHP中文網其他相關文章！