VS Code Tunnel：如何随时随地安全访问你的开发环境 – wiki基地

作者： /

VS Code Tunnel：随时随地安全访问你的开发环境

在当今快节奏的开发世界中，灵活性和可访问性变得前所重要。开发者们可能需要在家里的高性能台式机上运行代码，却身处咖啡馆只带着一台轻薄的笔记本；可能需要访问公司内网的服务器，但又不想或无法设置复杂的 VPN；或者只是想在不同的设备（比如平板电脑）上继续未完成的工作。传统上，解决这些问题往往依赖于 SSH、VPN 或复杂的网络配置，这不仅技术门槛高，而且往往受限于防火墙、动态 IP 或权限问题。

有没有一种更简单、更安全、更“傻瓜式”的方法，让你能够像使用本地开发环境一样，随时随地通过任何设备访问你的远程开发机器呢？

答案是肯定的，这就是 VS Code Tunnel。

什么是 VS Code Tunnel？

VS Code Tunnel 是微软为 Visual Studio Code 开发环境提供的一项强大功能。它是 VS Code Remote Development 扩展能力的一个重要延伸。简单来说，VS Code Tunnel 允许你在任何运行着 VS Code 或者具备 VS Code CLI 的机器上建立一个安全的、基于隧道的连接，然后你可以通过任何其他设备上的 VS Code 客户端（包括桌面应用、Web 浏览器中的 vscode.dev 或 github.dev）连接到这台机器，并像本地一样进行开发。

它的核心理念是：无需关注复杂的网络配置，无需公网 IP，无需端口转发，只需运行一个命令，登录同一个账号，即可建立连接。

想象一下，你的高性能开发机器（无论是家里的台式机、办公室的服务器、还是云端虚拟机）只需要能够访问互联网，运行 code tunnel 命令并登录你的 Microsoft 或 GitHub 账号。然后，你在任何其他设备上打开 VS Code，登录同一个账号，就可以在“远程资源管理器”中看到你的这台机器，点击即可连接。连接成功后，你就仿佛直接坐在那台强大的机器前进行开发，访问它的文件系统、运行它的终端、利用它的计算资源和安装的软件。

VS Code Tunnel 的工作原理（简化版）

为了理解 VS Code Tunnel 如何绕过传统网络限制，我们需要稍微了解一下它的基本工作原理：

  1. 宿主机器（Host Machine）： 这台机器是你想要远程访问的开发环境，它需要安装 VS Code 或者至少是 VS Code CLI。当你在这台机器上运行 code tunnel 命令时，它会启动一个后台服务（通常是 vsch 进程）。
  2. 隧道建立 (Tunneling): vsch 进程会主动向一个由微软运营的、安全的云服务（我们可以称之为“中继服务”或“信号服务”）发起 * outbound*（出站）连接。请注意，这是关键点——它不是监听入站连接，因此不需要在防火墙上打开任何端口。
  3. 身份认证 (Authentication): 在建立连接时，宿主机器会要求你登录一个 Microsoft 账号或 GitHub 账号。这个账号会与你的隧道关联，确保只有你或者你授权的人才能访问。
  4. 隧道注册 (Tunnel Registration): 成功认证后，宿主机器会在中继服务上注册一个唯一的隧道标识符（Tunnel ID）或你为其设置的隧道名称。
  5. 客户端机器 (Client Machine): 这是你用来进行远程开发的设备，比如你的笔记本电脑、平板电脑或另一台台式机。你在这台机器上打开 VS Code，并在 Remote Explorer（远程资源管理器）的 “Tunnels” 部分登录 同一个 Microsoft 或 GitHub 账号。
  6. 发现并连接 (Discovery and Connection): VS Code 客户端会查询中继服务，列出与你账号关联的所有可用隧道。你选择要连接的隧道，VS Code 客户端也会向中继服务发起 outbound 连接。
  7. 数据传输 (Data Transfer): 中继服务就像一个智能的桥梁，将客户端和宿主机器的出站连接桥接起来。客户端发送的指令（如打开文件、运行终端命令）通过中继服务安全地转发到宿主机器；宿主机器返回的结果（文件内容、终端输出）也通过中继服务安全地转发回客户端。所有数据传输都在这个建立的隧道中进行，并且是加密的。

