VSCode 支持Docker，今天我們要介紹的內(nèi)容是，如何在 VS Code 中配置、部署和調(diào)試 Docker。

Visual Studio Code 64位 v1.99.3 官方最新安裝版

• 類(lèi)型：編程工具
• 大?。?/span>102MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2025-04-17

查看詳情

在閱讀本文之前，首先你需要對(duì) Docker 容器化的知識(shí)有所了解，其次，Docker 的操作，都可以通過(guò)命令行來(lái)實(shí)現(xiàn)。所以今天我要著重介紹的就是：VS Code里如何使用 UI 和命令來(lái)簡(jiǎn)化命令行操作，以及如何對(duì) Docker 容器里的代碼進(jìn)行調(diào)試，這里我會(huì)借助兩個(gè)簡(jiǎn)單的例子來(lái)講解。

安裝Docker插件

VS Code 的 Docker 支持，是由插件來(lái)完成的，這個(gè)插件是 VS Code 官方團(tuán)隊(duì)維護(hù)的，所以它的發(fā)布者是 Microsoft。你可以在市場(chǎng)上點(diǎn)擊下載，也可以直接在 VS Code 插件視圖里搜索 Docker 進(jìn)行安裝。

當(dāng)然了，這個(gè)插件的正確運(yùn)行，離不開(kāi)一個(gè)正確安裝的 Docker 環(huán)境。關(guān)于 Docker 的安裝，還請(qǐng)參考官方文檔。

安裝完Docker插件后，在活動(dòng)欄上，我們就能夠看到一個(gè)集裝箱的圖標(biāo)，點(diǎn)擊它，我們就能夠看到 Docker 相關(guān)的信息了。

在這個(gè)視圖中，我們能夠看到以下信息：

• 當(dāng)前環(huán)境中所有的 image；
• 當(dāng)前環(huán)境中存在的 container；
• 以及 Docker 的倉(cāng)庫(kù)列表。

當(dāng)我們?cè)?image 上右擊時(shí)，能夠看到一系列的操作，比如查看 image 的信息、發(fā)布這個(gè) image、運(yùn)行 image 等。當(dāng)然，這些操作同樣也可以在命令面板中找到。

我們?cè)?containers 上右擊調(diào)出的上下文菜單就要簡(jiǎn)單一些，有三個(gè)命令：刪除 container、重啟 container以及查看這個(gè) container 運(yùn)行的日志。

Dockerfile

除了提供了一個(gè)視圖，Docker 插件還能夠?qū)?Dockerfile 文件進(jìn)行語(yǔ)法高亮。

而且也支持自動(dòng)補(bǔ)全，這樣我們就可以通過(guò)建議列表來(lái)輸入 Dockerfile 中的命令了。

構(gòu)建和運(yùn)行

在書(shū)寫(xiě)了正確的 Dockerfile 之后，我們就可以通過(guò)這個(gè) Dockerfile 來(lái)構(gòu)建 image 了。為了方便理解，下面我們創(chuàng)建一個(gè)新的文件夾，在其中創(chuàng)建一個(gè) Dockerfile。內(nèi)容如下：

FROM alpine:latest
RUN apk --no-cache add \
    htop
CMD [ "htop" ]

這段 Dockerfile 的意思是，我們希望基于 alpine 系統(tǒng)，安裝 htop 這個(gè)包，最后運(yùn)行一個(gè)命令 htop，查看當(dāng)前運(yùn)行的各種進(jìn)程。

docker build

接下來(lái)，我們就可以打開(kāi)命令面板，執(zhí)行 “Docker: Build image” 命令。這個(gè)命令會(huì)打開(kāi)集成終端，然后執(zhí)行 docker build 命令。

docker run

生成了 image 之后，我們就可以通過(guò)這個(gè) image 來(lái)創(chuàng)建 container 了。此時(shí)，我們可以通過(guò) Docker 視圖的上下文菜單來(lái)生成“運(yùn)行 container”，也可以從命令面板中，運(yùn)行 “Docker: Run” 命令。然后 VS Code 就會(huì)詢(xún)問(wèn)我們想要使用哪個(gè) image。

