文章参考自极客时间,玩转VS Code,禁止任何形式转载,私自转载自行承担法律责任。

1. 安装

VS CodeDocker支持是由插件来完成的,并且这个插件是VS Code官方团队维护的,所以它的发布者是Microsoft。可以在市场上点击下载,也可以直接在VS Code插件视图里搜索Docker进行安装。当然了,这个插件的正确运行,离不开一个正确安装的Docker环境,也就是当前机器已经正确安装并可以使用Docker

安装完Docker插件后,在活动栏上,能够看到一个集装箱的图标,点击它就能够看到Docker相关的信息了。

屏幕快照 2021-11-14 16.25.48.png

在这个视图中,能够看到以下信息:

屏幕快照 2021-11-14 16.28.54.png

当前环境中所有的image,当前环境中存在的container,以及Docker的仓库列表。

右击时image能够看到一系列的操作,比如查看image信息、发布image、运行image等。当然,这些操作同样也可以在命令面板中找到。

containers上右击调出的上下文菜单有三个命令: 删除container、重启container以及查看container运行日志。

除了提供了一个视图Docker插件还能够对Dockerfile文件进行语法高亮。而且也支持自动补全,这样就可以通过建议列表来输入Dockerfile中的命令了。

2. 构建和运行

书写了正确的Dockerfile后,就可以通过Dockerfile来构建image了。为了方便理解,创建一个新的文件夹,在其中创建Dockerfile

FROM alpine:latest

RUN apk --no-cache add \ 
    htop

CMD [ "htop" ]

这段Dockerfile的意思是,希望基于alpine系统安装htop包,最后运行htop命令 ,查看当前运行的各种进程。

1. docker build

可以打开命令面板,执行Docker: Build image命令。这个命令会打开集成终端,然后执行docker build命令。

2. docker run

生成了image之后,可以通过image来创建container了。此时,可以通过Docker视图的上下文菜单来生成运行 container,也可以从命令面板中,运行Docker: Run命令。然后VS Code就会询问使用哪个image

3. docker run interactive

除了Run这个命令外,另一个非常有用的命令就是Run Interactive。可以创建并运行container,然后进入到这个containershell环境。

在上面的例子里container运行的命令是htop,也就是实时监控系统运行的情况,执行了Run interactive命令,运行了contaienr并且进入到它的shell环境中后,就立刻看到了htop的运行界面。

对于命令面板里执行每个命令VS Code都会打开集成终端,然后运行相对应Docker脚本。可以先依赖于VS Code提供的命令,试着理解VS Code每个命令背后的脚本的含义。这就需要具备一定的docker命令行的知识。

4. 输出 log

Dockerfile按如下稍作修改

FROM alpine:latest

RUN apk --no-cache add \

    htop

CMD [ "pwd" ]

Dockerfile中最后一个配置CMD进行了修改。这个image生成的container运行起来后会执行pwd命令,而非htop命令。

修改完Dockerfile之后,第一件要做的事情,就是重新构建image。在构建image时,可以覆盖之前的image,也可以重新起个名字来创建新的image。比如新的image取名为vscode-docker-sample2:latest

有了新的image后,接下来就是从vscode-docker-sample2:latest创建一个新的container

在运行docker run的时候,如果留意左侧视图containers这个列表的话,会发现vscode-docker-sample2container出现了一下然后又消失了。这是为什么呢?来看一下集成终端,此时集成终端里运行的脚本是。

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

这行脚本中有一个参数–rm,意思是如果container里的命令执行结束的话,就将这个container删除。由于这个container中运行的命令是pwd,这个命令很快就结束了,所以来不及在视图中看到并且操作它。如果不希望这个container被删除可以选择手动地运行如下的脚本。

docker run -d vscode-docker-sample2:latest

这次创建的container运行结束后就不会被删除了。也就是此时能够在左侧Containers列表里看到vscode-docker-sample2:latest (dreamy_...)这个container了。它前面的图标里有一个 红色的点,这说明这个container已经结束工作了。

可以在这个container上右击调出上下文菜单,选择Show logs命令。接着就能够看到这个containerpwd命令执行的结果了,就是/

3. Docker Compose

