Mars's Blog

VS Code 使用 Dev Container 建立專案開發環境

Mars Hung
tutorial
文章閱讀量次

說明

  • 容器化不但安裝迅速而且效能高，尤其是在更新版本時更是比vm來得快速，並且可使用設定檔快速佈署環境，達到開發測試全員環境統一的狀況，非常棒。
  • 在本文中記錄如何使用Dev Container建構開發環境。

與 Remote-SSH 的差異：

  • Dev Container：使用 Docker 容器在本機建立隔離的開發環境，適合需要環境一致性的專案
  • Remote-SSH：連線到遠端伺服器進行開發，適合在雲端主機或共用開發機上工作
  • 參考：VS Code遠端開發套件：Remote-SSH

安裝 Dev Container

  • 打開VSCode延伸模組介面
  • 搜尋Dev Containers，安裝並啟動

需已安裝 Docker 環境，可參考 Docker 官方安裝說明

在專案中建立Container開發環境

Node.js 範例

  • git clone 目標專案
  • 打開命令列，執行 >Dev Containers: Add Dev Container Configuration Files
  • 選擇來自docker-compose.yaml
  • 輸入目標 Node.js後選擇版本參數
  • 可在專案根目錄中發現資料夾及檔案
    • .devcontainer
      • devcontainer.json : 容器設定檔
      • docker-compose.yml : docker-compose設定檔，可在devcontainer.json的dockerComposeFile重新指定位置

devcontainer.json 常用設定項目：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "Node.js",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",

  // 容器啟動後執行的指令
  "postCreateCommand": "npm install",

  // 轉發的 port
  "forwardPorts": [3000, 5000],

  // 容器中安裝的 VS Code 擴充套件
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  }
}

Python 範例

  • 執行 >Dev Containers: Add Dev Container Configuration Files
  • 選擇 Python 3
  • 選擇 Python 版本（如：3.11）
  • 可選擇是否安裝 Node.js（依專案需求）

PHP 範例

  • 執行 >Dev Containers: Add Dev Container Configuration Files
  • 選擇 PHP
  • 選擇 PHP 版本（如：8.2）
  • 可選擇是否安裝 Apache/Nginx

在Container中重新啟動開發環境

  • 打開命令列，執行 >Dev Containers: Reopen in Container

可設定快速鍵方便使用，如 macOS: ctrl+cmd+c，Windows/Linux: ctrl+alt+c

在原目錄重新啟動開發環境

  • 打開命令列，執行 >Dev Containers: Reopen Folder Locally

可設定快速鍵方便使用，如 macOS: ctrl+cmd+l，Windows/Linux: ctrl+alt+l

幫開發容器加入VSCode Extension

  • 打開延伸模組介面，找到指定模組。
  • 在模組上按右鍵，選新增至 devcontainer.json

可在Extension清單中點選安裝至 開發容器後，執行 >Rebuild container (命令列)

幫開發容器安裝預設VSCode Extension

  • 打開Setting
  • 搜尋設定項目dev.containers.defaultExtensions
  • 加入要安裝的Extension ID
  • 打開命令列，執行 >Rebuild container

結論

優點

  • 執行環境容器化，在不同電腦也能保持一致環境
  • Host電腦主機免安裝各式程式，保持乾淨
  • 快速切換不同版本的開發環境
  • 團隊成員使用相同的開發環境設定

缺點

  • 跑容器會損失一點效能
  • 需要學習 Docker 與容器概念
  • 第一次啟動需要下載映像檔，較耗時

參考資料

Recents

Archives

Categories

Tags