vscode docker插件有什么用? vscode docker插件使用教程

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的用法
相關(guān)文章
vscode中prettier插件怎么使用? vscode中prettier的用法
vscode中prettier插件怎么使用?vscode中有很多插件,今天我們就來(lái)詳細(xì)介紹一下代碼格式化插件prettier的使用方法,詳細(xì)請(qǐng)看下文介紹2022-02-08VSCode如何顯示縮略圖? VSCode設(shè)置顯示縮略圖的技巧
VSCode如何顯示縮略圖?VSCode是可以顯示預(yù)覽功能,也就是縮略圖,下面我們就來(lái)看看VSCode設(shè)置顯示縮略圖的技巧,詳細(xì)請(qǐng)看下文介紹2022-02-08vscode怎么設(shè)置透明背景? vscode透明背景的實(shí)現(xiàn)方法
vscode怎么設(shè)置透明背景?vscode中想要制作透明背景效果,該怎么制作透明背景呢?下面我們就來(lái)看看vscode透明背景的實(shí)現(xiàn)方法,詳細(xì)請(qǐng)看下文介紹2022-02-08VSCode快速移動(dòng)光標(biāo)的雙快捷鍵? VSCode設(shè)置alt單擊可移動(dòng)光標(biāo)的技巧
VSCode快速移動(dòng)光標(biāo)的雙快捷鍵?VSCode中移動(dòng)光標(biāo)是有快捷鍵的,想要使用alt控制光標(biāo),該怎么設(shè)置呢?下面我們就來(lái)看看VSCode設(shè)置alt單擊可移動(dòng)光標(biāo)的技巧2022-01-22vsCode工具欄怎么固定位置? vsCode工具欄位置固定的技巧
vsCode工具欄怎么固定位置?vsCode的工具欄位置一直亂改,想要固定位置,該怎么操作呢?下面我們就來(lái)看看vsCode工具欄位置固定的技巧,需要的朋友可以參考下2022-01-07vsCode代碼折疊縮進(jìn)線(xiàn)怎么顯示? vsCode設(shè)置折疊縮進(jìn)線(xiàn)的技巧
vsCode代碼折疊縮進(jìn)線(xiàn)怎么顯示?vsCode中的代碼想要顯示縮進(jìn)線(xiàn),該怎么設(shè)置呢?下面我們就來(lái)看看vsCode設(shè)置折疊縮進(jìn)線(xiàn)的技巧,詳細(xì)請(qǐng)看下文介紹2022-01-07vsCode鼠標(biāo)后退向前導(dǎo)航快捷功能怎么設(shè)置?
vsCode鼠標(biāo)后退向前導(dǎo)航快捷功能怎么設(shè)置?vsCode中可以進(jìn)行很多基礎(chǔ)設(shè)置,方便使用,今天我們就來(lái)看看vsCode鼠標(biāo)后退向前導(dǎo)航的設(shè)置方法2022-01-07- vscode插件怎么刪除?vscode中經(jīng)常需要安裝各種插件,很多插件并不常用,想要?jiǎng)h除不常用的插件,該怎么卸載插件呢?下面我們就來(lái)看看完全卸載vscode插件的技巧2021-12-22
vscode怎么編寫(xiě)Maude程序? Maude插件在vscode的用法
vscode怎么編寫(xiě)Maude程序?vscode中想要編寫(xiě)Maude文件,需要使用Maude插件來(lái)實(shí)現(xiàn),下面我們就來(lái)看看Maude插件在vscode的用法2021-12-22VSCode怎么將markdown文件轉(zhuǎn)換成PDF?
VSCode怎么將markdown文件轉(zhuǎn)換成PDF?寫(xiě)代碼習(xí)慣用markdown編輯器了,但是導(dǎo)出來(lái)是md格式,想要轉(zhuǎn)換成pdf文件,該怎么操作呢?下面我們就來(lái)看看詳細(xì)的教程2021-12-17