使用 ServBay 在 macOS 本地環境建立並運行 React 專案

什麼是 React？

React 是由 Meta（前身為 Facebook）以及其社群維護的開源 JavaScript 函式庫，專門用於構建用戶介面（UI）。它以元件化的方式打造互動式 UI，讓開發者可以高效率地建立複雜且易於維護的單頁應用程式（SPA）或大型網頁應用的視覺層。React 的核心優勢在於其宣告式開發範式、高效的虛擬 DOM 更新機制，以及強大的社群生態系。

React 的主要特點與優勢

元件化開發： 將複雜的 UI 拆解為獨立、可重複利用的元件，提高程式碼維護性與重用性。
宣告式視圖： 直觀描述 UI 狀態，React 會自動處理 DOM 更新，簡化 UI 開發邏輯。
虛擬 DOM (Virtual DOM)： 在記憶體中維護一份 DOM 的虛擬表示，透過比較差異，將實際 DOM 操作最小化，大幅提升效能。
單向資料流： 資料自上而下流動，讓應用狀態變更更容易追蹤與理解。
JSX： 一種 JavaScript 語法擴充，允許在 JavaScript 內撰寫類似 HTML 結構，增進程式碼可讀性。
強大生態系統： 擁有龐大的社群支援和豐富的第三方套件（如 React Router、Redux/Zustand/MobX、Material UI 等），涵蓋狀態管理、路由、UI 元件等多個面向。

使用 React，開發者能更快速、高效地開發現代化、高性能的網頁應用。

利用 ServBay 建立 React 開發與生產環境

ServBay 是一套功能強大的本地 Web 開發環境，為 macOS 用戶提供包括 Node.js 在內的多種軟體套件。本指南將詳述如何活用 ServBay 的 Node.js 環境與網站（Websites）功能，從零開始建立、設定並運行 React 專案，包括設定開發模式的反向代理以及生產模式的靜態檔案服務。

前置作業

在開始之前，請確保您已完成以下準備：

安裝 ServBay： 您的 macOS 系統已正確安裝與啟用 ServBay。
安裝 Node.js 套件： 透過 ServBay 介面或命令列，完成 Node.js 套件安裝。可參考 ServBay 安裝 Node.js 套件說明文件取得詳細步驟。ServBay 會自動管理 Node.js 版本與環境變數。

建立 React 專案

我們將採用現代前端建構工具 Vite 來快速建立 React 專案。Vite 提供超快冷啟動及即時熱模組更新（HMR），極大提升開發體驗，已成為新建 React 專案主流選擇之一（取代傳統的 create-react-app）。

打開終端機並切換至網站根目錄
開啟終端機應用。ServBay 預設建議的網站根目錄為 /Applications/ServBay/www。切換到該路徑：
bash
```
cd /Applications/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 模板初始化專案結構。
依照螢幕指示完成專案建立。
進入專案資料夾並安裝依賴
進入新創建的專案資料夾，並使用 npm 安裝所需套件：
bash
```
cd servbay-react-demo
npm install
```
1
2
- 如果偏好 Yarn 或 pnpm 作為套件管理器，也可使用 yarn install 或 pnpm install。

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

為了驗證配置成功，我們可以簡單修改首頁內容。

打開 src/App.jsx 或 src/App.tsx 檔案
使用您慣用的編輯器開啟專案目錄下的 src/App.jsx（若為 JS 模板）或 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 存取。如需更多 ServBay SSL 功能，請參閱使用 SSL 保護您的網站。
- 當你在編輯器內修改專案檔案並儲存時，瀏覽器頁面會自動更新，這便是熱模組更新（HMR）所發揮的作用。

建構生產（正式）版本

當您的 React 專案開發完畢、準備上線時，需進行最佳化與生產建構。

終端機中執行正式建構
於專案根目錄 servbay-react-demo 下，執行以下指令產生生產版本：
bash
```
npm run build
```
1
此指令會呼叫 package.json 內建構腳本。對於基於 Vite 的 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）： /Applications/ServBay/www/servbay-react-demo/dist（指向專案建構後產生的 dist 目錄）
儲存設定即可讓 ServBay 配置內建 Web 伺服器，直接提供 dist 目錄下的靜態檔案。
訪問正式網站
在瀏覽器輸入剛設定的生產網域：https://servbay-react.servbay.demo。
你已能看到經過優化與建構的正式版網站，同樣享有 ServBay 自動配置的 SSL 保護。

總結

依照以上步驟，您已成功利用 ServBay 在 macOS 本地環境創建 React 專案，並分別配置了開發模式的反向代理及生產模式的靜態檔案服務。ServBay 大幅簡化本地開發環境的建置與管理，特別是其內建 Node.js 支援、彈性的網站配置（涵括反向代理及靜態服務）以及自動 SSL 功能，為 React 開發者帶來極大便利。您可在此基礎上持續開發、測試與部署 React 應用。

使用 ServBay 在 macOS 本地環境建立並運行 React 專案 ​

什麼是 React？ ​

React 的主要特點與優勢 ​

利用 ServBay 建立 React 開發與生產環境 ​

前置作業 ​

建立 React 專案 ​

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

進入開發模式 ​

建構生產（正式）版本 ​

總結 ​