使用 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:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1用 Vite 建立新 React 專案
執行以下指令,透過
create-vite
建立名為servbay-react-demo
的新專案,並選用react
模板:bashnpx create-vite servbay-react-demo --template react
1npx
是 npm 的套件執行器,可直接執行 npm 公庫上的 CLI 工具,無需全域安裝。這能確保使用最新版的create-vite
。create-vite
為 Vite 官方的專案建立工具。servbay-react-demo
是專案資料夾名稱。--template react
指定使用 React 模板初始化專案結構。
按照畫面提示完成專案建立。
進入專案目錄,安裝相依套件
進入剛建好的專案資料夾並安裝必要套件:
bashcd 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15儲存檔案。
進入開發模式
開發階段通常會啟動本地開發伺服器,提供熱更新(HMR)等功能,有助於提升開發效率。ServBay 支援反向代理(Reverse Proxy),能將外部請求導向此開發伺服器。
於終端機啟動開發伺服器
在專案根目錄
servbay-react-demo
,輸入下列指令啟動 Vite 開發伺服器,並自訂埠號(例如:8585):bashnpm run dev -- --port 8585
1npm 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 網站管理指南。
- 名稱(Name):
存取開發網站
用瀏覽器輸入剛設定的網域:
https://servbay-react-dev.servbay.demo
。- 依靠 ServBay 強大功能,開發網站自動套用 SSL 憑證(由 ServBay User CA 或 ServBay Public CA 簽發),可安全透過 HTTPS 進行存取。更多 SSL 資訊請見 使用 SSL 保護您的網站。
- 現在修改原始程式並儲存時,瀏覽器頁面應自動更新,這就是所謂的熱模組更新(HMR)。
建置生產版本
當 React 專案開發完成準備佈署時,你需製作最佳化的生產版檔案。
於終端機建置生產版本
在專案根目錄
servbay-react-demo
,執行下列指令進行生產建置:bashnpm 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
- macOS:
儲存設定。ServBay 會讓內建 Web 伺服器直接提供
dist
中的靜態檔案。- 名稱(Name):
存取生產網站
用瀏覽器進入剛設定的生產網域:
https://servbay-react.servbay.demo
。此時你看到的是已最佳化且建置完成的生產版本,同樣自動套用 ServBay SSL 加密。
總結
依照以上步驟,你已成功運用 ServBay 在本地環境建立 React 專案,並分別設定了開發模式(反向代理)及生產模式(靜態檔案服務)。ServBay 大幅簡化本地環境建置與管理,支援 macOS 與 Windows,包含內建 Node.js 整合、彈性網站設定(反向代理、靜態服務)及自動 SSL 功能,極大便利 React 開發者。你可在此基礎下持續開發、測試、佈署你的 React 應用程式。