使用 ServBay 建立與執行 React 專案

什麼是 React？

React 是由 Meta（前身為 Facebook）及其開源社群共同維護的 JavaScript 函式庫，專注於建立使用者介面（UI）。它採用元件化架構來打造互動式 UI，讓開發者能有效率地開發複雜且易於維護的單頁應用程式（SPA）或大型 Web 應用的視圖層。React 的核心優勢在於宣告式程式設計、高效的虛擬 DOM 更新機制，以及活躍且豐富的生態系統。

React 的主要特色與優勢

元件化開發： 將複雜 UI 分割成獨立且可重用的元件，提升程式碼維護性與重複利用率。
宣告式視圖： 只需描述 UI 狀態，React 會自動更新 DOM 以符合該狀態，簡化介面邏輯。
虛擬 DOM (Virtual DOM)： 在記憶體中維護 DOM 的虛擬表示，僅處理差異以最小化真實 DOM 操作，大幅提升效能。
單向資料流： 資料由上往下流動，方便追蹤及理解應用程式的狀態變化。
JSX： 一種 JavaScript 語法擴充，允許在 JS 內嵌寫類似 HTML 的結構，提升程式碼可讀性。
生態系強大： 擁有龐大社群支援與豐富第三方庫（如 React Router、Redux/Zustand/MobX、Material UI ...），涵蓋狀態管理、路由、UI 元件等各面向。

利用 React，開發者能以更快速度與更高效率打造現代化高效能的 Web 應用。

使用 ServBay 建置 React 開發與生產環境

ServBay 是功能強大的本地 Web 開發環境，為 macOS 與 Windows 使用者提供包括 Node.js 在內的多種套件。本指南將詳細介紹如何運用 ServBay 的 Node.js 環境及「網站（Websites）」功能，手把手建立、設定並執行一個 React 專案，包括設定開發模式的反向代理以及生產模式的靜態檔案服務。

前置作業

開始之前，請確認已完成以下準備：

安裝 ServBay： 已在系統上成功安裝並啟動 ServBay。
安裝 Node.js 套件： 透過 ServBay 介面或指令列安裝 Node.js 套件。可參考 ServBay 安裝 Node.js 套件指南取得詳細步驟。ServBay 會自動管理 Node.js 版本以及相關環境變數。

建立 React 專案

以下將使用近年主流的前端建構工具 Vite 快速建立 React 專案。Vite 具備超快啟動、即時熱更新（HMR），大幅改善開發體驗，目前已成為新 React 專案的主要選擇之一（取代傳統 create-react-app）。

開啟終端機，進入網站根目錄
開啟終端機 App。ServBay 建議預設網站根目錄：
macOS:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
用 Vite 建立新 React 專案
執行以下指令，透過 create-vite 建立名為 servbay-react-demo 的新專案，並選用 react 模板：
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx 是 npm 的套件執行器，可直接執行 npm 公庫上的 CLI 工具，無需全域安裝。這能確保使用最新版的 create-vite。
- create-vite 為 Vite 官方的專案建立工具。
- servbay-react-demo 是專案資料夾名稱。
- --template react 指定使用 React 模板初始化專案結構。
按照畫面提示完成專案建立。
進入專案目錄，安裝相依套件
進入剛建好的專案資料夾並安裝必要套件：
bash
```
cd servbay-react-demo
npm install
```
1
2
- 你也可選擇用 yarn install 或 pnpm install，如果偏好使用 Yarn 或 pnpm 管理套件。

修改 React 專案內容（選擇性）

為驗證設定是否成功，可以簡單調整首頁內容。

打開 src/App.jsx 或 src/App.tsx 檔案
用喜愛的編輯器開啟專案目錄下的 src/App.jsx（若用 JavaScript 模板）或 src/App.tsx（TypeScript 模板）。

修改內容

找到主內容渲染部分，改成顯示 "Hello ServBay!"：

javascript

// ... 其他導入 ...
import './App.css';

function App() {
  // ... 其他代碼 ...
  return (
    <>
      {/* ... 其他元素 ... */}
      <h1>Hello ServBay!</h1>
      {/* ... 其他元素 ... */}
    </>
  );
}

export default App;

儲存檔案。

進入開發模式

開發階段通常會啟動本地開發伺服器，提供熱更新（HMR）等功能，有助於提升開發效率。ServBay 支援反向代理（Reverse Proxy），能將外部請求導向此開發伺服器。

