使用 React 和 AWS 構建可擴展的網頁應用：來自生產環境的經驗
和招聘、串流媒體、顧問業的客戶合作這些年，讓我累積了不少打造全球規模應用的經驗。現實的挑戰很多：處理數百萬同時在線的用戶、管理分散式系統裡複雜的狀態、優化 SEO 和效能，還要在大團隊裡維持程式碼品質。這篇文章我會分享一些實戰經驗，還有那些讓系統成功運作的架構決策。
生產環境的架構選擇
我覺得最好用的技術組合是：前端用 React（搭配 Next.js 做 SSR/SSG）、後端 API 用 Node.js/Express，基礎架構則是 AWS 全家桶（Lambda、API Gateway、S3、CloudFront、DynamoDB）。這種 Serverless 優先的做法可以減少維運負擔，同時應付得了突然暴增的流量。幾個關鍵的優化手法：適當的 Code Splitting 和 Lazy Loading、用 CDN 處理靜態資源、Redis 快取策略，還有設計盡量減少來回次數的 API。
何時才需要微服務
學到最重要的一課：微服務不是萬靈丹。對中型應用來說，架構清楚的單體系統往往效能更好、也更好維護。但如果真的需要拆分服務，就用 AWS Lambda 做運算、API Gateway 處理路由，再用 CloudWatch 監控。舉個實際例子：有個串流專案，我們靠著 CloudFront 的全球節點和優化過的影片編碼流程，服務了亞洲數百萬用戶。
可靠部署與監控
想提升雲端架構能力的香港工程師，建議專注這幾個方向：搞懂 AWS 計價方式來控制成本、建立穩定的 CI/CD 流程、用 Terraform 或 CloudFormation 掌握 Infrastructure as Code，最重要的是——什麼都要監控。正式環境一定會出問題，重點是你能多快發現和解決。React 的元件架構配上 AWS 的彈性基礎建設，是打造能隨業務成長的現代應用的絕佳組合。
工程筆記
可重現的實作
以下是針對本文主題整理的最小可行範例。實際正式環境仍需按安全、錯誤處理、監控及業務規則擴充。
A resilient serverless read path
export const handler = async (event) => {
const id = event.pathParameters?.id;
if (!id) return { statusCode: 400, body: "Missing id" };
const result = await repository.findById(id);
return {
statusCode: result ? 200 : 404,
headers: { "cache-control": "public, max-age=60" },
body: JSON.stringify(result ?? { error: "Not found" }),
};
};驗證方式與限制
此設計可透過 p95 延遲、錯誤率、快取命中率及每次請求成本進行負載測試；文章不會把客戶機密儀表板當作公開證據。