如何在本機電腦上運行多個Angular開發環境？

文章目錄

Angular 版本變化快速，該如何在本機電腦上安裝多種版本的 Angular 進行開發呢？

使用 Docker 容器化技術，運行多台電腦分身，即可在這些分身電腦上運行不同版本的專案。

1. 撰寫 Dockerfile

設定 Dockerfile 安裝 Angular 開發環境中所有需要的套件，包含 Node.js 與 Angular CLI。

以最新版本的 Node.js，安裝最新版本的 Angular CLI，未來的每次以 Dockerfile 建置 Image，皆會安裝最新版本套件。

FROM node:current-alpine

EXPOSE 4200 49153

RUN chown -R node:node /usr/local/lib/node_modules \
    && chown -R node:node /usr/local/bin

USER node

RUN npm install -g @angular/cli
  1. FROM node:current-alpine：以 Node.js 作為基礎映像，並指定特定版本。以current取得最新版本，也可至 Docker Hub 上取得適合版本。
  2. EXPOSE 4200 49153：對外開放容器內的兩個埠號。通常在 4200 上運行 Angular 應用程式；在 49153 上熱重載應用程式。
  3. RUN chown -R node:node /usr/local/lib/node_modules && chown -R node:node /usr/local/bin：改變兩目錄的所有權為擁有 node 身分的使用者，避免後續全局安裝權限問題。
  4. USER node：將使用者的身分變更為 node，確保後續執行的任何命令都是以 node 使用者而不是 root 使用者運行。
  5. RUN npm install -g @angular/cli：使用 npm 全局安裝最新版本 Angular CLI，整個容器即可使用ng命令構建 Angular 專案。

2. 建置映像檔（Image）

透過 Dockerfile 建置含有 Angular 開發環境的 Image。

docker build --rm -t angular:latest-version .
  • docker build：透過 Dockerfile 建至Image。
  • --rm：成功建置後，刪除建置過程中建立的臨時容器，來保持系統乾淨。
  • -t angular:latest-version：將 Image 加上標籤（tag）以便辨識，格式為儲存庫名稱:可選標籤。修改 latest-version 以 Angular 最新版本命名，方便未來使用特定版本的 Image 運行新容器。
  • .：在當前目錄執行指令。須注意 Dockerfile 必須放在當前執行指令的目錄下。

3. 運行容器（Conainer）

透過 Image 運行裝有 Angular 開發環境的容器。

# Windows 環境
docker run -d -it -p 4200:4200/tcp -p 49153:49153/tcp -v %cd%:"/var/sandbox" --name myproject angular:latest-version
# Unix 環境
docker run -d -it -p 4200:4200/tcp -p 49153:49153/tcp -v ${PWD}:"/var/sandbox" --name myproject angular:latest-version
  • docker run：以 Image 創建並運行新容器。
  • -d：讓容器在背景執行。
  • -it：以互動模式連線至容器中的終端對話視窗。
  • -p 4200:4200/tcp -p 49153:49153/tcp：對外開放容器內的兩個埠號與本機上的埠號對應。埠號對應格式為本機:容器。
  • -v %cd%:"/var/sandbox" -v ${PWD}"/var/sandbox""：將本機端的工作目錄掛載在容器內特定目錄下。掛載格式為本機路徑:容器路徑。
  • --name myproject：命名容器。
  • angular:latest-version：以 Image tag 指定創建容器要使用的映像檔。

4. 建立 Angular 專案

在 Docker 中使用終端對話視窗建立 Angular 專案。

docker exec -u root -it myproject /bin/sh

cd var/sandbox

ng new myproject-fe
...

cd myproject-fe

ng serve --watch --host 0.0.0.0 --poll 1000
  • docker exec -u root -it myproject /bin/sh： 以 root 權限執行容器內的 shell，並開啟互動模式。
  • cd var/sandbox：將工作目錄切換到容器內掛載本機目錄的目錄下。
  • ng new myproject-fe：使用 Angular CLI 建立新專案。
  • cd myproject-fe：切換到 Angular 專案下。
  • ng serve --watch --host 0.0.0.0 --poll 1000：運行 Angular 專案，監聽容器內預設IP 0.0.0.0。

5. 開啟 Angular 專案

  1. 打開本機電腦的瀏覽器輸入 http://localhost:4200 成功顯示網頁。
  2. 以 VS Code 打開本機電腦中的專案資料夾即可編輯，並確認 package.json 中 Angular 為最新版本。