建立開發容器 (Dev Container)
Visual Studio Code Dev Containers 擴充功能讓您能使用 Docker 容器作為全功能的開發環境。它允許您在容器內開啟任何資料夾或儲存庫,並充分利用 Visual Studio Code 的完整功能集。專案中的 devcontainer.json 檔案會告訴 VS Code 如何存取(或建立)具有定義完善的工具與執行環境堆疊的開發容器。此容器可用於執行應用程式,或提供處理程式碼庫所需的特定工具、程式庫或執行環境。
建立開發容器的路徑
在本文件中,我們將逐步說明如何在 VS Code 中建立開發 (dev) 容器。
- 建立一個
devcontainer.json,用以描述 VS Code 應如何啟動容器以及連線後應執行的動作。 - 透過 Dockerfile 建立並保存對開發容器的變更,例如安裝新軟體。
- 透過 Docker Compose 設定多個容器。
- 進行變更後,請建置您的開發容器以確保變更生效。
執行上述任一步驟後,您將擁有一個功能完整的開發容器;您可以選擇繼續進行本教學的下一步以新增更多功能,或是停止並開始在目前的開發環境中工作。
注意:Dev Containers 擴充功能提供一個 Dev Containers: Add Dev Container Configuration Files... (Dev Containers: 新增開發容器設定檔...) 指令,讓您可以從清單中選擇預先定義好的容器設定。如果您希望直接擁有一個完整的開發容器,而不是逐步建置
devcontainer.json和 Dockerfile,可以直接跳至 自動化建立開發容器。
建立 devcontainer.json 檔案
VS Code 的容器設定儲存在 devcontainer.json 檔案中。此檔案類似於用於偵錯設定的 launch.json 檔案,但它是用於啟動(或附加至)您的開發容器。開發容器設定檔位於 .devcontainer/devcontainer.json,或儲存為專案根目錄下的 .devcontainer.json 檔案(注意開頭的點)。
您可以使用映像檔作為 devcontainer.json 的起點。映像檔就像是一台預先安裝了各種工具和作業系統的迷你磁碟機。您可以從容器登錄檔 (Container Registry) 拉取映像檔,登錄檔是儲存映像檔的儲存庫集合。以下是一個簡單的 devcontainer.json 範例,使用了預先建置好的 TypeScript 和 Node.js VS Code 開發容器映像檔。
{
"image": "mcr.microsoft.com/devcontainers/typescript-node:0-18"
}
您可以修改設定來執行以下操作:
- 在容器中安裝 Git 等額外工具。
- 自動安裝擴充功能。
- 轉發 (Forward) 或發佈額外連接埠。
- 設定執行環境參數。
- 重複使用或擴充您現有的 Docker Compose 設定。
- 新增更多進階容器設定。
以此範例為例,如果您想在容器中安裝 Code Spell Checker 擴充功能並自動轉發 3000 連接埠,您的 devcontainer.json 將會如下所示:
{
"image": "mcr.microsoft.com/devcontainers/typescript-node",
"customizations": {
"vscode": {
"extensions": ["streetsidesoftware.code-spell-checker"]
}
},
"forwardPorts": [3000]
}
注意:根據基礎映像檔中的內容,額外的設定將會自動加入到容器中。例如,我們在上方加入了
streetsidesoftware.code-spell-checker擴充功能,而容器也將包含"dbaeumer.vscode-eslint",因為這是mcr.microsoft.com/devcontainers/typescript-node的一部分。當使用 devcontainer.json 進行預先建置時,這會自動發生,您可以在預先建置章節中閱讀更多資訊。
有了上述的 devcontainer.json,您的開發容器即具備功能,您可以連線並開始在其中進行開發。請試著使用 Dev Containers: Reopen in Container (Dev Containers: 在容器中重新開啟) 指令。

執行此指令後,當 VS Code 重啟時,您將置身於 Node.js 和 TypeScript 開發容器中,連接埠 3000 已轉發,且已安裝 ESLint 擴充功能。連線後,請注意狀態列左側的綠色遠端指示器,顯示您已連線至開發容器。

