没有服务器也能让你的本地项目能在公网上访问 💯💯💯

可能在开发的过程中我们会遇到这样子的一个需求，自己编写的网站想给别人预览，但是我又没有服务器，这就导致了无法给其他非本专业的人实现在线预览，这就让我们很头疼。

在 VS Code 中，端口转发的作用是将一个本地端口映射到远程机器上的一个端口，以便可以通过本地机器访问远程机器上的服务或进行调试。这对于在本地开发和测试应用程序时，需要访问远程机器上的服务或端口的情况非常有用。通过端口转发，可以方便地在本地机器上访问远程机器上的服务，而不需要进行额外的网络配置。

当你在本地机器上请求访问某个被转发的端口时，请求会通过 VSCode 设置的隧道发送到远程机器上相应的端口。这个过程是透明的，使得本地应用能够像访问本地服务一样访问远程服务，而无需复杂的网络配置或公开远程服务到公网上。

接下来我们先了解一下内网穿透。

内网穿透

假设我们在家中有一个安装了监控摄像头，并且想要远程通过手机或电脑来查看监控画面。通常情况下，你的摄像头会连接到你家庭的局域网中。但是，由于你的家庭网络拥有一个路由器，它会保护你的内网设备不受外部访问的威胁，因此无法直接从公网访问你的摄像头。

为了解决这个问题，你可以使用内网穿透技术。你可以在家里的计算机或路由器上运行一个内网穿透工具，该工具会与一个位于公网上的中间服务器建立连接。当你想要远程查看监控画面时，你的手机或电脑将发送请求到中间服务器。中间服务器收到请求后，会通过网络将数据流量转发到你家庭网络中的摄像头设备。最终，你可以通过公网访问到你家中摄像头的监控画面，就像摄像头直接连接在公网上一样。

内网穿透是一种技术，允许从互联网上访问位于局域网(LAN)中的设备或服务，即使这些设备或服务没有公网 IP 地址也可以。这种技术在远程工作、家庭服务器访问、物联网(IoT)项目以及开发中测试位于本地的 Web 应用等场景中非常有用。接下来，我会详细解释内网穿透的原理、常见的实现方法以及使用场景。

它的基本原理是通过一个位于公网上的中介服务器来转发请求和数据。因为直接从互联网访问局域网中的设备通常是不可能的------由于 NAT(Network Address Translation)和防火墙的存在，外部的数据包不能直接发送到局域网内部的私有 IP 地址。内网穿透技术通过建立从局域网设备到公网服务器的出站连接来绕过这些限制，从而实现双向通信。

内网穿透的实现基于几个关键技术：

1. 反向代理：这是一种常见的内网穿透实现方式，通过在公网上设置一个反向代理服务器来接收来自互联网的请求，然后将这些请求转发到局域网内的目标设备或服务，并将响应返回给互联网上的客户端。Nginx 和 Apache 都可以配置为反向代理。

2. VPN（虚拟私人网络）：通过建立 VPN，可以将设备虚拟地置于局域网中，使其看起来就像是直接连接到该网络上的一样。这种方法适用于需要完整访问网络资源的场景。

3. 专用内网穿透工具：有些工具如 Ngrok、Frp（Fast Reverse Proxy）、LocalTunnel 等，专门设计用于简化内网穿透的过程。这些工具通常提供一个公网访问点（URL），将请求转发到局域网内的服务上。

vscode 的端口转发

要想使用 vscode 的端口转发，首先我们应该启动我们自己的项目，如下图所示：

这个时候我们的 nextjs 项目被允许在了 3000 端口上了，这个时候我们继续新开一个终端，并且切换到端口中：

并点击转发端口，如下图所示：

首先添加我们服务的 3000 端口，这个端口要跟我们前面 nextjs 运行的端口一样，否则访问不了，你会看到这样的结果，如下图所示：

目前外网还是不能访问的，我们还要添加一些内容的，我们要编辑端口可见性，将其设置为公用：

当出现提示框的时候我们选择继续：

点击转发地址栏里的浏览器图标，就可以直接跳转到浏览器了，第一次有一个确认选项，选择 continue，就可以了:

这个时候我们可以在我们的手机上来访问这个服务：

这个时候我们的本地服务也就成功地被外网访问了。

总结

通过这种方式，如果我们有一个远程开发的团队，但是又没有服务器的话，我们可以把我们编写的一些后端接口提供给其他前端小伙伴进行开发，而不需要前端的小伙伴拉取后端项目来进行启动或者将最新代码部署到服务器。

最后分享两个我的两个开源项目,它们分别是:

• 前端脚手架 create-neat
• 在线代码协同编辑器

这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