Skip to content

Dev Container 簡介

Dev Container 官方網站

概要

Visual Studio Code (VSCode) 的 Dev Container 是一項功能，允許開發者在隔離的 Docker 容器環境中開發軟體。這個功能主要透過「Dev Containers」擴充功能來實現，為開發者提供一致且可重現的開發環境 (Runs on my machine)。以下是其主要特點：

  1. 隔離的開發環境：

    • 開發者可以在 Docker 容器中建立一個完全隔離的開發環境。
    • 可以避免本地機器環境設定對開發過程的干擾。

  2. 可重現性：

    • 容器內的開發環境可以透過配置文件 devcontainer.json 來定義，包括所需的工具、擴充功能等。
    • 這使得任何開發者都能快速進入相同的開發環境，提高協作效率。

  3. 支援多種語言和工具：

    • 支援多種程式語言和開發框架。
    • 可以根據需求安裝不同的開發工具和擴充功能。

  4. 整合 VSCode 功能：

    • 在容器中使用 VSCode 的全部功能，包括智能提示、除錯等。
    • 可以透過 VSCode 直接管理 Docker 容器。

  5. 提升協作和部署的便利性：

    • 通過共享 devcontainer.json 文件，團隊成員可以快速同步開發環境。
    • 容器化的環境便於部署到不同的服務上。

使用 Dev Container，開發者可以專注於編碼，而不用擔心環境設置的問題，這大大提高了開發的效率和便利性。

安裝與設定

要在 Windows 和 macOS 上安裝並使用 Visual Studio Code (VSCode) 的 Dev Container 功能，您需要遵循以下步驟：

安裝步驟

  1. 安裝 Visual Studio Code
  2. 安裝 Docker Desktop (將含有 Docker Engine、Docker CLI 和 Docker Compose)
  3. 啟動 Docker Desktop (可關閉開機直接啟動的機制，並避免執行 Kubernetes 功能，以節省資源)
  4. 於 VSCode Extension 安裝 Dev Conatiners

使用方式

要啟用 Dev Container 可略分五種方式：

  1. 與目前執行中的 container 進行連結，並透過 VSCode 進行編輯及除錯。這個方式將不會產生 devcontainer.json 檔案。
  2. 選擇微軟提供的 container image 建立新的 container，並進行開發。
  3. 指定目前的開發目錄，並選擇微軟提供的 container image 建立新的 container，與其連結。
  4. 利用現有的 Dockerfile 或 docker-compose.yml 檔案，建立新的 container。
  5. 編輯 devcontainer.json 檔案，並建立新的 container。

詳細方式請參考 Dev Container 官方網站。以下針對第1 及第 4 種方式進行說明。

連結執行中的 container

下列步驟將建立 Angular 開發環境所需要的 container，並以 Dev Container 與其連結。

  1. 撰寫 Angular 開發環境所需要的 Dockerfile
  2. 透過 Dockerfile 建立 Docker image
  3. 透過 Docker image 啟動 Docker container
  4. 以 VSCode command 選擇 Dev Container: Attach to Running Container... 連結執行中的 container

撰寫 Dockerfile

以下為 Dockerfile 的範例，您可以依據專案需求，選擇對應的 Linux、Node.js 與 Angular 版本。

# 使用 ubuntu:noble-20240114 作為基底映像檔
FROM ubuntu:noble-20240114

# 設定環境變數以避免在安裝過程中出現問題
ENV DEBIAN_FRONTEND=noninteractive

# 更新套件列表並安裝 curl（用於下載 Node.js）
RUN apt-get update && apt-get install -y curl \
    && apt-get clean

# 安裝 Node.js
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
RUN apt-get install -y nodejs \
    && apt-get clean

# 確認 Node.js 安裝正確
RUN node --version

# 安裝 Angular CLI
RUN npm install -g @angular/cli@17.1.1

# 確認 Angular CLI 安裝正確
RUN ng version

# 建立應用程式目錄
RUN mkdir /app

# 設定工作目錄到 /app
WORKDIR /app

# 預設命令：啟動一個 bash shell
CMD ["bash"]

建立 Docker image

在 Dockerfile 所在的目錄下，執行以下指令，建立 Docker image。

docker build -t angular-17 .

參數 -t 指定新建立的 image 名稱，這裡設定為 angular-17，您可以自行設定。

啟動 Docker container

在 Dockerfile 所在的目錄下，執行以下指令，啟動 Docker container。將 container 中的 /app 目錄掛載到本地目錄，以便於編輯程式碼。

在 Windows 環境下 

docker run -it -d -v ${PWD}:/app -p 4200:4200 --name angular-app angular-17

在 macOS 環境下 

docker run -it -d -v $(PWD):/app -p 4200:4200 --name angular-app angular-17

連結執行中的 container

在 VSCode 中，按下 F1 鍵，輸入 Dev Containers: Attach to Running Container...，便會出現執行中的 container，選擇剛剛啟動的 angular-app，便會連結到該 container。

相關 Docker 指令

在 Container 中開發 Angular 應用程式時，因日常開關機，將會需要下列指令來協助管理 Container。例如電腦關機時，Container 也會停止運作，因此需要重新啟動 Container。

啟動 Container

docker start angular-app

停止 Container

docker stop angular-app

進入 Container Bash

docker exec -it angular-app bash

刪除 Container

docker rm angular-app

使用 docker-compose.yml 建立

利用 Dockerfile 與 docker-compose.yml 檔案，可以產生 devcontainer.json，使得開發環境的建置更加便利。以下是一個 docker-compose.yml 的範例：

version: '3.8'
services:
  angular-app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    ports:
      - 4200:4200
    command: bash

接著可以透過 VSCode command 選擇 dev containers: Add Development Container Configuration Files... 選擇 docker compose 來產生 devcontainer.json 檔案。

使用者也可以依據 Dockerfile 來建立 devcontainer.json 檔案，但有關 volumes 與 ports 的設定，則需要自行加入 devcontainer.json 檔案中。