docker run interactive

除了 Run 這個(gè)命令外，另一個(gè)非常有用的命令就是 Run Interactive。通過(guò)這個(gè)命令，我們可以創(chuàng)建并運(yùn)行 container，然后進(jìn)入到這個(gè) container 的 shell 環(huán)境匯總。

在上面的例子里，我們?cè)?container 里運(yùn)行的命令是 htop，也就是實(shí)時(shí)監(jiān)控系統(tǒng)運(yùn)行的情況；當(dāng)我們執(zhí)行了 “Run interactive” 命令，運(yùn)行了 contaienr 并且進(jìn)入到它的 shell 環(huán)境中后，我們就立刻看到了 htop 的運(yùn)行界面。

看到這里你可能已經(jīng)發(fā)現(xiàn)了：對(duì)于命令面板里執(zhí)行每個(gè)命令，VS Code 都會(huì)打開(kāi)集成終端，然后運(yùn)行相對(duì)應(yīng) Docker 腳本。在你還在學(xué)習(xí) Docker 的過(guò)程中，你可以先依賴(lài)于 VS Code 提供的命令，然后試著去理解 VS Code 每個(gè)命令背后的腳本的含義。

而下面這些就需要我們具備一定的 docker 命令行的知識(shí)。

輸出 log

首先，我們對(duì) Dockerfile 按如下稍作修改。

FROM alpine:latest
RUN apk --no-cache add \
    htop
CMD [ "pwd" ]

我們將Dockerfile中，最后一個(gè)配置 CMD 進(jìn)行了修改。那么，從這個(gè) image 生成的 container 運(yùn)行起來(lái)后，會(huì)執(zhí)行 pwd 命令，而非 htop 命令。

修改完 Dockerfile 之后，第一件要做的事情，就是重新構(gòu)建 image。在構(gòu)建這個(gè) image 時(shí)，我們可以覆蓋之前的那個(gè) image，也可以重新起個(gè)名字來(lái)創(chuàng)建一個(gè)新的 image。比如我就給新的 image 取名為”vscode-docker-sample2:latest”。

有了新的 image 后，接下來(lái)就是從 “vscode-docker-sample2:latest” 創(chuàng)建一個(gè)新的 container。

在運(yùn)行 docker run 的時(shí)候，如果你有留意左側(cè)視圖里 “containers” 這個(gè)列表的話(huà)，你會(huì)發(fā)現(xiàn)，一個(gè)名叫 vscode-docker-sample2 的 container 出現(xiàn)了一下然后又消失了。這是為什么呢？

我們來(lái)看一下集成終端，此時(shí)集成終端里運(yùn)行的腳本是：

docker run --rm -d vscode-docker-sample2:latest

這行腳本中有一個(gè)參數(shù) ‘–rm’，它的意思是：如果 container 里的命令執(zhí)行結(jié)束的話(huà)，那就將這個(gè) container 刪除。由于這個(gè) container 中運(yùn)行的命令是 pwd，這個(gè)命令很快就結(jié)束了，所以我們來(lái)不及在視圖中看到并且操作它。如果我們不希望這個(gè) container 被刪除該怎么辦呢？

我們可以選擇手動(dòng)地運(yùn)行如下的腳本：

docker run -d vscode-docker-sample2:latest

這一次，我們創(chuàng)建的 container 運(yùn)行結(jié)束后就不會(huì)被刪除了。也就是此時(shí)我們能夠在左側(cè) Containers 列表里，看到 vscode-docker-sample2:latest (dreamy_…) 這個(gè) container 了。它前面的圖標(biāo)里有一個(gè)紅色的點(diǎn)，這說(shuō)明這個(gè) container 已經(jīng)結(jié)束工作了。

我們可以在這個(gè) container 上右擊調(diào)出上下文菜單，選擇 Show logs 命令。接著，我們就能夠看到這個(gè) container 中 pwd 命令執(zhí)行的結(jié)果了，就是 ‘/’。

Docker Compose

