今日目標說明

後端順利上線了，接著換前端！我們的 React 前端是透過 Vite 建立的，編譯後會產生純靜態的 HTML、CSS 和 JavaScript 檔案。今天我們選擇使用 Render 這個平台來託管我們的網站。

【架構決策對比】為什麼在 Render 選擇 Static Site？

在部署前端時，Render 提供了好幾種選項。我們為什麼選「Static Site (靜態網站託管)」，而不選「Web Service (網頁伺服器)」？

核心設定參數

在 Render 的 Dashboard 選擇建立新的 "Static Site" 並連結您的 GitHub 專案後，最重要的是以下兩個設定：

1. Build Command (建置指令)：

   npm install && npm run build
   

   告訴 Render 在部署前先安裝套件，並執行 Vite 的打包指令。

2. Publish Directory (發布資料夾)：

   dist
   

   Vite 預設會將打包好的靜態檔案放在 dist 資料夾，設定這個屬性，Render 才知道該把哪個資料夾對外公開！

另外，別忘了在 Render 的 "Redirects/Rewrites" 設定中，將所有找不到的路由 (/*) 重新導向回 /index.html (Rewrite)，這一步非常關鍵，否則前端換頁按 F5 重整時會直接跑出 404！

實際畫面截圖

在Render控制台裡面， Build Command 與 Publish Directory 的區塊設定。
對於初次部署 Vite 專案的新手來說，這是一張非常有價值的踩坑地圖。

小結

前後端都順利上雲端了！但如果您現在打開前端網頁，可能會發現畫面上什麼資料都沒有，打開 F12 還會看到滿滿的紅字。別慌，這是開發者必經的「CORS 跨網域」考驗，明天我們就來解決它！