可使用VS Code的Remote-Tunnels扩展安全共享本地开发服务:安装启用扩展→GitHub登录→创建隧道映射端口→获取加密公共URL→分发访问→手动关闭终止。

如果您希望在不暴露本地网络的情况下,将运行在自己电脑上的开发服务安全地分享给他人访问,则可能是由于需要绕过防火墙或NAT限制。以下是实现此目标的具体操作步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装并启用Remote-Tunnels扩展
Remote-Tunnels是VS Code官方提供的轻量级远程访问方案,它通过微软托管的中继服务器建立加密隧道,无需配置SSH或公网IP。该功能内置于VS Code 1.85+版本,但需手动启用。
1、启动VS Code,点击左侧活动栏的扩展图标(或按快捷键Cmd+Shift+X)。
2、在搜索框中输入Remote - Tunnels,确认已安装官方发布的同名扩展(发布者为Microsoft)。
3、若未启用,点击扩展右下角的启用按钮;如未安装,点击安装后重启VS Code。
二、登录GitHub账户以建立隧道身份
Remote-Tunnels使用GitHub OAuth进行身份验证,用于唯一标识您的隧道端点并管理访问权限。登录后,VS Code将获取临时访问令牌,全程不存储密码。
1、按下快捷键Cmd+Shift+P打开命令面板。
2、输入并选择Tunnel: Sign in to GitHub。
3、在弹出的浏览器窗口中完成GitHub授权,返回VS Code后确认状态栏显示Signed in as [用户名]。
三、启动本地服务并创建共享隧道
隧道本身不直接暴露端口,而是将本地HTTP服务(如localhost:3000)映射为一个唯一的、随机生成的公共URL。该URL仅对登录用户可见,且默认设置为私有访问模式。
1、确保您的本地服务已在终端中运行(例如执行npm run dev启动Vite项目)。
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下: 01、支持多语言扩展(独立内容表,可一键复制中文版数据) 02、支持一键修改后台路径; 03、杜绝常见弱口令,内置多种参数过滤、有效防范常见XSS; 04、支持文件分片上传功能,实现大文件轻松上传; 05、支持一键获取微信公众号文章(保存文章的图片到本地服务器); 06、支持一键
2、按下快捷键Cmd+Shift+P,输入并选择Tunnel: Create Tunnel。
3、在弹出的端口选择列表中,选择您服务监听的端口号(如3000),然后按回车。
4、系统提示选择访问权限时,输入Private(私有)以限制仅您本人可访问,或输入Public(公共)允许任何人通过链接访问(不推荐用于敏感服务)。
四、复制并分发隧道URL
创建成功后,VS Code会在通知区域显示完整URL,并自动将其复制到剪贴板。该URL由微软中继服务器生成,格式为https://[随机字符串].vscode.dev,所有流量均经TLS加密传输。
1、点击通知中的Copy URL按钮,或按下快捷键Cmd+Shift+P后执行Tunnel: Copy Current Tunnel URL。
2、将粘贴的URL发送给协作者;对方无需安装VS Code或任何客户端,直接在浏览器中打开即可访问您的本地服务。
五、手动终止隧道连接
隧道持续运行直至被显式关闭或VS Code退出。主动终止可立即撤销URL有效性,防止未授权后续访问,适用于演示结束或调试完成后快速收尾。
1、按下快捷键Cmd+Shift+P,输入并选择Tunnel: Close Current Tunnel。
2、确认弹窗中的端口号与当前服务一致,点击Close。
3、状态栏中对应端口的隧道图标消失,且原URL在数秒内失效,刷新页面将返回404错误。