其他開發容器情境
透過 devcontainer.json 檔案,您可以:
- 啟動一個獨立容器,以隔離您的工具鏈或加速設定過程。
- 使用由映像檔、Dockerfile 或 Docker Compose 所定義的已部署應用程式容器來進行工作。
- 從開發容器內部使用 Docker 或 Kubernetes 來建置並部署您的應用程式。
如果 devcontainer.json 支援的工作流程無法滿足您的需求,您也可以改為附加至已在執行的容器。
提示:想要使用遠端 Docker 主機嗎?請參閱 在遠端 Docker 主機上開發 一文以了解設定詳情。
安裝額外軟體
您可能需要在開發容器中安裝額外軟體。一旦 VS Code 連線至容器,您即可開啟 VS Code 終端機,並對容器內的作業系統執行任何指令。這讓您能夠在 Linux 容器內部安裝新的命令列工具,並啟動資料庫或應用程式服務。
大多數容器映像檔基於 Debian 或 Ubuntu,使用 apt 或 apt-get 指令安裝新套件。您可以從 Ubuntu 文件了解更多關於該指令的資訊。Alpine 映像檔包含類似的 apk 指令,而 CentOS / RHEL / Oracle SE / Fedora 映像檔則使用 yum 或較新的 dnf。
您想安裝的軟體文件通常會提供具體說明,但若您在容器中以 root 身分執行,可能不需要在指令前加上 sudo。
例如
# If running as root
apt-get update
apt-get install <package>
如果您以 root 身分執行,只要容器中已設定 sudo,您就可以安裝軟體。所有預先定義的容器都已設定好 sudo,但 新增非 root 使用者至容器 一文可以協助您為自己的容器進行此設定。無論如何,如果您安裝並設定了 sudo,您將能在以任何使用者(包括 root)身分執行時使用它。
# If sudo is installed and configured
sudo apt-get update
sudo apt-get install <package>
假設您想要安裝 Git。您可以在 VS Code 的整合終端機中執行以下指令:
# If sudo is installed and configured
sudo apt-get update
# Install Git
sudo apt-get install git
您也可以使用 devcontainer.json 中的 "features" 屬性,從預先定義的功能 (Features)集合中安裝工具和語言,甚至安裝您自己的功能。
例如,您可以使用以下方式安裝最新版的 Azure CLI:
"features": {
"ghcr.io/devcontainers/features/azure-cli:1": {
"version": "latest"
}
}
詳細資訊請參閱 開發容器功能規格 (Dev Container Features specification)。
重建 (Rebuild)
編輯 .devcontainer 資料夾的內容時,您需要進行重建以讓變更生效。請使用 Dev Containers: Rebuild Container (Dev Containers: 重建容器) 指令來更新您的容器。
然而,如果您重建容器,您必須重新安裝任何手動安裝過的軟體。為了避免此問題,您可以使用 devcontainer.json 中的 postCreateCommand 屬性,或是自訂一個 Dockerfile。
自訂的 Dockerfile 可以受益於 Docker 的建置快取,並比 postCreateCommand 獲得更快的重建速度。不過,Dockerfile 是在開發容器建立及工作區資料夾掛載之前執行的,因此無法存取工作區資料夾中的檔案。Dockerfile 最適合用於安裝與工作區檔案無關的套件及工具。
postCreateCommand 動作會在容器建立完成後執行,因此您也可以使用此屬性來執行 npm install 等指令,或在原始碼樹狀目錄中執行 shell 指令碼(如果您已將其掛載)。
"postCreateCommand": "bash scripts/install-dependencies.sh"
您也可以使用互動式 bash shell,以便載入您的 .bashrc,自動為您的環境自訂 shell。
"postCreateCommand": "bash -i scripts/install-dependencies.sh"
若未使用 -i 將 shell 置於互動模式,NVM 等工具將無法運作。
"postCreateCommand": "bash -i -c 'nvm install --lts'"
指令必須結束,否則容器將無法啟動。例如,如果您將應用程式啟動指令加入 postCreateCommand,該指令將不會結束。
此外還有一個 postStartCommand,會在容器每次啟動時執行。其參數行為與 postCreateCommand 完全相同,但指令是在啟動時執行,而非建立時。
與其在 devcontainer.json 中直接參照映像檔,或透過 postCreateCommand 或 postStartCommand 安裝軟體,更有效率的做法是使用 Dockerfile。
Dockerfile
Dockerfile 也會存放在 .devcontainer 資料夾中。您可以將 devcontainer.json 中的 image 屬性替換為 dockerfile。
{
"build": { "dockerfile": "Dockerfile" },
"customizations": {
"vscode": {
"extensions": ["dbaeumer.vscode-eslint"]
}
},
"forwardPorts": [3000]
}
當您進行安裝新軟體等變更時,Dockerfile 中的變更即便是開發容器重建後也會保存下來。
在 Dockerfile 中,使用 FROM 指定映像檔,並使用 RUN 指令來安裝任何軟體。您可以使用 && 來串接多個指令。
FROM mcr.microsoft.com/devcontainers/javascript-node:0-18
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
&& apt-get -y install git
注意:
DEBIAN_FRONTEND匯出設定可避免您後續使用容器時出現警告。
自動化建立開發容器
與其手動建立 .devcontainer,選擇命令面板 (F1) 中的 Dev Containers: Add Dev Container Configuration Files... (Dev Containers: 新增開發容器設定檔...) 指令,將會把所需的檔案作為起點加入您的專案,隨後您可根據需求進一步自訂。
此指令讓您可以根據資料夾內容,從清單中選擇預先定義的容器設定。

