在 ServBay 中建立與運行 Angular 專案
概述
本文件旨在指導您如何在 ServBay 本機 Web 開發環境內,建立、配置並啟動一個 Angular 專案。我們將善用 ServBay 強大的 Node.js 環境以及彈性十足的網站(原稱「主機」)管理功能,輕鬆架設開發與生產環境,並確保能透過自訂網域及 SSL 憑證進行安全訪問。ServBay 整合多種開發所需套件(原稱「服務」),包含 Node.js、PHP、Python、Go、Java、各類資料庫等,是全端本機開發的理想選擇。
什麼是 Angular?
Angular 是由 Google 維護的開源前端框架,主要用於構建高效、動態的單頁應用(SPA)。它基於 TypeScript,提供完整工具組與架構化開發方式,非常適合開發大型、複雜的企業級應用。
Angular 的核心特色與優勢
- 元件化架構: 以可重複利用的元件打造 UI,提升程式碼維護性及擴充性。
- TypeScript 支援: 提供靜態型別檢查與強大物件導向功能,提升程式品質及開發效率。
- 依賴注入: 讓元件更加易於測試與管理依賴。
- 強化 CLI(命令列介面): 簡化專案建立、元件/服務/模組產生與建置、測試等開發任務。
- 內建常用模組: 提供路由、表單處理、HTTP 客戶端等功能模組。
- 效能最佳化: 支援 AOT 編譯、Tree-shaking 等技術,優化應用程式效能。
結合 Angular 與 ServBay 穩定的開發環境,可讓開發者更專注於業務邏輯實現。
前置條件
開始前,請確保您已完成以下準備:
- 安裝 ServBay: 您已成功安裝並啟動 ServBay(支援 macOS 與 Windows)。
- 啟用 Node.js 套件: 在 ServBay 控制台中,確認已安裝並啟動所需 Node.js 版本套件。ServBay 支援安裝多版本 Node.js 並可輕鬆切換。
使用 ServBay 設定與運行 Angular 專案
我們將利用 ServBay 提供的 Node.js 環境來建立及運行 Angular 專案。開發模式下會使用 ServBay 網站功能進行反向代理,指向 Angular 開發伺服器;生產模式則會建置專案並以 ServBay 提供靜態檔案服務。
1. 建立 Angular 專案
首先,要使用 Angular CLI 建立新專案。
安裝 Angular CLI: 開啟終端機(Terminal),利用 ServBay 提供的 Node.js 環境,全域安裝 Angular CLI。若 ServBay Node.js 沒自動加入您的系統 PATH,可先切換到 ServBay Node.js 環境。一般而言,ServBay會自動處理 PATH。
bashnpm install -g @angular/cli
1此步會將
ng
命令安裝至系統,可全域使用 Angular CLI。建立新 Angular 專案: 進入 ServBay 建議的網站根目錄,使用
ng new
指令建立新 Angular 專案。例如,建議命名為servbay-angular-app
。macOS:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2CLI 會問您一些設定問題,依提示輸入或選擇:
? Would you like to add Angular routing? Yes # 是否加入路由功能,建議選 Yes ? Which stylesheet format would you like to use? CSS # 選擇樣式格式,如 CSS
1
2等待命令執行完畢後,Angular CLI 會在網站根目錄下產生名為
servbay-angular-app
的新資料夾,包含基礎結構:- macOS:
/Applications/ServBay/www/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app
- macOS:
安裝專案相依套件: 進入新專案目錄,安裝所需本地套件。
bashcd servbay-angular-app npm install
1
2npm install
會依據package.json
列出的依賴安裝至node_modules
資料夾。
2. 修改 Angular 專案首頁內容(可選)
為了驗證專案是否正確運作,可簡單修改首頁顯示內容。
編輯
src/app/app.component.html
: 用您喜愛的編輯器開啟servbay-angular-app/src/app/app.component.html
。將其內容改為僅顯示一個簡單標題,例如「Hello ServBay!」。html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>This is your Angular app running via ServBay!</p> </div>
1
2
3
4
3. 以開發模式運行專案
開發時通常使用 Angular CLI 的開發伺服器(ng serve
),它支援熱重載等功能,方便除錯。接著利用 ServBay 的反向代理功能,透過本地網域訪問此開發伺服器。
啟動 Angular 開發伺服器: 在專案根目錄執行以下指令,指定如
8585
的埠號,以避免與 ServBay 預設 Web 伺服器埠號衝突。macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2此命令會在本機
http://localhost:8585/
啟動 Web 伺服器。請維持終端機開啟,以保持伺服器運作。設定 ServBay 網站(反向代理): 開啟 ServBay 控制台,進入「網站」(原「主機」)設定。新增網站配置,使用反向代理將本地網域導向
ng serve
開發伺服器。- 名稱 (Name): 例如
My Angular Dev Site
(僅 ServBay 內顯示) - 網域 (Domain): 建議採 ServBay 品牌測試網域,例如
servbay-angular-dev.servbay.demo
。ServBay 會自動將.servbay.demo
網域解析至本地127.0.0.1
。 - 網站類型 (Website Type): 選擇「反向代理(Reverse Proxy)」。
- 反向代理位址 (Proxy Address): 輸入
127.0.0.1
。 - 反向代理埠號 (Proxy Port): 輸入
ng serve
設定的埠號,例如8585
。
設定完成後,儲存並套用 ServBay 變更。
- 名稱 (Name): 例如
存取開發模式網站: 開啟瀏覽器,訪問您設定的本地網域
https://servbay-angular-dev.servbay.demo
。因 ServBay 會自動為本地網站生成並配置 SSL 憑證(透過 ServBay User CA 或 ServBay Public CA),可直接以 HTTPS 安全訪問您的開發站台。這可以模擬生產環境的 HTTPS,協助您提早發現相關問題。
4. 建置與運行生產版
專案開發完成並準備部署時,需建置優化過的生產版本,產生靜態檔案可供任何靜態檔案伺服器託管。我們將利用 ServBay 靜態網站功能來托管這些檔案。
建置生產版: 在專案根目錄執行以下指令:
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # 或在新版本 Angular CLI 使用: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # 或在新版本 Angular CLI 使用: # ng build
1
2
3
4--prod
參數(新版本 CLI 中已為預設)會啟用生產優化,如 AOT 編譯、壓縮、Tree-shaking 等。建置完後,靜態檔案會在dist/servbay-angular-app
資料夾(子目錄名稱通常為專案名)。設定 ServBay 網站(靜態檔案服務): 開啟 ServBay 控制台,進入「網站」設定。新增網站,將本地網域指向剛建置完的生產版靜態檔案資料夾。
名稱 (Name): 例如
My Angular Production Site
網域 (Domain): 建議用另一 ServBay 品牌測試網域,如
servbay-angular-prod.servbay.demo
。網站類型 (Website Type): 選擇「靜態(Static)」。
網站根目錄 (Website Root Directory): 指向專案建置輸出目錄。一般為:
- macOS:
/Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app
請務必指向包含
index.html
的最終目錄。- macOS:
完成後,儲存並套用 ServBay 更改。
存取生產模式網站: 用瀏覽器瀏覽您設定的本地網域
https://servbay-angular-prod.servbay.demo
。此即為您的 Angular 生產版專案,透過 ServBay 高效能 Web 伺服器(如 Caddy 或 Nginx,視 ServBay 配置而定)以靜態檔案型式提供。同樣地,ServBay 會自動配置 SSL 憑證,保障安全訪問。
ServBay 在 Angular 開發上的優勢
- 整合式環境: 在 ServBay 中可輕鬆安裝管理 Node.js 版本,無須手動設定繁複環境變數。
- 彈性的網站管理: 以直覺介面配置反向代理與靜態檔案服務,迅速切換開發/生產模式。
- 內建 SSL 支援: 本機開發環境自動產生 SSL 憑證,完整模擬生產 HTTPS,避免混合內容警告。
- 多技術堆疊支援: 若您的專案包含後端 API(如 Node.js Express、Python Django/Flask、PHP Laravel/Symfony、Go Gin/Echo、Java Spring Boot 等)或資料庫(MySQL、PostgreSQL、MongoDB、Redis),ServBay 能輕鬆整合,打造完整的全端本機開發環境,並持續支援最新套件與功能。
- 資料備份與恢復: ServBay 提供便捷的配置、網站、資料庫、SSL 憑證備份機制,守護本機開發資料安全。
- 資料庫密碼重置: 內建 MySQL、MariaDB、PostgreSQL 資料庫 root 密碼重置功能,解決常見開發痛點。
常見問題 (FAQ)
- Q: 執行
ng new
或ng serve
時出現command not found: ng
怎麼辦? A: 這通常代表 Angular CLI 未正確安裝或位於 PATH 之外。請確認已全域安裝@angular/cli
(npm install -g @angular/cli
),且 ServBay Node.js 環境已正確設定至 PATH。可嘗試重啟終端機或 ServBay。 - Q:
ng serve
啟動失敗,顯示埠號被占用怎麼辦? A: 代表指定埠(如 8585)已被其它程式使用。可於ng serve
加上--port
指定不同尚未占用的埠號,如ng serve --port 8586
,並更新 ServBay 網站內的反向代理埠號。 - Q: ServBay 網站配置好後,訪問網域無法顯示頁面? A: 請檢查:
- 確認 ServBay 已啟動。
- 開發模式下,確認
ng serve
在運作,且伺服器埠與 ServBay 反向代理設定一致。 - 生產模式時,檢查網站根目錄指向含
index.html
的正確目錄(dist/your-project-name
)。 - 查看 ServBay 的日誌檔案,以獲得詳細錯誤資訊。
- 確保訪問網域名與 ServBay 網站設定完全相符。
- Q: 可否用 ServBay 不同 Web 伺服器(Caddy/Nginx/Apache)託管 Angular 生產版? A: 可以,ServBay 支援 Caddy 或 Nginx(以及 Apache)作為靜態檔案伺服器。設置靜態網站時,ServBay 會自動以目前啟用的 Web 伺服器提供檔案,皆能有效率供應 Angular 生產版。
總結
依照本文件步驟,您應已成功在 ServBay 環境內建立與運行 Angular 專案,學會在開發階段—藉由反向代理以本地網域瀏覽 ng serve
啟動的開發伺服器,以及在生產階段—建置專案並以 ServBay 靜態檔案服務託管。結合 ServBay 的 Node.js 全方位環境、便捷的網站管理與 SSL 支援,可大幅提升本機 Angular 專案的開發體驗與效率。ServBay 對多元技術堆疊的完整支援,也為您的全端開發提供堅實後盾。