核心优势在于：

  • 绕过防火墙： 宿主机器只发起出站连接，绝大多数防火墙允许出站连接，因此无需复杂的防火墙规则或端口转发。
  • 无需公网 IP： 宿主机器只需要能访问互联网即可，动态 IP、局域网 IP 都没问题，因为它是通过中继服务进行注册和寻址，而不是直接被外部访问。
  • 简化配置： 用户只需要运行命令和登录账号，所有的网络握手、认证、安全通道建立都由 VS Code 和微软的服务自动完成。
  • 安全性： 连接是加密的，并且通过账号进行认证，确保只有授权用户才能访问你的隧道。

为什么你需要使用 VS Code Tunnel？（核心应用场景与优势）

VS Code Tunnel 极大地简化了远程开发，适用于多种场景：

  1. 跨设备无缝切换开发：
    • 场景： 你在家里有一台配置强大的台式机用于深度开发，但出门在外时只有一台轻薄本或平板电脑。
    • 优势： 你可以在台式机上启动隧道服务，然后在任何地方通过轻薄本或平板上的 VS Code 连接。你使用的是台式机的计算能力、存储、显卡（如果需要进行GPU计算），而操作界面和编辑体验都在轻薄本上，仿佛随身带着那台强大的机器。
  2. 访问局域网内的机器：
    • 场景： 你的开发服务器或测试环境位于公司内网，没有公网 IP，外部无法直接 SSH 访问。
    • 优势： 如果这台内网机器可以访问互联网，你就可以在其上启动隧道服务，然后从外部网络直接通过 VS Code 连接，无需 VPN 或在公司防火墙上打洞。
  3. 使用云端虚拟机或容器作为开发环境：
    • 场景： 你在 AWS, Azure, GCP 等云平台创建了一个虚拟机，或者使用 Docker 容器作为开发环境，但出于安全考虑，没有为其分配公网 IP。
    • 优势： 只要虚拟机或容器可以访问互联网，你就可以在其中运行隧道服务，然后从本地 VS Code 直接连接。这比通过堡垒机 SSH 跳板要方便得多。
  4. 共享特定环境（非主要用途，但可行）：
    • 场景： 你想让团队成员（拥有你的账号权限或共享账号）访问一个特定的测试环境机器进行调试。
    • 优势： 可以通过共享账号或者利用 VS Code 的某些协作功能（虽然 Tunnels 主要面向个人访问）来实现有限的访问。注意：官方更推荐 Live Share 进行协作，Tunnels 更侧重个人对远程环境的便捷访问。
  5. 从平板电脑或非传统设备进行开发：
    • 场景： 你想在 iPad 或 Android 平板电脑上使用一个功能完备的 VS Code 体验来访问你的代码仓库和开发环境。
    • 优势： 通过浏览器访问 vscode.dev 或 github.dev，然后登录你的账号，你就可以连接到已经开启隧道的远程机器，获得几乎完整的 VS Code 功能集。这为移动开发或轻量级设备上的全功能开发提供了可能。
  6. 规避复杂的网络配置：
    • 场景： 你对网络配置不熟悉，或者当前网络环境（如公共 Wi-Fi、酒店网络）不允许你进行端口转发或复杂的 SSH 设置。
    • 优势： Tunnel 只需要你的机器能够正常访问互联网，其余网络细节全部由 VS Code 和微软服务处理，极大地降低了技术门槛。
  7. 安全性：
    • 优势： 相较于打开 SSH 端口暴露在公网上（存在被扫描和暴力破解的风险），Tunnel 通过出站连接和基于账号的认证，从根本上提高了安全性。你不需要暴露任何入站端口。

