Skip to content

✉️ Discover TinkMail

Powerful email solutions for personal and business use

Get Started Free

VSCode中的端口转发

VSCode提供了一个端口转发功能,允许你从外部世界访问本地或远程开发环境。这个功能对于测试和调试非常有用。

背景

我们通常在本地环境或远程开发环境中进行开发,这些环境无法被公开访问。但在某些情况下,我们需要从外部世界访问本地或远程开发环境。例如,我们需要与第三方服务集成,或者我们需要从不在同一网络上的设备测试网页或服务。

如何使用

首先,启动你的本地开发环境,确保服务正在运行。它将监听特定端口,例如localhost:8080

然后,在VSCode中,在底部面板中找到"端口"功能。你会看到一个"转发端口"按钮。点击它,并输入你想要转发的端口号。例如,8080

端口转发

端口转发

如果这是你第一次使用此功能,系统会提示你登录GitHub账户并授权访问。

端口转发

如果你使用的是MacOS,系统还会提示你授权VSCode访问钥匙串。只需输入你的密码并点击"允许"。

端口转发

然后等待几秒钟,你会看到端口已成功转发。

端口转发

现在你可以通过转发的URL访问本地开发环境。例如,如果你转发了端口8080,你可以通过https://xxx-1234.asse.devtunnels.ms访问它(URL可能会不同)。

端口转发

如你所见,当你访问这个转发的URL时,它仍然需要授权。只需点击"授权"。这在大多数情况下满足我们的需求,并确保我们本地开发环境的安全。

但如果你希望外部世界无需授权就能访问你的本地开发环境,例如,一个API端点或webhook,你可以在VSCode的"端口"面板中找到该记录,右键点击它,然后将其设为公开。

请注意:将你的本地开发环境暴露给外部世界可能会导致安全风险。在执行此操作之前,请确保你了解风险。

最后,记得在完成后关闭端口转发。

结论

在本文中,我们介绍了VSCode中的端口转发功能。此功能允许你从外部世界访问你的本地或远程开发环境。它对于测试和调试非常有用。但在将本地开发环境暴露给外部世界时请小心,因为这可能会导致安全风险。