於終端機啟動開發伺服器
在專案根目錄 servbay-react-demo，輸入下列指令啟動 Vite 開發伺服器，並自訂埠號（例如：8585）：
bash
```
npm run dev -- --port 8585
```
1
- npm run dev 執行專案 package.json 中定義的 dev 腳本，通常就是啟動 Vite 開發伺服器。
- -- --port 8585 將埠號參數傳給 Vite 命令。
伺服器啟動後，終端機通常會顯示本地存取連結，例如 http://localhost:8585。請保持終端機視窗開啟，勿關閉此伺服器過程。
於 ServBay 設定網站反向代理
開啟 ServBay 應用程式介面，前往 網站（Websites） 功能頁，點擊新增按鈕建立新網站設定：
- 名稱（Name）： ServBay React Dev（可自由描述）
- 網域（Domain）： servbay-react-dev.servbay.demo（建議使用 ServBay 品牌相關示範網域）
- 網站類型（Site Type）： 選擇 反向代理（Reverse Proxy）
- 代理 IP（Proxy IP）： 127.0.0.1（開發伺服器於本機執行）
- 代理埠（Proxy Port）： 8585（與啟動伺服器時指定相同）
儲存設定。ServBay 會自動套用並透過內建 Web 伺服器（Caddy 或 Nginx）將指向 servbay-react-dev.servbay.demo 的請求導向 http://127.0.0.1:8585。
具體新增網站步驟，請參考 ServBay 網站管理指南。
存取開發網站
用瀏覽器輸入剛設定的網域：https://servbay-react-dev.servbay.demo。
- 依靠 ServBay 強大功能，開發網站自動套用 SSL 憑證（由 ServBay User CA 或 ServBay Public CA 簽發），可安全透過 HTTPS 進行存取。更多 SSL 資訊請見使用 SSL 保護您的網站。
- 現在修改原始程式並儲存時，瀏覽器頁面應自動更新，這就是所謂的熱模組更新（HMR）。

建置生產版本

當 React 專案開發完成準備佈署時，你需製作最佳化的生產版檔案。

於終端機建置生產版本
在專案根目錄 servbay-react-demo，執行下列指令進行生產建置：
bash
```
npm run build
```
1
此命令會執行 package.json 所定義的 build 腳本。Vite-based 的 React 專案會編譯、打包與最佳化成一組靜態檔（HTML、CSS、JavaScript、靜態資源等），通常輸出至根目錄下 dist 資料夾。建置完成後終端機會顯示成功訊息。
在 ServBay 設定靜態檔案服務
生產建置後的 dist 目錄含可直接被 Web 伺服器提供的靜態檔。於 ServBay 介面設定一個新靜態網站，即可對應至此資料夾。
開啟 ServBay 應用程式介面，進入 網站（Websites） 功能頁。點擊新增按鈕建立新網站設定：
- 名稱（Name）： ServBay React Prod（描述性命名）
- 網域（Domain）： servbay-react.servbay.demo（與開發網域區隔）
- 網站類型（Site Type）： 選擇 靜態（Static）
- 網站根目錄（Website Root Directory）： 指向專案建置後的 dist 資料夾：
  - macOS: /Applications/ServBay/www/servbay-react-demo/dist
  - Windows: C:\ServBay\www\servbay-react-demo\dist
儲存設定。ServBay 會讓內建 Web 伺服器直接提供 dist 中的靜態檔案。
存取生產網站
用瀏覽器進入剛設定的生產網域：https://servbay-react.servbay.demo。
此時你看到的是已最佳化且建置完成的生產版本，同樣自動套用 ServBay SSL 加密。

總結

依照以上步驟，你已成功運用 ServBay 在本地環境建立 React 專案，並分別設定了開發模式（反向代理）及生產模式（靜態檔案服務）。ServBay 大幅簡化本地環境建置與管理，支援 macOS 與 Windows，包含內建 Node.js 整合、彈性網站設定（反向代理、靜態服務）及自動 SSL 功能，極大便利 React 開發者。你可在此基礎下持續開發、測試、佈署你的 React 應用程式。

使用 ServBay 建立與執行 React 專案 ​

什麼是 React？ ​

React 的主要特色與優勢 ​

使用 ServBay 建置 React 開發與生產環境 ​

前置作業 ​

建立 React 專案 ​

修改 React 專案內容（選擇性） ​

進入開發模式 ​

建置生產版本 ​

總結 ​