如何设置和使用 VS Code Tunnel？（分步指南）

设置和使用 VS Code Tunnel 非常简单，主要分为两个步骤：在宿主机器上启动隧道服务，以及在客户端机器上连接隧道。

第一步：在宿主机器上启动隧道服务

宿主机器是你想要远程访问的开发环境。

  1. 安装 VS Code 或 VS Code CLI： 确保你的宿主机器上安装了 VS Code，或者至少是 VS Code 的命令行工具 (code 命令)。大多数 Linux 发行版安装 VS Code 桌面版时会自动安装 CLI，或者你可以单独安装。
  2. 打开终端或命令行： 在宿主机器上打开终端或命令提示符。
  3. 运行隧道命令： 输入以下命令并回车：
    bash
    code tunnel
  4. 登录账户：
    • 第一次运行此命令时，它会提示你登录。它会提供一个设备登录 URL 和一个用户代码（例如 https://microsoft.com/devicelogin 和 A1B2C3D4E）。
    • 在你的浏览器中打开这个 URL，然后输入提供的用户代码。
    • 使用你常用的 Microsoft 账号（例如 Outlook.com、Hotmail.com）或 GitHub 账号进行登录。请确保记住这个账号，因为客户端连接时需要使用同一个账号。
    • 授权 VS Code CLI 访问你的账户信息。
  5. 隧道服务启动： 登录成功后，宿主机器上的终端会显示隧道服务正在启动，并为你分配一个默认的隧道名称（通常是 你的用户名-机器名 的格式）或者一个随机的 ID。它会告诉你隧道已经就绪，等待连接。
    PS C:\Users\YourUsername> code tunnel
    > VS Code Remote Tunnel service
    > Version: 1.0.1234
    > ... logging in ...
    > Pick a display name for this machine [YourUsername-YourMachineName]:
    > Tunnel service successfully started.
    > You can now connect to YourMachineName via the VS Code Remote Tunnels feature.
    > To stop the service, press Ctrl+C
    你也可以在运行命令时指定一个自定义名称，例如：
    bash
    code tunnel --name MyPowerfulServer
  6. 保持服务运行（可选，推荐）： 为了能够随时访问，你需要让 code tunnel 服务在宿主机器上持续运行。
    • 简单方法： 保持终端窗口打开。关闭终端窗口会导致服务停止。

    • 推荐方法（作为系统服务运行）： 对于 Linux/macOS，你可以配置 systemd 或 launchctl 将 code tunnel 作为后台服务启动。这可以确保机器重启后服务也能自动启动。code tunnel 命令本身提供了 --help 选项，可能会包含关于如何作为服务运行的指导，或者你需要查找相关的社区教程来设置 systemd unit 或 launchctl plist 文件。例如，一个基本的 systemd unit 文件可能看起来像这样（请根据你的实际安装路径和用户进行调整）：
      “`ini
      [Unit]
      Description=VS Code Remote Tunnel
      After=network.target

      [Service]
      Type=simple
      User=your_username
      WorkingDirectory=/home/your_username
      ExecStart=/usr/local/bin/code tunnel –name YourMachineName
      Restart=always

      [Install]
      WantedBy=multi-user.target
      ``
      然后你需要将其保存到      /etc/systemd/system/vscode-tunnel.service(Linux)，并执行sudo systemctl daemon-reload，sudo systemctl enable vscode-tunnel.service，sudo systemctl start vscode-tunnel.service`。

第二步：在客户端机器上连接隧道

