ngrok | 内网穿透,支持 HTTPS、国内访问、静态域名

前言

当我们需要把本地开发的应用展示给外部用户时,常常会因为无法直接访问而陷入困境。

就为了展示一下,买服务、域名,搭环境,费钱又费事。

那有没有办法,让客户直接访问自己本机开发的应用呢?

这种需求场景这么多,当然有现成的技术 —— 内网穿透。

什么是内网穿透?

内网穿透是一种网络技术,它允许外部互联网用户访问部署在本地网络(内网)中的服务或设备。

通常,家庭或企业网络都位于内网,连接到外部互联网需要通过 NAT(网络地址转换)或者路由器来实现。

然而,由于内网中设备的 IP 地址通常是私有的,外部用户无法直接访问这些设备,这就带来了两个主要挑战:

  1. NAT 问题:内网设备的私有 IP 地址无法直接在互联网中使用,需要通过路由器将外部请求转发到内网设备。

  2. 动态 IP 地址:即使能够实现 NAT 转发,本地网络中的 IP 地址可能是动态的,每次重启设备时会发生变化,增加了管理和访问的复杂性。

常见的内网穿透解决方案

  1. 端口映射:通过在路由器上进行端口映射,将外部流量定向到内网中的特定设备。这种方法虽然可行,但通常需要配置路由器并且涉及安全风险,操作复杂。

  2. 第三方穿透工具:如 ngrok、frp 等工具通过云中转服务器,将本地服务映射到外部可访问的 URL,从而解决了复杂的端口映射问题。

反向代理技术

反向代理是内网穿透的核心技术之一。

反向代理服务器位于用户和内部服务器之间,接收外部请求后,将请求转发到内部服务器,再将响应返回给外部用户。

通过这种方式,反向代理隐藏了内部服务器的实际位置和架构,确保了内部网络的安全性。

现在,我们已经理解了内网穿透和反向代理的基础知识,接下来我将介绍一个强大的工具——ngrok,它能让内网穿透变得简单高效。

什么是 ngrok?

ngrok 是一个反向代理工具,它通过建立隧道,把你本地的服务映射到一个外部可访问的 URL。ngrok 通过其强大的功能,解决了传统内网穿透方式的复杂性和安全性问题。

通过 ngrok,开发者可以将本地运行的 HTTP 或 TCP 服务映射到一个公网可访问的 URL,从而让远程用户通过这个 URL 访问到本地服务。

ngrok 的主要功能

  1. HTTPS 支持:ngrok 自动为你的本地服务生成 HTTPS URL,确保数据传输的安全性。
  2. 自定义域名和子域名:ngrok 支持绑定自定义域名或为你的服务生成静态子域名,确保 URL 不会频繁更换。
  3. 数据分析:ngrok 提供实时流量数据分析,帮助你监控每一个请求和响应,快速发现问题。
  4. 隧道管理:可以轻松管理和查看正在运行的隧道,支持多个隧道同时运行。
  5. 多协议支持:除了 HTTP/HTTPS,ngrok 还支持 TCP 和其他协议的映射。
  6. 国内可用:这一点,遇到过相关问题的人,算是发现救星了~

如何使用 ngrok

接下来我们来实际操作,看看 ngrok 是如何工作的。

假设你在本地运行了一个 Web 应用,监听的端口号为 80,我们可以通过以下几步将它暴露到互联网。

第一步:下载并安装 ngrok

访问 ngrok 官方网站,根据你的操作系统下载对应的安装包并进行安装。

  1. 对于 Windows 用户,下载后解压到一个目录,打开命令行工具,进入该目录即可使用。
  2. 对于 macOS 用户,可以通过以下命令直接安装:
    brew install ngrok/ngrok/ngrok
    

第二步:创建 ngrok 账户并获取 Authtoken

ngrok 的部分功能需要登录后才能使用。

创建账户后,你会获得一个 Authtoken,在命令行中执行以下命令,将这个 token 添加到 ngrok 中:

ngrok cofig add-authtoken <你的-token>

在这里插入图片描述

第三步:启动 ngrok

