React 筆記 | Vite 專案部署到 Netlify（含解決跨域 API ）

前置：先到 Netlify 註冊帳戶

---

1. 打包專案

npm run build -- --mode production

2. 安裝 Netlify CLI ( 全域安裝 )，並登入 Netlify

npm install -g netlify-cli
netlify login

3. 部署專案到 Netlify

• 第一次部署時會詢問是否要建立新專案，依提示輸入專案名稱
• 部署後會產生一個正式網址（production）

netlify deploy --prod --dir=dist

4. Netlify Proxy 解決跨域 (CORS) 問題

跨域 (CORS) 說明

當部署的前端網域與打後端 API 網域不同就會產生跨域 ( 如藍字標註 )，除非後端有允許跨域，否則瀏覽器視為不安全所以會擋掉請求

前端網址：https://dashboard-20250912.netlify.app 後端 API：https://mis.dashboard.com.tw/api/…

如若不透過後端，也可以在用 Netlify Proxy 解決跨域，這樣部署的網站在打 API 時，表面上會是用 https://vite-dashboard-20250912.netlify.app/api/… 去打，但等到 Netlify 收到請求會轉發到 https://mis.dashboard.com.tw/api/… 來打 api，就可以成功繞過瀏覽器跨域的問題

• 在 public/ 資料夾建立一個檔案，新增 _redirects （純文字，無副檔名）

/api/*   https://mis.dashboard.com.tw/api/:splat   200

• 修改 .env.production ，將原本完整後端 API 路徑改成相對路徑

VITE_API_URL=/api

• 提醒：開發環境建議另外新增檔案 .env.development，並用 Vite Proxy 處理本地跨域，避免本地端打到真實 API (如：https://mis.dashboard.com.tw/api/…

VITE_API_URL=http://localhost:XXXX/api

5. 重新打包並部署

npm run build -- --mode production
netlify deploy --prod --dir=dist