除了 Dockerfile 的支持，Docker 插件還支持 Docker Compose。Docker Compose 是用于配置多個(gè) container 并且將其同時(shí)運(yùn)行的。和 Dockerfile 一樣，我們一樣也可以在 Docker compose file 里獲得自動(dòng)補(bǔ)全和錯(cuò)誤檢查。

這里，讓我們用一個(gè) Node.js 的代碼示例，來(lái)展示 Docker Compose 以及接下來(lái)調(diào)試相關(guān)的內(nèi)容。

首先，讓我們將上文中創(chuàng)建的 Dockerfile 刪除。然后在文件夾下創(chuàng)建一個(gè) JavaScript 文件 index.js，內(nèi)容如下：

function foo() {
    bar("Hello World");
}
function bar(str) {
    console.log(str);
}
foo();

（上面這段 JavaScript 代碼，我們?cè)趯?zhuān)欄前面的內(nèi)容里也經(jīng)常使用，非常簡(jiǎn)單。）

接著，我們就需要為這個(gè) JavaScript 代碼準(zhǔn)備 Docker 相關(guān)的配置了。不過(guò)值得慶幸的是，Docker 插件已經(jīng)為我們提供了 Docker 配置的快捷生成方式了。

自動(dòng)創(chuàng)建 Dockerfile 和 compose 配置

我們只需調(diào)出命令面板，然后搜索執(zhí)行命令 “Docker: Add docker files to workspace”。

接著 VS Code 會(huì)問(wèn)我們想要?jiǎng)?chuàng)建什么環(huán)境的 Docker image。這里我們選擇 Node.js，這樣就可以運(yùn)行上面創(chuàng)建的 index.js 文件了。

命令執(zhí)行后，工作區(qū)內(nèi)多出了三個(gè)文件。第一個(gè)文件是Dockerfile。

FROM node:8.9-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --production --silent && mv node_modules ../
COPY . .
EXPOSE 3000

這個(gè)文件里，指定了 Node.js 8.9 作為基礎(chǔ) image，然后將當(dāng)前工作目錄下的 package.json 、package-lock.json 等都拷貝到 container 中去。接著運(yùn)行 npm install 命令來(lái)安裝代碼運(yùn)行所需的 dependencies。不過(guò)，由于我們只有一個(gè)簡(jiǎn)單的 JavaScript 文件，我們并不需要 npm，所以我們不妨把這個(gè)文件修改為：

FROM node:8.9-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY . .
EXPOSE 3000

第二個(gè)文件是docker-compose.yml 。這個(gè)文件里指定了當(dāng)前只有一個(gè) container 需要被創(chuàng)建并運(yùn)行，而且這個(gè) container 需要使用端口 3000。

version: '2.1'
services:
  vscode-sample:
    image: vscode-sample
    build: .
    environment:
      NODE_ENV: production
    ports:
      - 3000:3000

第三個(gè)文件是docker-compose.debug.yml。顧名思義，它是用于調(diào)試時(shí)的 compose 文件，跟上面的 docker-compose.yml 文件相比，它只多了兩行代碼，也就是：

• 9229:9229，使用 9229 端口；
• command: node –inspect index.js ，在 container 運(yùn)行起來(lái)后，運(yùn)行 node 程序，并且調(diào)試 index.js 文件。

version: '2.1'
services:
  vscode-sample:
    image: vscode-sample
    build: .
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      - 9229:9229
    ## set your startup file here
    command: node --inspect index.js

Compose Up

在有了這三個(gè)配置文件后，要想構(gòu)建并且運(yùn)行 container 就簡(jiǎn)單了。我們不再需要先執(zhí)行 “Docker: build image ” 再運(yùn)行 “Docker: run” 了，而是直接運(yùn)行單個(gè)命令——“Docker: compose up” 即可。

運(yùn)行 “Docker: compose up” 后，我們需要選擇使用哪個(gè) compose 配置文件。只要準(zhǔn)備好了 compose 配置文件，那么在 VS Code 中操作就非常簡(jiǎn)單了，一共只有三個(gè)命令：

• Docker compose up
• Docker compose
• downDocker compose start

