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

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 進行安裝。
當(dāng)然了,這個插件的正確運行,離不開一個正確安裝的 Docker 環(huán)境。關(guān)于 Docker 的安裝,還請參考官方文檔。
安裝完Docker插件后,在活動欄上,我們就能夠看到一個集裝箱的圖標(biāo),點擊它,我們就能夠看到 Docker 相關(guān)的信息了。
在這個視圖中,我們能夠看到以下信息:
- 當(dāng)前環(huán)境中所有的 image;
- 當(dāng)前環(huán)境中存在的 container;
- 以及 Docker 的倉庫列表。
當(dāng)我們在 image 上右擊時,能夠看到一系列的操作,比如查看 image 的信息、發(fā)布這個 image、運行 image 等。當(dāng)然,這些操作同樣也可以在命令面板中找到。
我們在 containers 上右擊調(diào)出的上下文菜單就要簡單一些,有三個命令:刪除 container、重啟 container以及查看這個 container 運行的日志。
Dockerfile
除了提供了一個視圖,Docker 插件還能夠?qū)?Dockerfile 文件進行語法高亮。
而且也支持自動補全,這樣我們就可以通過建議列表來輸入 Dockerfile 中的命令了。
構(gòu)建和運行
在書寫了正確的 Dockerfile 之后,我們就可以通過這個 Dockerfile 來構(gòu)建 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,查看當(dāng)前運行的各種進程。
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)運行的情況;當(dāng)我們執(zhí)行了 “Run interactive” 命令,運行了 contaienr 并且進入到它的 shell 環(huán)境中后,我們就立刻看到了 htop 的運行界面。
看到這里你可能已經(jīng)發(fā)現(xiàn)了:對于命令面板里執(zhí)行每個命令,VS Code 都會打開集成終端,然后運行相對應(yīng) Docker 腳本。在你還在學(xué)習(xí) 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 之后,第一件要做的事情,就是重新構(gòu)建 image。在構(gòu)建這個 image 時,我們可以覆蓋之前的那個 image,也可以重新起個名字來創(chuàng)建一個新的 image。比如我就給新的 image 取名為”vscode-docker-sample2:latest”。
有了新的 image 后,接下來就是從 “vscode-docker-sample2:latest” 創(chuàng)建一個新的 container。
在運行 docker run 的時候,如果你有留意左側(cè)視圖里 “containers” 這個列表的話,你會發(fā)現(xiàn),一個名叫 vscode-docker-sample2 的 container 出現(xiàn)了一下然后又消失了。這是為什么呢?
我們來看一下集成終端,此時集成終端里運行的腳本是:
docker run --rm -d vscode-docker-sample2:latest
這行腳本中有一個參數(shù) ‘–rm’,它的意思是:如果 container 里的命令執(zhí)行結(jié)束的話,那就將這個 container 刪除。由于這個 container 中運行的命令是 pwd,這個命令很快就結(jié)束了,所以我們來不及在視圖中看到并且操作它。如果我們不希望這個 container 被刪除該怎么辦呢?
我們可以選擇手動地運行如下的腳本:
docker run -d vscode-docker-sample2:latest
這一次,我們創(chuàng)建的 container 運行結(jié)束后就不會被刪除了。也就是此時我們能夠在左側(cè) Containers 列表里,看到 vscode-docker-sample2:latest (dreamy_…) 這個 container 了。它前面的圖標(biāo)里有一個紅色的點,這說明這個 container 已經(jīng)結(jié)束工作了。
我們可以在這個 container 上右擊調(diào)出上下文菜單,選擇 Show logs 命令。接著,我們就能夠看到這個 container 中 pwd 命令執(zhí)行的結(jié)果了,就是 ‘/’。
Docker Compose
除了 Dockerfile 的支持,Docker 插件還支持 Docker Compose。Docker Compose 是用于配置多個 container 并且將其同時運行的。和 Dockerfile 一樣,我們一樣也可以在 Docker compose file 里獲得自動補全和錯誤檢查。
這里,讓我們用一個 Node.js 的代碼示例,來展示 Docker Compose 以及接下來調(diào)試相關(guān)的內(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 代碼,我們在專欄前面的內(nèi)容里也經(jīng)常使用,非常簡單。)
接著,我們就需要為這個 JavaScript 代碼準(zhǔn)備 Docker 相關(guān)的配置了。不過值得慶幸的是,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
這個文件里,指定了 Node.js 8.9 作為基礎(chǔ) image,然后將當(dāng)前工作目錄下的 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
第二個文件是docker-compose.yml 。這個文件里指定了當(dāng)前只有一個 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
在有了這三個配置文件后,要想構(gòu)建并且運行 container 就簡單了。我們不再需要先執(zhí)行 “Docker: build image ” 再運行 “Docker: run” 了,而是直接運行單個命令——“Docker: compose up” 即可。
運行 “Docker: compose up” 后,我們需要選擇使用哪個 compose 配置文件。只要準(zhǔn)備好了 compose 配置文件,那么在 VS Code 中操作就非常簡單了,一共只有三個命令:
- Docker compose up
- Docker compose
- downDocker compose start
如果你想看看 VS Code 是不是真的成功運行了 container,你可以從 Docker 的視圖里,找到這個新創(chuàng)建出來的 container,查看它的 log。你能夠看到以下結(jié)果:
index.js 在 container 里被成功地運行了,而且輸出了 Hello World。
調(diào)試
我們在前面的文章里,做了這么多的準(zhǔn)備工作,既創(chuàng)建了 JavaScript 文件,又使用了 Docker compose。不過這些操作,都是為調(diào)試內(nèi)容做的準(zhǔn)備。
這個 JSON 文件里的 configurations 的值就是當(dāng)前文件夾下所有的配置了?,F(xiàn)在我們只有一個調(diào)試配置,它有四個屬性:
第一個是 type,代表著調(diào)試器的類型。它決定了 VS Code 會使用哪個調(diào)試插件來調(diào)試代碼。
第二個是 request,代表著該如何啟動調(diào)試器。如果我們的代碼已經(jīng)運行起來了,則可以將它的值設(shè)為 attach,那么我們則是使用調(diào)試器來調(diào)試這個已有的代碼進程;而如果它的值是 launch,則意味著我們會使用調(diào)試器直接啟動代碼并且調(diào)試。
……
當(dāng) request 的值被設(shè)置為 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" } ] }
這個調(diào)試配置有幾個屬性值得注意:
- request 是 attach,也就是附著到已經(jīng)運行的代碼上;
- port 就是調(diào)試的端口;
- localRoot 是本地代碼的根目錄;
- remoteRoot 是指在遠程運行的代碼的根目錄。在我們的例子里,我們已經(jīng)在Dockerfile里指明了工作目錄是 /usr/src/app (不記得的話還請翻上去看一看),所以此處我們輸入 /usr/src/app。
有了這個調(diào)試配置后,F5 我們就能夠調(diào)試 Docker container 中的代碼了,并且停到了第一行代碼上。到這里,我們就成功地將一段 JavaScript 代碼運行在 Docker 中,并且從 VS Code 里調(diào)試起來了。
以上就是vscode docker插件使用教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
VSCode如何安裝U3D擴展插件? VSCode插件安裝技巧
VSCode怎么搜索并安裝go插件? VSCode中GO插件的安裝方法
vscode中prettier插件怎么使用? vscode中prettier的用法
相關(guān)文章
vscode中prettier插件怎么使用? vscode中prettier的用法
vscode中prettier插件怎么使用?vscode中有很多插件,今天我們就來詳細介紹一下代碼格式化插件prettier的使用方法,詳細請看下文介紹2022-02-08VSCode如何顯示縮略圖? VSCode設(shè)置顯示縮略圖的技巧
VSCode如何顯示縮略圖?VSCode是可以顯示預(yù)覽功能,也就是縮略圖,下面我們就來看看VSCode設(shè)置顯示縮略圖的技巧,詳細請看下文介紹2022-02-08vscode怎么設(shè)置透明背景? vscode透明背景的實現(xiàn)方法
vscode怎么設(shè)置透明背景?vscode中想要制作透明背景效果,該怎么制作透明背景呢?下面我們就來看看vscode透明背景的實現(xiàn)方法,詳細請看下文介紹2022-02-08VSCode快速移動光標(biāo)的雙快捷鍵? VSCode設(shè)置alt單擊可移動光標(biāo)的技巧
VSCode快速移動光標(biāo)的雙快捷鍵?VSCode中移動光標(biāo)是有快捷鍵的,想要使用alt控制光標(biāo),該怎么設(shè)置呢?下面我們就來看看VSCode設(shè)置alt單擊可移動光標(biāo)的技巧2022-01-22vsCode工具欄怎么固定位置? vsCode工具欄位置固定的技巧
vsCode工具欄怎么固定位置?vsCode的工具欄位置一直亂改,想要固定位置,該怎么操作呢?下面我們就來看看vsCode工具欄位置固定的技巧,需要的朋友可以參考下2022-01-07vsCode代碼折疊縮進線怎么顯示? vsCode設(shè)置折疊縮進線的技巧
vsCode代碼折疊縮進線怎么顯示?vsCode中的代碼想要顯示縮進線,該怎么設(shè)置呢?下面我們就來看看vsCode設(shè)置折疊縮進線的技巧,詳細請看下文介紹2022-01-07vsCode鼠標(biāo)后退向前導(dǎo)航快捷功能怎么設(shè)置?
vsCode鼠標(biāo)后退向前導(dǎo)航快捷功能怎么設(shè)置?vsCode中可以進行很多基礎(chǔ)設(shè)置,方便使用,今天我們就來看看vsCode鼠標(biāo)后退向前導(dǎo)航的設(shè)置方法2022-01-07- vscode插件怎么刪除?vscode中經(jīng)常需要安裝各種插件,很多插件并不常用,想要刪除不常用的插件,該怎么卸載插件呢?下面我們就來看看完全卸載vscode插件的技巧2021-12-22
vscode怎么編寫Maude程序? Maude插件在vscode的用法
vscode怎么編寫Maude程序?vscode中想要編寫Maude文件,需要使用Maude插件來實現(xiàn),下面我們就來看看Maude插件在vscode的用法2021-12-22VSCode怎么將markdown文件轉(zhuǎn)換成PDF?
VSCode怎么將markdown文件轉(zhuǎn)換成PDF?寫代碼習(xí)慣用markdown編輯器了,但是導(dǎo)出來是md格式,想要轉(zhuǎn)換成pdf文件,該怎么操作呢?下面我們就來看看詳細的教程2021-12-17