ngrok搭建内网穿透.md

ngrok搭建内网穿透

什么是内网穿透？

简单来说，就是将本机创建的局域网 http 服务可以让外网访问。

假设你电脑的局域网 IP 为：192.168.1.138

当你调试 React 项目时，你自己可以通过下面 2 个地址访问：

1. http://localhost:3000
2. http://192.168.1.138:3000

此时你希望外网某个人也可以访问，那么就用到内网穿透了。

内网穿透的工具非常多，本文所讲的 ngrok 免费、简单、好用。

当然 ngrok 免费用户也会有一些功能上的限制，但是对于个人而言足够了。

ngrok 简单好用到什么程度呢？

只要安装好 ngrok，只需敲 2 行命令可以了。

下载 ngrok

官方下载地址：https://ngrok.com/download

我个人电脑为 win10，我下载解压后得到的是 ngrok.exe。

把这个文件放到你想放的任意目录里。

注册一个 ngrok 账户

官方用户注册：https://dashboard.ngrok.com/signup

这一步，如果你使用 gmail，可能需要 “科学爱国上网神器”

注册成功后，一定要去自己的邮箱里激活账户，否则后面命令操作将会失败。

第1行命令(仅第1次执行)：

注册完成后，登录用户后台，在默认显示的开始页面中，复制

ngrok config add-authtoken 2GIspVt1b7sSbIFhYY...

后面隐去的那段是你这个账户的令牌(token)

切换到自己电脑的 ngrok.exe 所在目录，然后执行：

.\ngrok config add-authtoken 2GIspVt1b7sSbIFhYYxz4TdEx3j_sspWzxbh5r5rq6NeYope

加 .\ngrok 是为了让命令可以找到当前目录下的 ngrok.exe

顺利执行后，会将令牌写入到本机用户数据目录中。

以后再想启用 ngrok 则不再需要执行该命令了。

第2行命令

假设我本机已经开启了一个服务：http://localhost:3000

那么你需要做的仅仅是执行下面这行命令：

.\ngrok http 3000

在命令执行结果中，会随机给你一个外网可访问的域名，例如：https://6b47-39-149-15-137.jp.ngrok.io/

别人就可以通过这个域名访问你本机的 http://localhost:3000 了。

关闭命令窗口 或 执行 ctr + c 可结束内网穿透，此时外网将无法再访问上述域名了。

注意事项

1. 每一个免费的 ngrok 用户同一时间仅可创建 1 个内网穿透服务。

   假设你想把多个 内网端口都转换成外网可访问的，则需要收费了

   如果付费，你还可以申请到一个自定义、固定的 ngrok 专属域名

2. 如果你的 http 服务中可能需要请求第三方后端接口，或许会存在跨域或拒绝访问的情况。

除了 ngrok，花生壳、向日葵 也都提供类似的内网穿透服务，只不过都是需要收一点费用的。