---
title: VSCode DevContainer
date: 2024-12-28
cover: https://assets.vluv.space/cover/ToolChain/devcontainer.webp
tags:
  - VSCode
  - Docker
  - Linux
excerpt: 个人实习参与的项目为简化环境配置工作，维护了Dockerfile。本文介绍如何使用VSCode的devcontainer插件，实现在Docker容器中开发项目。
---

> 个人实习参与的项目维护有 Dockerfile，但主要是用于启动项目，run 这个容器后会自动启动 Web Application。这其实不适合于开发环境，如果容器运行自动启动项目，那么开发环境中可能需要调试代码就不太方便，譬如端口被占用等问题。
>
> 在本地配环境倒也可以，Python 环境配置起来也不是很麻烦，uv,conda 都可以管理不同版本的 Python 环境。但毕竟前人都维护好 Dockerfile 了，还是 Docker 来得方便。

Dev Toolchain: VSCode + SSH(Ubuntu Server) + Docker

选择 Docker 容器作为开发环境，主要有以下几个的优势：

- 依赖容器化，服务与主机的解耦。Docker 容器可以将代码和依赖统一打包到镜像中，包括操作系统、库版本到配置文件等，开发-测试-部署环境更一致
- 提高部署效率。使用 Docker 容器部署，由于 Docker 不同容器上的环境是相互隔离的，部署时不必关心不同服务之间的依赖冲突等问题。

## Steps

- 下载 dev container 插件
- 在项目根目录新建 `.devcontainer` 文件夹，添加如下文件:

```shell
- project
    - .devcontainer
        - devcontainer.json
        - Dockerfile
    - ...
```

在`devcontainer.json`文件内，可以在`customizations.vscode.extensions`字段填入插件 id，VSCode 会在创建容器后下载这些插件；在该文件内还可以配置容器的一些属性，如端口映射，详见[官方文档](https://vscode.github.net.cn/docs/devcontainers/containers#_advanced-container-configuration)

```json
{
  "name": "diagbackend dev",
  "build": {
    "dockerfile": "./Dockerfile"
  },
  "customizations": {
    "vscode": {
      "settings": {
        // add your settings here
      },
      "extensions": [
        "ms-azuretools.vscode-docker",
        "ms-vscode-remote.remote-containers",
        "ms-python.python",
        "ms-python.debugpy",
        "ms-python.vscode-pylance"
      ]
    }
  }
}
```

调用`open folder in container` command，选择工作目录后回车即可在容器内部进行项目的开发，devcontainer 插件会将该目录挂载到 Docker Container。

之后 VSCode 会自动进行 container 的 build 操作，如果失败，可以查看插件日志，检查 `Dockerfile` 是否有问题。

容器内 debug 与在本地中一样简单，程序打断点后，快捷键 F5 选择 Django，即可开始 debug 程序。如果对启动方式有需求，则可自行编写 `launch.json`

<img src="https://assets.vluv.space/debug_in_vsc_container.png"/>

VSCode 内会自动进行端口的转发，Windows 可以下载 PostMan 调试接口，url 中的 ip address 中填 127.0.0.1 即可

## Ref

devcontainer 的原理可见下图，文档在<https://code.visualstudio.com/docs/devcontainers/containers>

<img src="https://assets.vluv.space/vscode_dev_container.png"/>