客户端机器是你用来远程访问的设备。

  1. 安装 VS Code： 确保你的客户端机器上安装了最新版本的 VS Code 桌面版。
  2. 安装 Remote Development 扩展包（可选，推荐）： 打开 VS Code，进入扩展视图（Ctrl+Shift+X），搜索并安装 “Remote Development” 扩展包。这个扩展包包含了连接 SSH、Containers 和 Tunnels 的所有必要组件。
  3. 打开 Remote Explorer： 在 VS Code 的侧边栏中，找到并点击“远程资源管理器”图标（通常是一个电脑或插头形状的图标）。
  4. 选择 Tunnels： 在 Remote Explorer 视图的顶部下拉菜单中，选择 “Tunnels”。
  5. 登录账户： 如果你还没有登录，它会提示你登录。务必使用与你在宿主机器上登录时相同的 Microsoft 或 GitHub 账号。
  6. 查看可用隧道： 登录成功后，Remote Explorer 的 Tunnels 部分会列出所有与你的账号关联的、正在运行的隧道。你应该能看到你在宿主机器上启动的隧道名称。
  7. 连接隧道： 找到你想连接的隧道名称，将鼠标悬停在其上，然后点击出现的连接按钮（通常是一个文件夹或插头图标）。
  8. 建立连接： VS Code 会开始连接。连接成功后，VS Code 会打开一个新的窗口（或者在当前窗口中连接），并且左下角的状态栏会显示你已连接到远程机器的名称。
  9. 开始开发： 现在你已经成功连接到远程机器！你可以：
    • 打开远程机器上的文件夹或工作区（通过 “File” -> “Open Folder…” 或 “Open Workspace from File…”）。
    • 使用集成终端（Terminal -> New Terminal），这个终端直接在远程机器上运行。
    • 安装和使用远程机器上的工具和运行时（如 Node.js, Python, Docker）。
    • 调试在远程机器上运行的应用程序。
    • 在远程机器上安装和使用 VS Code 扩展（Extensions）。很多扩展会自动在远程机器上安装其服务器端组件。

使用 Web 浏览器访问：

除了桌面客户端，你还可以通过 Web 浏览器访问你的隧道：

  1. 在宿主机器上启动 code tunnel 服务。
  2. 打开浏览器，访问 https://vscode.dev/tunnel/你的隧道名称（将 你的隧道名称 替换为实际的隧道名称）。
  3. 浏览器会重定向你到一个登录页面，使用你在宿主机器上登录的同一个账号进行登录。
  4. 登录成功后，你将在浏览器中看到一个功能完整的 VS Code 界面，它已经连接到了你的远程机器。这对于在无法安装 VS Code 桌面版的设备（如某些平板电脑、受限的公共电脑）上进行开发非常有用。

VS Code Tunnel 的高级用法与特性

  • 端口转发 (Port Forwarding): 如果你在远程机器上运行了一个 Web 服务器（例如在端口 3000 运行一个 Node.js 应用，或在端口 8000 运行一个 Python 服务），你需要在本地访问它，可以使用 VS Code 的端口转发功能。连接到远程机器后，在 VS Code 的 “Forwarded Ports” 面板（通常在底部的面板区，或者可以通过命令面板搜索 “Ports: Focus on Ports View” 打开）中，可以添加需要转发的端口。输入远程端口号（例如 3000），VS Code 会自动为你分配一个本地端口（通常是相同的端口，如果本地未占用），并建立一个隧道连接，让你通过 localhost:本地端口号 在本地浏览器中访问远程机器上运行的服务。
  • 管理隧道： 可以在 Remote Explorer 的 Tunnels 视图中管理你的隧道。你可以看到在线的隧道列表，并且可以选择断开连接或删除隧道配置。在宿主机器上，运行 code tunnel list 可以查看当前账号下注册的所有隧道，运行 code tunnel kill <tunnel_name> 可以远程停止一个指定的隧道服务。
  • 自定义隧道名称： 在宿主机器上运行 code tunnel --name YourPreferredName 来设置一个方便记忆的隧道名称。
  • 离线和重连： 如果隧道因为网络问题断开，VS Code 会尝试自动重连。如果宿主机器的隧道服务停止，Remote Explorer 中该隧道的状态会变为离线。

限制与注意事项

