用VSCode实现内网穿透的步骤详解

1. 需求分析

不知道大家有没有遇到过这种情况。

就是说，我们在本地跑了一个项目服务，项目地址为localhost，此时我们想把项目demo发给测试或其他人看一下，该怎么办呢？

下面给出两种解决方案。

如果自己和同事都是使用的公司内网，那就比较简单了。把localhost更换为局域网内自己的IP地址，别人就可以直接访问了。

如果自己和同事不在一个局域网内，即大家不在一个地方办公，这就比较麻烦了。通常是需要重新构建服务器，让别人去访问项目的公网地址。

但这样就会有一个问题，倘若每次对项目做了修改，就必须每次重新提交代码并重新构建服务器，才能让别人同步看到更改，这样做非常低效与麻烦。

所以就有了我们今天说的，用内网穿透来解决这个问题。这里使用的工具，是VSCode 1.82 版本推出的一个名为本地端口转发的功能，简单方便！

2. 功能实现

先给小白朋友解释一下内网穿透，然后再列一列功能实现步骤。

2.1 啥是内网穿透？

先简单理解一下，主打一个贴心：

内网穿透，就是通过一个公网服务器作为中转，将本地的端口映射到互联网上。

然后再用专业术语详细解释一下：

内网穿透（NAT穿透）是一种网络技术，用于在私有网络（如局域网）中访问位于公共网络（如互联网）上的设备或服务。

在一个典型的网络环境中，私有网络中的设备使用私有IP地址，而公共网络中的设备使用公共IP地址。由于私有IP地址在公共网络中不可直接访问，因此需要通过内网穿透技术来实现私有网络中设备的访问。

内网穿透通过在公共网络上建立一个转发通道，将公共网络中的请求转发到私有网络中的设备上，从而实现对私有网络中设备的访问。

它通常涉及到使用一个中间服务器或服务，该服务器位于公共网络中，并具有公共IP地址。私有网络中的设备通过与中间服务器建立连接，并在连接建立后，通过中间服务器传输数据。

内网穿透技术在以下情况下非常有用：

• 访问位于私有网络中的设备或服务，如家庭网络中的摄像头、文件共享服务器等。
• 远程管理或访问位于私有网络中的设备，如远程桌面、SSH访问等。
• 在开发和测试环境中，通过公共网络访问局域网中的应用程序或服务。

常见的内网穿透工具或服务，包括：ngrok、frp、花生壳等。它们提供了简单的配置和管理界面，使用户能够快速设置和使用内网穿透功能。

需要注意的是，使用内网穿透将私有网络中的设备暴露在公共网络中，因此需要采取适当的安全措施，如使用安全协议（如HTTPS）、访问控制列表（ACL）等，以保护设备和数据的安全性。

2.2 本地端口转发使用步骤

先在本地启动你的项目服务，比如使用 vite 启动一个项目，端口号为 5173。

然后切换到 端口 视图，点击 转发端口 按钮。

输入端口号 5173，确认后如果你没有登录 GitHub 账号，会提示你登录，按照提示全部允许操作即可，授权成功后会自动跳转回VSCode。

最后，复制转发地址，发给需要的人。

2.3 一些重要的使用说明

默认情况下，转发的端口是私有的，只有使用同一个 GitHub 账号登录的用户才能访问。

如果你想要公开你的服务，让任何人都可以访问，你可以在 端口 视图中右键点击 端口可见性，选择 公共 即可。

如果用户第一次使用这个功能进行访问，打开网址时会出现一些提示说明，直接点击 继续 正常访问即可。

结语

建立这个平台的初衷：

• 打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。
• 通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。
• 遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

以上就是用VSCode实现内网穿透的步骤详解的详细内容，更多关于VSCode实现内网穿透的资料请关注本站其它相关文章！