假设你有一个本地的 Web 服务运行在端口 80 上,现在我们可以使用 ngrok 将其映射到公网。

在命令行中执行:

ngrok http 80

在这里插入图片描述

此时,ngrok 会为你生成一个公网可访问的 URL,类似于:
在这里插入图片描述

你可以将这个 URL 发送给外部用户,他们通过访问这个地址即可访问你本地运行的应用。

第四步:监控和管理隧道

ngrok 提供了一个方便的 Web 界面,用于查看隧道的实时流量和请求详情。

你可以通过访问以下本地 URL 进行监控:

http://localhost:4041

具体端口是哪个,根据 ngrok 启动的提醒来确认:
在这里插入图片描述

在这里插入图片描述
在这个界面,你可以查看到每个请求的详细信息,包括请求头、响应数据等。

高级使用:使用静态子域名

我们上面的步骤,生成的公网域名,每次都会变化。
如果你不希望 ngrok 每次启动时生成随机的 URL,可以使用 ngrok 提供的静态域名。
在这里插入图片描述
如上图,使用 ngrok 提供的静态域地址映射本地端口。
在这里插入图片描述

安全提示

尽管 ngrok 使内网穿透变得简单高效,但在使用时仍需要注意以下几点:

  1. 生产环境慎用:ngrok 更适合开发和测试环境,不建议在生产环境中使用。
  2. 保护 Authtoken:不要将你的 ngrok Authtoken 泄露给他人,避免产生不必要的安全风险。
  3. 访问控制:ngrok 支持为隧道设置访问控制,确保只有授权的用户才能访问你的服务。

总结

ngrok 是一个功能强大的工具,特别适合开发者在开发和测试阶段展示和共享本地应用。

通过简单的命令,ngrok 能够快速实现内网穿透,同时支持 HTTPS、静态域名、自定义域名等高级功能。

当你下次遇到内网穿透的需求时,试试 ngrok 吧。

希望对你有帮助。

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你无法通过ngrok进行内网穿透访问时,可能有几种可能的原因。首先,你输入的访问web网站的外网地址可能不存在,或者你的ngrok断开了。确保你的ngrok一直开着,这样才能保证你访问的那个网站存在。如果ngrok断开了,那个网站就无法被访问到了。 另外,可能是你遇到了报错ERR_NGROK_3022。这个报错意味着你输入的访问web网站的外网地址不存在或者ngrok断开了。你需要确保输入的地址正确,并且ngrok一直保持连接状态。 如果你遇到了报错ERR_NGROK_3022,可能你一开始并没有意识到这个报错的意思,以为这是正常的。但是当你无法通过这个路径访问内网的网站时,你才意识到有问题。 为了解决ngrok内网穿透访问不了的问题,你可以参考以下步骤: 1. 首先,确保你已经购买了ngrok服务器并且获得了相关配置信息,特别是隧道id。 2. 下载并安装适合你电脑系统的ngrok客户端。 3. 解压并启动ngrok客户端,双击打开Sunny-Ngrok启动工具.bat。 4. 输入之前服务器的隧道id,并成功启动ngrok服务器。 5. 注意,左边的地址是外网地址,右边是内网地址,以及项目对应的端口号。 6. 如果在本地通过设置域名访问vue项目时出现Invalid Host header错误,你可以按照以下方法解决: - 对于使用vue-cli2创建的项目,在webpack.dev.conf.js中的devServer对象中添加disableHostCheck: true。 - 对于使用vue-cli3创建的项目,在项目根目录下创建vue.config.js文件,并添加module.exports = { devServer: { disableHostCheck: true } }。 7. 确认你的外网访问成功,以后只要项目在运行,你可以在任何地方通过外网地址随时访问项目。 希望以上信息对你有帮助,如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [norok内网穿透如何解决ERR_NGROK_6022,ERR_NGROK_3200的报错](https://blog.csdn.net/qq_62129885/article/details/126894332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Ngork内网穿透,远程访问项目并解决Invalid Host问题](https://blog.csdn.net/weixin_43857576/article/details/114498105)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值