VS Code通过隧道连接VPS时本地端口转发失效问题咨询

问题复现步骤 #

• 使用任意用户（root 或非root用户）建立到VPS的SSH连接
• 通过code tunnel将该SSH连接转换为隧道
• 执行端口转发操作时，VS Code生成的链接无法正常访问

核心疑问 #

当前VS Code生成的隧道链接格式为 https://<random>-<port>.<area>.devtunnels.ms/（例如https://51f222222-8080.euw.devtunnels.ms/对应8080端口），能否实现http://localhost:8080/形式的本地端口转发？

当前状态 #

• [VPS] ---(隧道)--- [本地机器]：端口转发无法正常工作
• [VPS] ---(SSH)--- [本地机器]：端口转发可正常工作

已尝试操作 #

• 仅通过SSH连接VPS：正常工作
• 在本地Macbook Pro M2上开发：正常工作
• 本地及通过SSH连接VPS使用DevContainer：均正常工作
• 隧道连接时同时使用VPN：无法正常工作

成功时的Curl输出（SSH连接正常时） #

curl -vk https://localhost:7080/

• Trying 127.0.0.1:7080...
• Connected to localhost (127.0.0.1) port 7080 (#0)
• ALPN, offering h2
• ALPN, offering http/1.1
  ...

失败时的Curl输出（关闭所有SSH连接的VS Code窗口后） #

curl -vk https://localhost:7080/

• Trying [::1]:7080...
• connect to ::1 port 7080 failed: Connection refused
• Trying 127.0.0.1:7080...
• connect to 127.0.0.1 port 7080 failed: Connection refused
• Failed to connect to localhost port 7080 after 0 ms: Couldn't connect to server
• Closing connection
  curl: (7) Failed to connect to localhost port 7080 after 0 ms: Couldn't connect to server

解决方案 #

1. 配置VS Code界面强制映射到localhost #

VS Code Dev Tunnel支持手动指定本地转发地址，步骤如下：

• 打开VS Code的远程资源管理器
• 找到已建立的Dev Tunnel连接，展开「端口」面板
• 选中目标端口，点击右侧齿轮图标进入端口转发设置
• 将「本地地址」设置为localhost:<目标端口>（例如localhost:8080），保存后重启端口转发

2. 使用devtunnel CLI工具实现本地映射 #

如果界面配置无效，可直接使用官方命令行工具：

1. 在VPS安装工具：

   npm install -g @vscode/dev-tunnel-cli
   

2. 登录Microsoft账号：

   devtunnel login
   

3. 创建仅本地访问的隧道映射：

   devtunnel create -p 8080 --local-only
   

   此命令会直接将VPS的8080端口映射到本地localhost:8080，无需公网链接。

3. 排查连接异常原因 #

• 禁用VPN：已验证VPN会干扰Dev Tunnel通信，使用隧道时务必关闭
• 检查防火墙：确认VPS和本地机器的防火墙允许Dev Tunnel默认端口（443）及自定义转发端口的通信
• 重置隧道服务：在VPS执行以下命令清理并重启隧道：

  code tunnel stop
  code tunnel start --clean
  

4. 替代方案：SSH端口转发结合Dev Tunnel #

如果Dev Tunnel仍无法满足需求，可保持SSH连接的同时手动配置本地端口转发：

ssh -L 8080:localhost:8080 <你的VPS用户名>@<VPS地址>

此命令直接将VPS的8080端口映射到本地localhost:8080，同时不影响VS Code通过Dev Tunnel进行代码编辑。

内容的提问来源于stack exchange，提问作者I. T.