如果你想看看 VS Code 是不是真的成功運(yùn)行了 container，你可以從 Docker 的視圖里，找到這個(gè)新創(chuàng)建出來(lái)的 container，查看它的 log。你能夠看到以下結(jié)果：

index.js 在 container 里被成功地運(yùn)行了，而且輸出了 Hello World。

調(diào)試

我們?cè)谇懊娴奈恼吕?，做了這么多的準(zhǔn)備工作，既創(chuàng)建了 JavaScript 文件，又使用了 Docker compose。不過(guò)這些操作，都是為調(diào)試內(nèi)容做的準(zhǔn)備。

這個(gè) JSON 文件里的 configurations 的值就是當(dāng)前文件夾下所有的配置了?，F(xiàn)在我們只有一個(gè)調(diào)試配置，它有四個(gè)屬性：

第一個(gè)是 type，代表著調(diào)試器的類(lèi)型。它決定了 VS Code 會(huì)使用哪個(gè)調(diào)試插件來(lái)調(diào)試代碼。

第二個(gè)是 request，代表著該如何啟動(dòng)調(diào)試器。如果我們的代碼已經(jīng)運(yùn)行起來(lái)了，則可以將它的值設(shè)為 attach，那么我們則是使用調(diào)試器來(lái)調(diào)試這個(gè)已有的代碼進(jìn)程；而如果它的值是 launch，則意味著我們會(huì)使用調(diào)試器直接啟動(dòng)代碼并且調(diào)試。

……

當(dāng) request 的值被設(shè)置為 attach 后，我們就可以將調(diào)試器附著到已經(jīng)處于調(diào)試狀態(tài)的代碼進(jìn)程上了，接著我們就能夠調(diào)試代碼了。而調(diào)試 Docker 中的代碼，就是使用的 attach 這個(gè)方法。我們可以在 Docker container 里以命令行的方式調(diào)試代碼，并且開(kāi)放調(diào)試端口，接著我們讓 VS Code 里的調(diào)試插件附著到這個(gè)端口上即可。這就是在 VS Code 中調(diào)試非本地環(huán)境運(yùn)行的代碼的理論知識(shí)了。下面，我們一起看看怎么做。首先，我們對(duì) docker-compose.debug.yml 做一點(diǎn)修改，將 command 改成如下的值：

command: node --inspect-brk=0.0.0.0:9229 index.js

這個(gè)命令是說(shuō)，將調(diào)試 index.js 文件，然后在第一行停下來(lái)，并且使用 9229 這個(gè)端口進(jìn)行調(diào)試。接著，讓我們運(yùn)行 “Docker: compose up” 將 container 運(yùn)行起來(lái)。

下一步就是調(diào)試代碼了。這里，我們使用的 .vscode/launch.json 文件內(nèi)容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Docker: Attach to Node",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/usr/src/app",
            "protocol": "inspector"
        }
    ]
}

這個(gè)調(diào)試配置有幾個(gè)屬性值得注意：

• request 是 attach，也就是附著到已經(jīng)運(yùn)行的代碼上；
• port 就是調(diào)試的端口；
• localRoot 是本地代碼的根目錄；
• remoteRoot 是指在遠(yuǎn)程運(yùn)行的代碼的根目錄。在我們的例子里，我們已經(jīng)在Dockerfile里指明了工作目錄是 /usr/src/app （不記得的話(huà)還請(qǐng)翻上去看一看），所以此處我們輸入 /usr/src/app。

有了這個(gè)調(diào)試配置后，F5 我們就能夠調(diào)試 Docker container 中的代碼了，并且停到了第一行代碼上。到這里，我們就成功地將一段 JavaScript 代碼運(yùn)行在 Docker 中，并且從 VS Code 里調(diào)試起來(lái)了。

以上就是vscode docker插件使用教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

VSCode如何安裝U3D擴(kuò)展插件? VSCode插件安裝技巧

VSCode怎么搜索并安裝go插件? VSCode中GO插件的安裝方法

vscode中prettier插件怎么使用? vscode中prettier的用法

最新評(píng)論