您可以選擇的預先定義容器設定來自於我們的官方及社群索引,這是開發容器規格 (Dev Container Specification)的一部分。我們在 devcontainers/templates 儲存庫中代管了一套作為規格一部分的模板 (Templates)。您可以瀏覽該儲存庫的 src 資料夾來查看每個模板的內容。
在使用 Dev Containers: Add Dev Container Configuration Files... 完成後,您將會看到可用的功能清單,這些是您可以輕鬆加入開發容器的工具與語言。Dev Containers: Configure Container Features (Dev Containers: 設定容器功能) 則允許您更新現有的設定。

您也可以重複使用現有的 Dockerfile。

現在您有了 devcontainer.json 和 Dockerfile,讓我們來看看編輯容器設定檔的一般流程。
完整設定編輯迴圈
編輯容器設定非常簡單。由於重建容器會將容器「重設」為其初始狀態(您的本機原始碼除外),VS Code 不會在您編輯容器設定檔 (devcontainer.json、Dockerfile 和 docker-compose.yml) 時自動重建。相反地,有幾個指令可以讓您更輕鬆地編輯設定。
以下是使用這些指令的典型編輯迴圈:

- 首先使用命令面板 (F1) 中的 Dev Containers: Add Dev Container Configuration Files...。
- 視需要編輯
.devcontainer資料夾的內容。 - 使用 Dev Containers: Reopen in Container 進行嘗試。
- 如果看到錯誤,請在出現的對話方塊中選擇 Open Folder Locally (在本機開啟資料夾)。
- 視窗重新載入後,建置記錄 (build log) 的副本將出現在主控台中,以便您調查問題。視需要編輯
.devcontainer資料夾的內容。(如果已關閉,您也可以使用 Dev Containers: Show Container Log 指令再次查看記錄。) - 執行 Dev Containers: Rebuild and Reopen in Container (Dev Containers: 重建並在容器中重新開啟),必要時跳至步驟 4。
如果您已有成功的建置,仍可在連線至容器時視需要編輯 .devcontainer 資料夾的內容,然後在命令面板 (F1) 中選擇 Dev Containers: Rebuild Container,使變更生效。
在使用 Dev Containers: Clone Repository in Container Volume (Dev Containers: 將儲存庫複製至容器磁碟區) 指令時,您也可以對容器進行疊代。
- 首先使用命令面板 (F1) 中的 Dev Containers: Clone Repository in Container Volume。如果您輸入的儲存庫內沒有
devcontainer.json,系統會要求您選擇一個起點。 - 視需要編輯
.devcontainer資料夾的內容。 - 使用 Dev Containers: Rebuild Container 進行嘗試。
- 如果看到錯誤,請在出現的對話方塊中選擇 Open in Recovery Container (在修復容器中開啟)。
- 在此「修復容器」中視需要編輯
.devcontainer資料夾的內容。 - 若仍遇到問題,請使用 Dev Containers: Reopen in Container 並跳回步驟 4。
使用 Docker Compose
在某些情況下,單一容器環境是不夠的。假設您想在設定中新增另一個複雜的元件,例如資料庫。您可以嘗試直接將其加入 Dockerfile,或者透過額外的容器來新增。幸運的是,開發容器支援由 Docker Compose 管理的多容器設定。
您可以選擇:
- 使用現有、未修改的
docker-compose.yml中定義的服務。 - 建立一個新的
docker-compose.yml(或複製現有的檔案),用來開發服務。 - 擴充您現有的 Docker Compose 設定來開發服務。
- 使用多個 VS Code 視窗來同時處理多個由 Docker Compose 定義的服務。
注意:使用 Alpine Linux 容器時,某些擴充功能可能因擴充功能內的原生程式碼依賴
glibc而無法運作。
VS Code 可設定為自動啟動 Docker Compose 檔案中特定服務所需的任何容器。如果您已經使用命令列啟動了設定好的容器,VS Code 將改為附加至您指定的執行中服務。這為您的多容器工作流程提供了與上述 Docker 映像檔和 Dockerfile 工作流程相同的快速設定優勢,同時若您偏好,仍然可以使用命令列。
若要快速入門,請在 VS Code 中開啟您要處理的資料夾,並在命令面板 (F1) 中執行 Dev Containers: Add Dev Container Configuration Files... 指令。
系統將提示您從我們的官方及社群索引中選擇預先定義的容器設定,並顯示依您的資料夾內容排序的可篩選清單。從 VS Code UI,您可以選擇下列其中一個模板作為 Docker Compose 的起點:
- 現有的 Docker Compose - 包含一組檔案,您可以將其放入現有的專案中,以重複使用專案根目錄下的
docker-compose.yml檔案。 - Node.js 與 MongoDB - 連線至不同容器中 MongoDB 資料庫的 Node.js 容器。
- Python 與 PostgreSQL - 連線至不同容器中 PostgreSQL 的 Python 容器。
- Docker-Outside-of-Docker Compose - 包含 Docker CLI,並說明如何透過掛載 Docker Unix 通訊端,從開發容器內部存取您的本機 Docker 安裝。
做出選擇後,VS Code 會將適當的 .devcontainer/devcontainer.json (或 .devcontainer.json) 檔案加入該資料夾。
您也可以手動建立設定。若要重複使用未修改的 Docker Compose 檔案,您可以在 .devcontainer/devcontainer.json 中使用 dockerComposeFile 和 service 屬性。
例如
{
"name": "[Optional] Your project name here",
"dockerComposeFile": "../docker-compose.yml",
"service": "the-name-of-the-service-you-want-to-work-with-in-vscode",
"workspaceFolder": "/default/workspace/path/in/container/to/open",
"shutdownAction": "stopCompose"
}
請參閱 devcontainer.json 參考資料,以了解 workspaceFolder 和 shutdownAction 等其他可用屬性的資訊。
將 .devcontainer/devcontainer.json 檔案加入資料夾後,請從命令面板 (F1) 執行 Dev Containers: Reopen in Container 指令(若尚未在容器中,則執行 Dev Containers: Open Folder in Container...)。
如果容器尚未執行,在此範例中 VS Code 將呼叫 docker-compose -f ../docker-compose.yml up。service 屬性表示 VS Code 應連線至 Docker Compose 檔案中的哪個服務,而非哪個服務應被啟動。如果您是手動啟動它們,VS Code 將會附加至您指定的服務。
您也可以建立 Docker Compose 檔案的開發副本。例如,如果您有 .devcontainer/docker-compose.devcontainer.yml,您只需變更 devcontainer.json 中的以下這行:
"dockerComposeFile": "docker-compose.devcontainer.yml"
然而,更好的方法通常是避免複製 Docker Compose 檔案,而是用另一個檔案來擴充它。我們將在下一節介紹如何擴充 Docker Compose 檔案。
若要避免容器因預設的容器指令失敗或結束而關閉,您可以針對 devcontainer.json 中指定的服務修改 Docker Compose 檔案如下:
# Overrides default command so things don't shut down after the process ends.
command: /bin/sh -c "while sleep 1000; do :; done"
若尚未執行,您可以使用 Docker Compose 檔案中的 volumes 清單,將您的本機原始碼「繫結掛載 (bind mount)」至容器中。
例如
volumes:
# Mounts the project folder to '/workspace'. The target path inside the container
# should match what your application expects. In this case, the compose file is
# in a sub-folder, so you will mount '..'. You would then reference this path as the
# 'workspaceFolder' in '.devcontainer/devcontainer.json' so VS Code starts here.
- ..:/workspace:cached
不過,在 Linux 上使用繫結掛載時,您可能需要設定並指定一個非 root 使用者,否則您建立的任何檔案都將屬於 root。詳情請參閱 將非 root 使用者加入您的開發容器。若要讓 VS Code 以不同使用者身分執行,請將此加入 devcontainer.json:
"remoteUser": "your-user-name-here"
如果您希望所有處理序都以不同使用者身分執行,請將此加入 Docker Compose 檔案中對應的服務:
user: your-user-name-here
如果您沒有為開發建立自訂的 Dockerfile,您可能會想在服務的容器內安裝 curl 等額外開發工具。雖然這比將工具加入容器映像檔效率較低,但您仍可將 postCreateCommand 屬性用於此目的。
請參閱 安裝額外軟體 以了解更多安裝軟體的資訊,並參閱 devcontainer.json 參考資料 以了解關於 postCreateCommand 屬性的更多資訊。
如果您的應用程式是使用 C++、Go、Rust 或其他使用基於 ptrace 的偵錯器的語言建置的,您還需要在 Docker Compose 檔案中加入以下設定:
# Required for ptrace-based debuggers like C++, Go, and Rust
cap_add:
- SYS_PTRACE
security_opt:
- seccomp:unconfined
首次建立容器後,若要讓 devcontainer.json、您的 Docker Compose 檔案或相關 Dockerfile 的更新生效,您將需要執行 Dev Containers: Rebuild Container 指令。
在 Docker Compose 中使用 localhost
您可以按照 Docker 文件的說明,將其他服務加入您的 docker-compose.yml 檔案。然而,如果您希望在此服務中執行的任何內容能在容器內的 localhost 上使用,或是想要在本機轉發該服務,請務必將此行加入服務設定中:
# Runs the service on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
network_mode: service:db
您可以在 Node.js 與 MongoDB 開發容器範例中看到 network_mode: service:db 的用法。
擴充用於開發的 Docker Compose 檔案
參照現有的部署 / 非開發導向的 docker-compose.yml 有一些潛在缺點:
例如
- 如果容器的進入點 (entry point) 結束,Docker Compose 會將其關閉。這在您進行偵錯且需要重複重新啟動應用程式的情況下會產生問題。
- 您也可能未將本機檔案系統對應到容器中,或是未向您想要存取的資料庫等其他資源公開連接埠。
- 您可能需要將本機
.ssh資料夾的內容複製到容器中,或是設定上述 使用 Docker Compose 一節提到的 ptrace 選項。
您可以透過多個 docker-compose.yml 檔案來擴充整個 Docker Compose 設定,這些檔案會覆寫或補充主要的檔案,藉此解決這些問題。
例如,請參考這個額外的 .devcontainer/docker-compose.extend.yml 檔案:
version: '3'
services:
your-service-name-here:
volumes:
# Mounts the project folder to '/workspace'. While this file is in .devcontainer,
# mounts are relative to the first file in the list, which is a level up.
- .:/workspace:cached
# [Optional] Required for ptrace-based debuggers like C++, Go, and Rust
cap_add:
- SYS_PTRACE
security_opt:
- seccomp:unconfined
# Overrides default command so things don't shut down after the process ends.
command: /bin/sh -c "while sleep 1000; do :; done"
此檔案亦可視需要提供連接埠對應等額外設定。若要使用它,請以特定順序參照您原有的 docker-compose.yml 檔案,並附加 .devcontainer/docker-compose.extend.yml:
{
"name": "[Optional] Your project name here",
// The order of the files is important since later files override previous ones
"dockerComposeFile": ["../docker-compose.yml", "docker-compose.extend.yml"],
"service": "your-service-name-here",
"workspaceFolder": "/workspace",
"shutdownAction": "stopCompose"
}
VS Code 在啟動任何容器時,就會自動使用這兩個檔案。您也可以按照以下方式從命令列自行啟動它們:
docker-compose -f docker-compose.yml -f .devcontainer/docker-compose.extend.yml up
雖然 postCreateCommand 屬性允許您在容器內安裝額外工具,但在某些情況下,您可能會希望擁有特定的開發用 Dockerfile。您也可以使用相同的方法,參照專為開發用途的自訂 Dockerfile,而無需修改現有的 Docker Compose 檔案。例如,您可以更新 .devcontainer/docker-compose.extend.yml 如下:
version: '3'
services:
your-service-name-here:
# Note that the path of the Dockerfile and context is relative to the *primary*
# docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
# array). The sample below assumes your primary file is in the root of your project.
build:
context: .
dockerfile: .devcontainer/Dockerfile
volumes:
- .:/workspace:cached
command: /bin/sh -c "while sleep 1000; do :; done"
恭喜!您已在 Visual Studio Code 中設定好開發容器。繼續閱讀以了解如何在團隊成員及不同專案間共用容器設定。
將設定檔加入儲存庫 (Repository)
您可以透過將 devcontainer.json 檔案加入原始碼控制 (source control),輕鬆共用為您的專案自訂的開發容器模板。將這些檔案納入儲存庫後,任何在 VS Code 中開啟儲存庫本機副本的人,只要安裝了 Dev Containers 擴充功能,就會自動收到在容器中重新開啟資料夾的提示。

