概述

本文檔詳細記錄了將 React 聊天應用程式從本地開發環境部署到 AWS CloudFront 的完整流程，包含開發、建置、上傳和配置等各個階段。

流程步驟

1. 本地開發與測試階段

• 環境: localhost:5173 (Vite 開發伺服器)
• 應用程式: 聊天室 React 應用
• 功能驗證:
  • 中文介面正常顯示
  • 訊息發送接收功能正常
  • 測試訊息 "123123" 成功傳送

2. 專案結構配置

react-chat-app/
├── dist/                    # 建置輸出目錄
├── node_modules/           # 依賴套件
├── src/                    # 原始碼
├── index.html             # 主要 HTML 檔案
├── package.json           # 專案配置
├── package-lock.json      # 依賴鎖定檔案
├── postcss.config.js      # PostCSS 配置
├── tailwind.config.js     # Tailwind CSS 配置
├── tsconfig.json          # TypeScript 配置
├── tsconfig.node.json     # Node.js TypeScript 配置
└── vite.config.ts         # Vite 建置配置

3. React 應用程式建置

*# 執行建置指令*
npm run build

建置結果:

• 所有原始碼編譯至 dist/ 目錄
• JavaScript 模組優化與壓縮
• CSS 樣式處理與最小化
• 靜態資源整理與優化

4. AWS S3 儲存桶配置

上傳檔案:

• assets/ 資料夾 - 靜態資源
• index.html - 主頁面檔案

S3 配置:

• 啟用靜態網站託管
• 設定 index.html 為預設文件
• 配置適當的存取權限
  

最後測試

最終結果:

• 應用程式透過 CloudFront 網域正常運行
• 功能與本地版本完全一致
• 載入速度優化，使用者體驗提升

部署驗證

本地環境 (開發階段)

• URL: localhost:5173
• 狀態: ✅ 正常運行
• 測試: 訊息收發功能正常

生產環境 (CloudFront)

• URL: https://[cloudfront-domain].cloudfront.net
• 狀態: ✅ 部署成功
• 功能: 完整保留所有本地功能

總結

此部署流程展現了現代前端應用程式的標準部署模式：

1. 本地開發 - 功能開發與測試
2. 建置打包 - 程式碼優化與壓縮
3. 雲端儲存 - S3 靜態檔案託管
4. 全球分發 - CloudFront CDN 加速

透過這個流程，成功實現了高效能、高可用性、安全可靠的 React 應用程式部署，為使用者提供最佳的存取體驗。