部署你的
React app
上傳 Vite、Create React App 或其他 React SPA 的正式 build，發佈時保留重新整理不壞的路由、HTTPS、邊緣傳遞，以及需要時可接的自訂網域。
請上傳建置輸出，不是原始專案
React 原始檔是開發用。DeployPages 提供的是正式 build 產生的靜態檔案。
Vite React
Vite 預設靜態輸出是 dist。如果 vite.config.js 修改了 build.outDir 或 base，請部署實際輸出資料夾，並在上傳後測試資源 URL。
Create React App
CRA 會把正式建置檔案寫到 build。如果 app 會放在子路徑，homepage 設定可能影響產生出的資源 URL。
其他 React SPA
只要能產生 index.html、JavaScript bundle、CSS、圖片、字型和靜態資源，任何 React 設定都能走這個流程。
React app 為什麼部署後會壞
React SPA 仍然從一個 HTML 檔案開始
多數 React single-page app 會提供一個 HTML 進入點，再由 client-side router 在 JavaScript 載入後決定要渲染哪個畫面。
本機可行，是因為 dev server 知道找不到路由時要回到 index.html。基本靜態主機未必知道，所以 /dashboard 在站內導覽可用，重新整理卻可能變成 404。
重新整理時會壞在哪裡
靜態檔案伺服器收到 GET /settings 時，會尋找真實存在的 settings 檔案或資料夾。
React build 通常只有 index.html 和帶 hash 的資源，所以伺服器會在 React Router 讀到網址前就回 404。
DeployPages 怎麼處理
DeployPages 會對找不到的 document route 套用 SPA 回退，改提供 index.html，而不是直接回硬 404。
HTML 檔案載入後，React 啟動、router 讀取目前網址，正確畫面就能渲染，不需要你維護 redirect 檔案。
團隊為什麼用它
上傳 dist 或 build 資料夾。路由回退、HTTPS、壓縮和邊緣傳遞都屬於部署流程，不需要每個小型 React app 都重建一次清單。
React app 上線前該檢查的事
App 能編譯，不代表線上一定正常。分享連結前先看這些。
資源 base path
如果 JavaScript 或 CSS 從錯誤 URL 載入，頁面可能變空白。Vite base 和 CRA homepage 是最常需要檢查的地方。
Client-side routes
測試 /login、/pricing、/dashboard 和所有重要分享深層連結的直接造訪與重新整理。
API endpoints
靜態 React 部署可以呼叫外部 API，但本身不會執行後端程式。請不要把伺服器私密資訊和私人 API key 放進前端 bundle。
環境變數
多數 React 建置工具會在建置時把公開環境值寫進 bundle。上傳後才改變數，通常需要重新建置。
React 部署流程
建置 app
在本機執行正式 build，讓 React、CSS 和資源打包成可部署的靜態資料夾。
檢查輸出
確認輸出資料夾包含 index.html 和產生後的資源。Vite 通常是 dist，Create React App 通常是 build。
上傳整個資料夾
把完整 dist 資料夾拖進 DeployPages。不要只上傳 index.html，否則樣式和 script 會缺失。
測試路由頁
開啟巢狀路由、重新整理瀏覽器，確認 app 仍正常載入，而不是回到主機層級 404。
常見 React 部署問題
部署後白畫面
先開 DevTools 看 JS 或 CSS 是否缺失。錯誤 base path、缺少資源或上傳錯資料夾，是常見原因。
巢狀路由重新整理回 404
靜態主機正在為該路由找真實檔案。使用 SPA 回退，讓找不到的 document route 回到 index.html。
資源本機正常，線上失效
檢查絕對路徑、public base 設定，以及上傳的輸出資料夾是否包含產生後的 assets 目錄。
環境變數修改沒有生效
用新的公開變數重新建置 app，再上傳新的輸出。已部署的 bundle 無法在 runtime 讀取私人 server env。
React 部署常見問題
Q:為什麼 React app 部署後是白畫面？
多數白畫面來自錯誤的資源路徑或缺少 bundle。Vite 請確認 base 符合部署目標；CRA 請檢查 homepage，並確認上傳資料夾包含產生的資源。
Q:需要手動設定 nginx 或 redirects 嗎？
不用。DeployPages 會在邊緣處理找不到路由時的 SPA 回退，不需要你自己維護 server rewrites。
Q:應該上傳專案資料夾還是 dist？
請上傳正式輸出資料夾，不是原始專案。Vite 通常是 dist，Create React App 通常是 build。
Q:可以使用環境變數嗎？
可以，但它們會在本機 build 時解析。DeployPages 託管的是最後靜態輸出，因此執行期間的 server-side environment injection 不屬於這個流程。
Q:React app 部署後可以呼叫 API 嗎？
可以。靜態 React app 可以從瀏覽器呼叫外部 API。請記得任何打包進前端程式的內容都會被使用者看到，私人 secret 需要放在後端。
Q:Next.js 也可以部署在這裡嗎？
可以，前提是匯出成靜態網站。使用 output: 'export' 並上傳產生的 out 目錄。Server-rendered Next.js 路由需要靜態託管以外的 runtime。
Q:之後可以接自訂網域嗎？
可以。網站上線後，在 Console 新增你的網域並依 DNS 指示設定。記錄解析後，DeployPages 會自動提供 HTTPS。