在 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。
bash
```
npm install -g @angular/cli
```
1
此步會將 ng 命令安裝至系統，可全域使用 Angular CLI。
建立新 Angular 專案： 進入 ServBay 建議的網站根目錄，使用 ng new 指令建立新 Angular 專案。例如，建議命名為 servbay-angular-app。
macOS:
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Windows:
bash
```
cd C:\ServBay\www
ng new servbay-angular-app
```
1
2
CLI 會問您一些設定問題，依提示輸入或選擇：
```
? 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
安裝專案相依套件： 進入新專案目錄，安裝所需本地套件。
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>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:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585
```
1
2
Windows:
bash
```
cd 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 變更。
存取開發模式網站： 開啟瀏覽器，訪問您設定的本地網域 https://servbay-angular-dev.servbay.demo。
因 ServBay 會自動為本地網站生成並配置 SSL 憑證（透過 ServBay User CA 或 ServBay Public CA），可直接以 HTTPS 安全訪問您的開發站台。這可以模擬生產環境的 HTTPS，協助您提早發現相關問題。

4. 建置與運行生產版

專案開發完成並準備部署時，需建置優化過的生產版本，產生靜態檔案可供任何靜態檔案伺服器託管。我們將利用 ServBay 靜態網站功能來托管這些檔案。

建置生產版： 在專案根目錄執行以下指令：
macOS:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# 或在新版本 Angular CLI 使用：
# ng build
```
1
2
3
4
Windows:
bash
```
cd 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 的最終目錄。
完成後，儲存並套用 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 對多元技術堆疊的完整支援，也為您的全端開發提供堅實後盾。

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

概述 ​

什麼是 Angular？ ​

Angular 的核心特色與優勢 ​

前置條件 ​

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

1. 建立 Angular 專案 ​

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

3. 以開發模式運行專案 ​

4. 建置與運行生產版 ​

ServBay 在 Angular 開發上的優勢 ​

常見問題 (FAQ) ​

總結 ​