除了Dockerfile的支持,Docker插件还支持Docker ComposeDocker Compose是用于配置多个container并且将其同时运行。和Dockerfile一样也可以在Docker compose file里获得自动补全和错误检查。

这里用一个Node.js的代码示例,来展示Docker Compose以及接下来调试相关的内容。

首先将上文中创建的Dockerfile删除。然后在文件夹下创建一个JavaScript文件index.js

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

function bar(sr) {
    console.log(sr);
}
foo();

接着为JavaScript代码准备Docker相关的配置。Docker插件已经提供了Docker配置的快捷生成方式。

4. 自动创建 Dockerfile 和 compose 配置

调出命令面板,然后搜索执行命令Docker: Add docker fles to workspace。接着VS Code会问想要创建什么环境的Docker image。选择Node.js就可以运行上面创建的index.js文件了。

命令执行后,工作区内多出了三个文件,第一个文件是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 insall --production --silent && mv node_modules ../

COPY..

EXPOSE 3000

这个文件里指定了Node.js 8.9作为基础image,然后将当前工作目录下的package.jsonpackage-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。这个文件里指定了当前只有一个container需要被创建并运行,而且这个container需要使用端口3000

version: '2.1'

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

第三个文件是docker-compose.debug.yml。用于调试时的compose文件,跟上面 的docker-compose.yml文件相比,它只多了两行代码。9229:9229,使用9229端口。command: node --inspect index.jscontainer运行起来后,运行node程序,并且调试index.js文件。

version: '2.1'

services:
    vscode-sample:
        image: vscode-sample 
        build: . 
        environment:
            NODE_ENV: production 
        ports:
            - 3000:3000
            - 9229:9229
        ## set your sartup fle here 
        command: node --inspect index.js

5. Compose Up

有了这三个配置文件后,要想构建并且运行container就简单了。不需要先执行Docker: build image 再运行Docker: run了,而是直接运行单个命令Docker: compose up即可。运行后,需要选择使用哪个compose配置文件。只要准备好compose配置文件,在VS Code中操作就非常简单了,一共只有三个命令。

Docker compose up

Docker compose down

Docker compose start

如果想看看VS Code是不是真的成功运行了container,可以从Docker的视图里,找到新创建的container查看它的log。可以看到index.jscontainer里被成功地运行了,而且输出了Hello World

6. 调试

launch.json里调试配置中,有一个属性是request

这个JSON文件里的confgurations值就是当前文件夹下所有的配置了。现在只有一个调试配置,有四个属性。

第一个是type,代表着调试器的类型。它决定了VS Code会使用哪个调试插件来调试代码。

第二个是request,代表着该如何启动调试器。如果代码已经运行起来了,则可以将它的值设为attach,使用调试器来调试这个已有的代码进程。如果值是launch,则使用调试器直接启动代码并且调试。

request的值被设置为attach后,可以将调试器附着到已经处于调试状态的代码进程上了,接着就能够调试代码了。而调试Docker中的代码,就是使用的attach方法。可以在Docker container里以命令行的方式调试代码,并且开放调试端口,接着让VS Code里的调试插件附着到这个端口上。这就是在VS Code中调试非本地环境运行的代码的理论知识了。下面一起看看怎么做。

首先,对docker-compose.debug.yml做一点修改,将command改成如下的值。

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

这个命令是调试index.js文件,然后在第一行停下来,并且使用9229这个端口进行调试。接着,运行Docker: compose upcontainer运行起来。

创建launch.json以及借助自动补全来书写调试配置可以使用的.vscode/launch.json

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

调试配置有几个属性值得注意。requestattach,也就是附着到已经运行的代码上。port是调试的端口。localRoot是本地代码的根目录。remoteRoot是指在远程运行的代码的根目录。例子里已经在Dockerfile里指明了工作目录是/usr/src/app。有了这个调试配置后,F5就能够调试Docker container中的代码了,并且停到了第一行代码上。

至此就成功地将一段JavaScript代码运行在Docker中,并且从VS Code里调试起来了。

转载须知

如转载必须标明文章出处文章名称文章作者,格式如下:

转自:【致前端 - zhiqianduan.com】 在VSCode中使用Docker  "隐冬"
请输入评论...