如何在vscode.dev浏览器环境中使用Dev Container？

问题本质 #

vscode.dev的浏览器沙箱限制了对本地Docker资源的直接访问，因此无法在浏览器端安装或运行Dev Containers扩展，但可以通过Remote Tunnels复用本地已配置好的Dev Container环境。

操作步骤 #

1. 本地环境准备

   • 确保本地VS Code已安装Dev Containers和Remote Tunnels扩展，且能正常启动、构建Dev Container。
   • 启动本地VS Code的Remote Tunnel，保持连接状态（右下角Tunnel图标显示已激活）。

2. 浏览器端复用本地Dev Container

   • 在平板浏览器打开vscode.dev，选择连接到你的本地Tunnel。
   • 连接成功后，直接打开本地已经在Dev Container中运行的项目——浏览器端会直接对接本地的容器环境，无需额外安装扩展。

3. 在浏览器端触发容器构建/启动

   • 确保项目根目录有配置完整的devcontainer.json。
   • 在浏览器端vscode.dev打开命令面板（平板可通过顶部菜单调出），输入Remote-Containers: Reopen in Container。
   • 这个命令会通过Tunnel传递到本地VS Code，由本地执行Docker构建和容器启动，完成后浏览器端自动连接到容器。

关键注意点 #

• 本地电脑必须保持开机，VS Code和Tunnel不能关闭，Docker daemon也要处于运行状态。
• 优先在同一局域网下使用，避免跨网连接的延迟或稳定性问题。
• 如果遇到权限报错，检查本地Dev Containers扩展是否有足够的Docker访问权限。

内容的提问来源于stack exchange，提问作者Paprika