Featured image of post vscode dev-container 踩坑指南

vscode dev-container 踩坑指南

踩坑记录

记录一下踩的坑

坑一: 下载出错

1
2
3
4
5
6
7
[2025-02-12T13:03:31.599Z] Dockerfile.extended:1
--------------------
   1 | >>> # syntax=docker/dockerfile:1.4
   2 |     ARG _DEV_CONTAINERS_BASE_IMAGE=placeholder
   3 |
--------------------
ERROR: failed to solve: failed to copy: httpReadSeeker: failed open: unexpected status code https://docker.io/v2/docker/dockerfile/blobs/sha256:0f354329a20e6c1067c0e51abd3b1721483fafbbe0c333710059805f167e3ed0?ns=docker.io: 400 Bad Request

这里的原因可能是网络问题,检查一下设置一下镜像源,或者开个代理试试。 我遇到这个问题就是因为设置 registry-mirrors 设置错了,修改且保证网络正常之后,就可以安装成功了。

坑二: git 共享凭证

在开发的时候,肯定是要用到 git 的,当使用 ssh 拉取代码的时候,这里就会出现问题了。

因为容器其实是和主机分离的,所以主机中配置的 ssh 在容器中是访问不到的,这就导致拉取代码的时候无法读取到密钥和公钥。

不过这个 vscode dev container 中也给出了解决方案: 使用 git

在配置文件中添加 mounts 进行目录挂载,可以很方便的实现凭证共用

1
2
3
4
5
6
// devcontainer.json
{
  "mounts": [
    "source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/vscode/.ssh,type=bind,consistency=cached" // 挂载ssh目录
  ]
}

坑三: 剪切板读取

正在写博客呢,因为我的博客是静态化的,所以要先上传图片,把地址添加到博客中,然而在使用 pigGo(vscode 插件) 上传的时候,出现了这个问题:

2025-02-12-16-41-12

原因是因为默认的环境是没有剪切板读取的,处理也比较简单,在定制开发环境的时候我们安装一下 xclip 就可以了。

devcontainer.json 中添加 postCreateCommand 配置进行下载就行了。

1
"postCreateCommand": "sudo apt-get update && sudo apt-get install -y xclip && sudo apt-get clean && sudo rm -rf /var/lib/apt/lists/*",

坑四: 剪切板共享

有了剪切板(xclip)之后,又来了一个新的问题,主机的剪切板和容器的剪切板是不能共享的,我们在操作的时候其实都是在往主机的剪切板加内容,但是容器读取不到,容器只能读取到容器的剪切板数据。 * 注意,如果你只是 ctrl c/v 那其实是从主机的剪切板读取的。

因为电脑是 mac,我了解了一下 mac 的剪切板逻辑,发现这东西是直接在内存中保存剪切板数据的,如果没有文件系统介入,好像不容易实现共享。

一个思路就是,使用第三方的剪切板管理工具,此类工具是使用的硬盘临时保存的,这样的话就可以使用目录映射来实现剪切板共享了。

另外一个方案,共享服务: 一般使用 X11 服务

目前还只是一个思路,改天应该会去实现验证一下试试。

TODO;

今天就来研究一下思路实现

思路 1 临时保存和挂载: 可用,使用文件存储 copy 的内容,然后将目录挂载到容器中,容器中可以使用到对应的内容。但这也有个不方便的地方,容器中要以文件的方式获取到中间的内容去显示。

思路 2 共享 X11 服务: 这里不去实现了,有强迫症,mac 上需要安装弟三方工具 XQuartz,我不打算安装。

坑五: 上传不可用

使用 vs-picGo 的时候,容器中上传会出现下面这个错误

2025-02-19-02-59-17

如果是看控制台,可以看到是报一个代理出错了。

2025-02-19-03-00-06

其实这里的原因是因为插件中使用的代理是主机中的,但容器中是连接不到的,所以导致网络环境不可用,修改一下配置即可:

1
2
3
4
// user vscode config.json
{
  "http.proxySupport": "override"
}

配置的作用表示 拓展 使用代理的时候,可以分开控制,也就是不使用全局的代理。

坑 N: 排队占位