除了讓您的團隊使用一致的環境與工具鏈之外,這也讓新貢獻者或團隊成員能更快進入狀況。首次貢獻者將需要較少的指引,並能減少與環境設定相關的問題。
加入「在開發容器中開啟」的徽章 (badge)
您也可以在儲存庫中加入徽章或連結,讓使用者能輕鬆地以 Dev Containers 開啟您的專案。它會在必要時安裝 Dev Containers 擴充功能,將儲存庫複製至容器磁碟區,並啟動開發容器。
舉例來說,開啟 https://github.com/microsoft/vscode-remote-try-java 的徽章看起來會是這樣:
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-java)
您也可以直接包含一個 open in dev container 連結:
If you already have VS Code and Docker installed, you can click the badge above or [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-java) to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
替代方案:儲存庫設定資料夾
在某些情況下,您可能想為您無法控制的儲存庫建立設定,或是您傾向於不在儲存庫本身包含設定檔。為了處理這種情況,您可以設定本機檔案系統上的位置來儲存設定檔,這些檔案會根據儲存庫自動被載入。
首先,使用您想要用來儲存儲存庫容器設定檔的本機資料夾,更新 Dev > Containers: Repository Configuration Paths (Dev > Containers: 儲存庫設定路徑) 使用者設定。
在設定編輯器中,您可以搜尋「dev containers repo」來找到該設定。

接著,將您的 .devcontainer/devcontainer.json (及其相關檔案) 放置在一個鏡像儲存庫遠端位置的子資料夾中。例如,若您想為 github.com/devcontainers/templates 建立設定,您將建立以下資料夾結構:
📁 github.com
📁 devcontainers
📁 templates
📁 .devcontainer
一旦放置妥當,當使用任何 Dev Containers 指令時,該設定就會自動被採用。進入容器後,您也可以從命令面板 (F1) 選擇 Dev Containers: Open Container Configuration File (Dev Containers: 開啟容器設定檔),以開啟相關的 devcontainer.json 檔案進行進一步編輯。
用於尋找設定的路徑是從 git remote -v 的輸出衍生而來的。如果您嘗試在容器中重新開啟資料夾時找不到設定,請查看命令面板 (F1) 中的 Dev Containers: Show Container Log 記錄,查看已檢查的路徑清單。
後續步驟
- 附加至執行中的容器 (Attach to a Running Container) - 附加至已在執行的 Docker 容器。
- 進階容器 - 尋找進階容器場景的解決方案。
- devcontainer.json 參考 - 查看
devcontainer.json架構。