在 ServBay 中建立與運行 Angular 專案

概述

本文檔旨在為您說明如何在 ServBay 本地 Web 開發環境中建立、設定並運行一個 Angular 專案。我們將善用 ServBay 提供的強大 Node.js 環境及彈性的網站（前稱「主機」）管理功能，輕鬆配置開發與正式環境，並確保能透過自訂網域與 SSL 憑證進行安全存取。ServBay 整合多種開發所需套件（前稱「服務」），包含 Node.js、PHP、Python、Go、Java、資料庫等，是全方位全端本地開發的理想選擇。

什麼是 Angular？

Angular 是由 Google 維護的開源前端框架，專門用於打造高效能、動態的單頁應用程式（SPA）。其以 TypeScript 架構，提供完整的開發工具組與結構化方式，尤其適合建構大型且複雜的企業級應用。

Angular 的核心特性與優勢

元件化架構： 透過可重複利用的元件組建使用者介面，提高程式碼可維護性與擴展性。
支援 TypeScript： 提供靜態型別檢查與強大的物件導向特性，提升程式品質與開發效率。
依賴注入： 使元件更加易於測試與依賴管理。
強大的 CLI（命令列介面）： 簡化專案建立、產生元件、服務、模組暨編譯、測試等開發流程。
內建解決方案： 提供路由、表單處理、HTTP 客戶端等常用功能的內建模組。
效能最佳化： 支援 AOT（預先編譯）、Tree-shaking 等技術，全面提升應用效能。

結合 Angular 與 ServBay 提供的穩定環境，開發者能更專注在商業邏輯實現。

前置條件

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

安裝 ServBay： 您已在 macOS 上成功安裝並啟動 ServBay。
啟用 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。
bash
```
npm install -g @angular/cli
```
1
這會將 ng 命令安裝至系統，可供全域使用 Angular CLI。
建立新 Angular 專案： 切換到 ServBay 建議的網站根目錄 /Applications/ServBay/www，再執行 ng new 指令建立新 Angular 專案。我們建議以帶 ServBay 標籤的名稱，如 servbay-angular-app。
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Angular CLI 會詢問一些專案設定問題。請依提示輸入或選擇您的偏好：
```
? Would you like to add Angular routing? Yes  # 是否要加入路由功能，建議選 Yes
? Which stylesheet format would you like to use? CSS # 欲使用的樣式表格式，如 CSS
```
1
2
等待執行完成，CLI 會於 /Applications/ServBay/www 建立 servbay-angular-app 新資料夾，內含基本架構與檔案。
安裝專案相依套件： 進入新專案目錄，安裝本地相依套件。
bash
```
cd servbay-angular-app
npm install
```
1
2
npm 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>這是您的 Angular 應用正在 ServBay 下執行！</p>
</div>
```
1
2
3
4

3. 於開發模式下運作專案

開發期間，通常會用 Angular CLI 提供的開發伺服器（ng serve），其支援熱重載，便於除錯。接著利用 ServBay 反向代理功能，讓本地域名可存取該伺服器。

啟動 Angular 開發伺服器： 在專案根目錄（/Applications/ServBay/www/servbay-angular-app），執行下列命令啟動開發伺服器。指定如 8585 的自訂端口，以避免與 ServBay 預設 Web 伺服器衝突。
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585
```
1
2
此命令將編譯您的 Angular 專案，並以 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。
完成後請儲存並套用更改。
存取開發模式網站： 於瀏覽器輸入您所設定的本地域名，例如 https://servbay-angular-dev.servbay.demo。
由於經 ServBay 存取，且預設即支援本地網站自動生成配置 SSL 憑證（透過 ServBay User CA 或 ServBay Public CA），可直接透過 HTTPS 安全瀏覽，這將完美模擬正式環境，有助於提早發現問題。

4. 建構與運行正式版

當您的 Angular 專案開發完成、準備佈署時，需要編譯成最佳化的正式版靜態檔案，便於任何靜態服務器託管。我們將利用 ServBay 的靜態網站功能來完成。

建構正式版： 在專案根目錄（/Applications/ServBay/www/servbay-angular-app）內，執行下列命令產生正式版：
bash
```
cd /Applications/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）： 指定專案建構輸出目錄，通常為 /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app，請務必指向包含 index.html 的最終資料夾。
設定完成後請儲存並套用。
存取正式模式網站： 開啟瀏覽器，輸入已設定的本地域名 https://servbay-angular-prod.servbay.demo。
您將看到 Angular 專案正式版，透過 ServBay 的高效 Web 伺服器（如 Caddy、Nginx，取決於 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 伺服器託管新站點，各伺服器皆能高效服務靜態檔案。

總結

依照本指南，您已能順利於 ServBay 環境建立並運行 Angular 專案，掌握開發階段透過本地域名訪問 ng serve 開發伺服器的反向代理寫法，以及正式階段如何建構專案並設置靜態網站服務。配合 ServBay 優質的 Node.js 環境、易用的網站管理、與預設 SSL 支援，將大幅提升本地 Angular 專案開發效率與體驗。ServBay 全方位技術棧整合，亦為您的全端開發提供堅實基礎。

在 ServBay 中建立與運行 Angular 專案 ​

概述 ​

什麼是 Angular？ ​

Angular 的核心特性與優勢 ​

前置條件 ​

使用 ServBay 設定與執行 Angular 專案 ​

1. 建立 Angular 專案 ​

2. 修改 Angular 專案首頁內容（選擇性） ​

3. 於開發模式下運作專案 ​

4. 建構與運行正式版 ​

ServBay 在 Angular 開發的優勢 ​

常見問題（FAQ） ​

總結 ​