VScode 在 Docker 容器内开发

2023-11-25 · 阅读时长 3 分钟 · python venv vscode docker

在 Docker 的容器内开发，相当于使用VSCode的远程开发能力，好处非常多。

开发环境统一、可维护性强
后期部署简单

1. 安装 Docker

各系统安装 Docker 的教程很多，这里略过。

2. 安装 Visual Stuido Code

这不废话嘛，同上。

3. 安装 Remote Development 扩展包

官方推荐安装 Remote Development 这个扩展包，它包括三个扩展功能：

Remote - SSH
Remote - Containers
Remote - WSL

如果你只使用 Docker ，可以只安装 Remote - Containers 这个扩展。

安装成功后，你可以在 VSCode 的左下角，看到一个“蓝底色+两个相对白箭头”的图标。

点击图标，可以看到 Remote - Containers 提供了许多方法进行配置。

4. 配置 Remote - Containers

4.1. 使用现成的 docker-compose.yml 配置

点击左下角的蓝色图标
选择 Add Development Container Configuration Files...
选择 Existing Docker Compose (Extend)
1. VSCode 会自动在项目的根目录下，生成 .devcontainer 文件夹
2. 在 .devcontainer 目录内，包括两个文件：
  1. devcontainer.json：VSCode 使用它连接开发容器
  2. docker-compose.yml：示例文件，可以不用管它
打开 devcontainer.json 文件

照着 docker-compose.yml 进行修改，见下面示例

 1// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
 2{
 3  "name": "Existing Docker Compose (Extend)",
 4  // Update the 'dockerComposeFile' list if you have more compose files or use different names.
 5  // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
 6  "dockerComposeFile": [
 7      // 项目已有 docker-compose.yml 文件的相对路径
 8      "../docker/docker-compose.yml",
 9      // 可加载多个yml文件，按加载顺序排好即可
10      "docker-compose.yml"
11  ],
12  // The 'service' property is the name of the service for the container that VS Code should
13  // use. Update this value and .devcontainer/docker-compose.yml to the real service name.
14  // VSCode 要连接的容器名称，必须与 docker-compose.yml 文件里 services 项定义的一致
15  "service": "robot",
16  // The optional 'workspaceFolder' property is the path VS Code should open by default when
17  // connected. This is typically a file mount in .devcontainer/docker-compose.yml
18  // 容器的工作目录，必须与 docker-compose.yml 文件里 volumes 项定义的一致
19  "workspaceFolder": "/root/code",
20  // Use 'settings' to set *default* container specific settings.json values on container create.
21  // You can edit these settings after create using File > Preferences > Settings > Remote.
22  "settings": {
23      // This will ignore your local shell user setting for Linux since shells like zsh are typically
24      // not in base container images. You can also update this to an specific shell to ensure VS Code
25      // uses the right one for terminals and tasks. For example, /bin/bash (or /bin/ash for Alpine).
26      // 系统使用的shell，一般都 /bin/bash
27      "terminal.integrated.shell.linux": "/bin/bash"
28  },
29  // Uncomment the next line to have VS Code connect as an existing non-root user in the container. See
30  // https://aka.ms/vscode-remote/containers/non-root for details on adding a non-root user if none exist.
31  // "remoteUser": "vscode",
32  // Uncomment the next line if you want start specific services in your Docker Compose config.
33  // "runServices": [],
34  // Uncomment the next line if you want to keep your containers running after VS Code shuts down.
35  // "shutdownAction": "none",
36  // Uncomment the next line to run commands after the container is created - for example installing git.
37  // "postCreateCommand": "apt-get update && apt-get install -y git",
38  // Add the IDs of extensions you want installed when the container is created in the array below.
39  // 在容器内安装的扩展，会在启动时自动安装好
40  // 容器外即本地安装的扩展，主要对 VSCode 的外观起作用
41  // 容器内安装的扩展，才能对代码起作用，如：代码格式化等
42  "extensions": [
43      // 扩展的标识符，可以在扩展详细页面的[名称]旁边找到
44      "ms-python.python"
45  ]
46}

5. 运行

再次点击左下角的蓝色图标
选择 Reopen in Container，VSCode 将重启，并自动启动 docker ，进入容器安装扩展，准备好开发环境
成功启动过一次后，VSCode 会自动在[欢迎使用]页面[最近]项目下添加快速入口

6. 参考链接

Developing inside a Container