likes
comments
collection
share

功能问题:如何用VSCode实现内网穿透?

作者站长头像
站长
· 阅读数 2

大家好,我是大澈!

本文约1500+字,整篇阅读大约需要3分钟。

感谢关注微信公众号:“程序员大澈”,免费领取"面试大礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 需求分析

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

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

功能问题:如何用VSCode实现内网穿透?

下面给出两种解决方案。

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

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

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

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

2. 功能实现

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

2.1 啥是内网穿透?

简单理解一下,主打一个贴心:

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

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

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

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

功能问题:如何用VSCode实现内网穿透?

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

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

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

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

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

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

2.2 本地端口转发使用步骤

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

功能问题:如何用VSCode实现内网穿透?

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

功能问题:如何用VSCode实现内网穿透?

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

功能问题:如何用VSCode实现内网穿透?

功能问题:如何用VSCode实现内网穿透?

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

功能问题:如何用VSCode实现内网穿透?

2.3 一些重要的使用说明

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

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

功能问题:如何用VSCode实现内网穿透?如果用户第一次使用这个功能进行访问,打开网址时会出现一些提示说明,直接点击 继续 正常访问即可。

功能问题:如何用VSCode实现内网穿透?

结语

建立这个平台的初衷:

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

感谢关注微信公众号:“程序员大澈”,免费领取"面试大礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!