Localhost 不再是本地主机

在我之前的文章中，我探讨了我们构建Visual Studio Live Share的初衷，以及它如何通过各种方式提升开发者的协作体验，无论您构建的是哪种类型的应用（例如桌面、移动、游戏还是 Web）。然而，在这篇文章中，我想深入探讨 Live Share 提供的一项专门针对 Web 开发者的功能：共享本地服务器。

协作应该很容易

当你与其他开发者协作时，让他们能够直观地看到你正在开发的应用程序非常重要。这样，他们就可以重现你遇到的 bug，为你所做的 UI 更改提供反馈，以及/或者验证你们共同完成的修复。但是，如果你正在构建的应用程序是 Web 前端或 API（REST、GraphQL 等），并且它在你的开发机器上本地运行，那么你该如何与他们共享它，以便他们能够独立于你并使用他们常用的工具（即不共享屏幕）进行交互呢？你可以……

1. 将你的更改推送到版本控制，并要求他们将其拉取下来并在本地运行应用程序？但是，这需要每个人都设置好自己的环境来运行该应用程序，而且此工作流程不支持实时迭代代码库（等等！）。

2. 将应用部署到云端，然后向所有人发送公开可用的 URL？然而，你可能还没准备好部署，而且这种工作流程也面临与 #1 相同的迭代问题，因为每次代码更改后你都必须重新部署应用（这可不妙！）。

3. 配置路由器转发应用程序端口，然后将你的 IP 地址发送给所有人？这样可以实时更新代码，但是，这需要你将你的机器暴露在互联网上，这可能是不理想的，甚至是不可能的（取决于你的网络代理/防火墙设置）。

4. 设置一个可以通过互联网访问的“堡垒服务器”，然后您可以使用它来反向转发本地端口（如图所示）。这提供了一种更安全的机制，但需要您支付/管理 VPS，而且设置起来有些复杂。

5. 使用localhost.run、serveo或ngrok之类的服务，它们免费且易于使用。但是，除了编辑器之外，它们还需要使用单独的工具，这增加了额外的复杂性。

既然有这么多选项，问题就来了：如何才能共享正在运行的 Web 应用程序？它不仅易于设置、完全安全，还能让您和您的团队实时编辑代码，并立即看到更改。这就是 Live Share 的用武之地！

分享一切

当你连接到 Live Share 会话时，你和“主机”之间会建立SSH 连接，确保所有通信（例如文件编辑、调试步骤）都经过端到端加密。之后，该安全连接可用于实现各种协作环境，包括允许“访客”查看共享的 Web 应用，就像它们在自己的机器上运行一样。但实际上并非如此。这……有点神奇 😎

主持 Live Share 会话时，您可以随时共享服务器，只需Share server...在 Live Share 视图中单击命令，然后指定相应的端口（例如）。该服务器将立即对会话中的所有来宾可用，他们可以使用自己喜欢的浏览器或 API 开发工具（例如Postman8080 ）打开它。

在这里，你们都可以进行编辑，并立即查看更改。更棒的是，如果你的网页应用设置为使用“实时刷新”功能，那么当你或访客保存文件时，每个人的本地浏览器都会自动更新，无论你们身处世界的两端（或在飞机上）！🛫

轻松挤柠檬

虽然共享服务器能够实现强大的 Web 协作开发，但它仍然需要您手动操作，随着时间的推移，这可能会变得有些重复。我们的目标是让协作成为您现有开发工作流程的自然延伸，因此我们认为可以做得更好。我们也确实做到了。

动图

无论您是使用Live Server 扩展托管静态 HTML 文件，还是通过create-react-app、Django、Phoenix等 CLI 运行前端，亦或是F5从 ASP.NET 项目导入 Visual Studio，Live Share 都会自动检测服务器并进行共享。这样，您无需执行任何特殊操作即可使用 Live Share。您只需按照自己喜欢的方式操作，剩下的交给工具处理即可。👍

为了确保安全，我们仅自动共享 Web 框架常用的端口（例如 3000、8080），以防止我们意外共享您意想不到的内容。此外，如果您想禁用自动共享行为并坚持手动共享，您liveShare.autoShareServers也可以禁用该设置。这样，我们可以提供简单、开箱即用的体验，同时仍为开发者提供所需的控制权，让他们充满信心。

释放本地主机

现在，只需单击一下（Live Share也就是那个按钮...）即可共享本地服务器，我们渴望听到所有关于如何进一步改进体验的反馈。Web 和 API 开发是 Live Share 的核心应用场景之一，因此我们期待不断改进协作开发体验，满足每位开发者的需求，无论他们使用何种语言或平台。

如果您遇到任何问题，或有任何疑问/意见，请随时在GitHub上联系我们的团队。此外，如果您愿意参与一项快速调查，这将对我们的团队非常有帮助。谢谢！