尽管 VS Code Tunnel 功能强大且便捷，但也存在一些限制和需要注意的地方：

  1. 依赖于微软服务： Tunnel 的连接是通过微软的中继服务进行的。这意味着如果该服务出现问题，或者你无法访问这些服务所在的服务器（极少数情况下可能受到某些网络防火墙的更严格限制），Tunnel 将无法工作。
  2. 网络性能： 远程开发的流畅度取决于客户端和宿主机器到微软中继服务之间的网络延迟和带宽。如果网络连接不稳定或带宽不足，可能会出现卡顿或延迟。
  3. 身份认证： Tunnel 的安全性高度依赖于你的 Microsoft/GitHub 账号安全。确保你的账号开启了双因素认证（MFA），避免账号被盗用导致未经授权的访问。
  4. 非多人协作工具： Tunnel 主要设计用于个人在不同设备间访问自己的开发环境。虽然理论上多人可以使用同一个账号登录并访问同一个隧道，但这不符合最佳实践，且可能会导致管理混乱。多人协作更推荐使用 VS Code Live Share 或共享的远程开发环境（如 Codespaces）。
  5. 资源消耗： 在宿主机器上运行隧道服务会消耗少量系统资源（CPU、内存、网络带宽），尤其是在有活动连接时。长时间运行作为服务时需要考虑其对宿主机器的影响。
  6. 无头模式下的安装： 如果你的宿主机器是无头服务器（没有桌面环境），你可能需要手动安装 VS Code CLI 或找到适合无头环境的安装方法。VS Code 官网提供了相关的 Linux 安装指南。

与其他远程开发方式的比较

  • VS Code SSH 远程开发： 这是最常见的 VS Code 远程开发方式。它强大且灵活，但要求宿主机器可以被客户端通过 SSH 直接访问。这通常意味着宿主机器需要有公网 IP、端口转发，或者客户端在同一个局域网/通过 VPN 连接到宿主机器的网络。Tunnel 解决了 SSH 远程访问中复杂的网络配置问题，特别适用于无法直接 SSH 连接的场景。
  • VS Code Containers/WSL 远程开发： 这些是用于本地化的隔离开发环境，而不是跨网络的远程访问。它们通常与 SSH 或 Tunnel 结合使用，例如通过 Tunnel 访问运行在远程机器容器或 WSL 中的开发环境。
  • Tailscale/Zerotier 等 P2P VPN： 这些工具也可以实现类似的效果，通过建立点对点加密网络让你访问内网机器。它们是独立于 VS Code 的网络层解决方案。Tunnel 则是一个与 VS Code 深度集成的、基于中继服务的解决方案，其优势在于与 VS Code 的无缝体验和无需额外网络工具的简单性。
  • Ngrok 等内网穿透工具： 这类工具通常用于将内网的 Web 服务等暴露到公网。虽然它们也能建立隧道，但主要面向服务暴露，而非完整的开发环境访问，且通常有流量或时间的限制（免费版）。VS Code Tunnel 专注于为 VS Code 提供稳定、安全的远程开发连接。

总结

VS Code Tunnel 是一款革命性的功能，它极大地降低了远程开发的门槛，让开发者能够以前所未有的便捷性，随时随地安全地访问他们的开发环境。它巧妙地利用出站连接和云中继服务，绕过了传统远程访问中的网络复杂性，使得无论你的开发机器是在内网、云端还是动态 IP 环境下，都可以轻松通过 VS Code 进行连接。

通过简单的命令启动服务和一致的账号登录，你就可以将你强大的开发环境“随身携带”，在任何设备上享受无缝的开发体验。无论是为了利用高性能硬件、访问特定网络资源，还是仅仅为了不受地点限制地继续工作，VS Code Tunnel 都是一个强大而实用的选择。如果你经常需要在不同地点或设备间切换开发，或者受困于复杂的远程访问配置，强烈建议你尝试一下 VS Code Tunnel，它可能会彻底改变你的工作流。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部