vscode 支持Docker

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

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

安裝Docker插件

VS Code 的 Docker 支持，是由插件來完成的，這個插件是 VS Code 官方團隊維護的，所以它的發(fā)布者是 Microsoft。你可以在市場上點擊下載，也可以直接在 VS Code 插件視圖里搜索 Docker 進行安裝。

當然了，這個插件的正確運行，離不開一個正確安裝的 Docker 環(huán)境。關于 Docker 的安裝，還請參考官方文檔。

安裝完Docker插件后，在活動欄上，我們就能夠看到一個集裝箱的圖標，點擊它，我們就能夠看到 Docker 相關的信息了。

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

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

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

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

Dockerfile

除了提供了一個視圖，Docker 插件還能夠?qū)?Dockerfile 文件進行語法高亮。

而且也支持自動補全，這樣我們就可以通過建議列表來輸入 Dockerfile 中的命令了。

構建和運行

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

FROM alpine:latest

RUN apk --no-cache add \
    htop

CMD [ "htop" ]

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

docker build

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

docker run

生成了 image 之后，我們就可以通過這個 image 來創(chuàng)建 container 了。此時，我們可以通過 Docker 視圖的上下文菜單來生成“運行 container”，也可以從命令面板中，運行 “Docker: Run” 命令。然后 VS Code 就會詢問我們想要使用哪個 image。

docker run interactive

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

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

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

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

輸出 log

首先，我們對 Dockerfile 按如下稍作修改。

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

我們將Dockerfile中，最后一個配置 CMD 進行了修改。那么，從這個 image 生成的 container 運行起來后，會執(zhí)行 pwd 命令，而非 htop 命令。

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

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

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

我們來看一下集成終端，此時集成終端里運行的腳本是：

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

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

我們可以選擇手動地運行如下的腳本：

docker run -d vscode-docker-sample2:latest

這一次，我們創(chuàng)建的 container 運行結束后就不會被刪除了。也就是此時我們能夠在左側 Containers 列表里，看到 vscode-docker-sample2:latest (dreamy_…) 這個 container 了。它前面的圖標里有一個紅色的點，這說明這個 container 已經(jīng)結束工作了。

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

Docker Compose

除了 Dockerfile 的支持，Docker 插件還支持 Docker Compose。Docker Compose 是用于配置多個 container 并且將其同時運行的。和 Dockerfile 一樣，我們一樣也可以在 Docker compose file 里獲得自動補全和錯誤檢查。

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

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

function foo() {
    bar("Hello World");
}

function bar(str) {
    console.log(str);
}

foo();

JavaScript

（上面這段 JavaScript 代碼，我們在專欄前面的內(nèi)容里也經(jīng)常使用，非常簡單。）

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

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

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

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

命令執(zhí)行后，工作區(qū)內(nèi)多出了三個文件。第一個文件是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

Shell

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

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

Shell

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

version: '2.1'

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

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

• 9229:9229，使用 9229 端口；
• command: node –inspect index.js ，在 container 運行起來后，運行 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

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

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

• Docker compose up
• Docker compose down
• Docker compose start

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

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

調(diào)試

我們在前面的文章里，做了這么多的準備工作，既創(chuàng)建了 JavaScript 文件，又使用了 Docker compose。不過這些操作，都是為調(diào)試內(nèi)容做的準備。

這個 JSON 文件里的 configurations 的值就是當前文件夾下所有的配置了?，F(xiàn)在我們只有一個調(diào)試配置，它有四個屬性：第一個是 type，代表著調(diào)試器的類型。它決定了 VS Code 會使用哪個調(diào)試插件來調(diào)試代碼。第二個是 request，代表著該如何啟動調(diào)試器。如果我們的代碼已經(jīng)運行起來了，則可以將它的值設為 attach，那么我們則是使用調(diào)試器來調(diào)試這個已有的代碼進程；而如果它的值是 launch，則意味著我們會使用調(diào)試器直接啟動代碼并且調(diào)試?！?/blockquote>

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

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

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

下一步就是調(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"
        }
    ]
}

JSON

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

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

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