前端内网穿透localtunnel和natapp

7,022 阅读2分钟

作为前端开发,远程测试是必不可少的。很多时候为了方便我们往往只做内网测试,即同个局域网内,通过localhost或者127.0.0.1即可访问您正在开启的服务。但有些功能必须使用外网才能完成测试,但又不能为了一个测试去搭建一个外网服务器。可以使用内网穿透工具,本地开启的服务器,外网可以访问。

localtunnel (国外网)

Localtunnel 是一个可以让内网服务器暴露到公网上的开源项目

1. 安装 , 基于nodejs环境, 从npm全局安装即可

$ npm install -g localtunnel

2. 开启本地服务器

$ localhost:8080

开启本地服务器方法很多种 , 如 apache , nginx , IIS ; 

nodejs  : express , webpack 构建工具等php : $ php -S localhost:8080laravel : $ php artisan serve 8080python3 : $ python -m http.server 8080python2 :  $ python -m SimpleHTTPServer 8080


3.  开启localtunnel服务


    1)指定的端口号 --port 8000 必须与 localhost的8000相对应

    2)--subdomain mitu : 指定前缀为 mitu

    3) lt 为localtunnel 缩写

4. 最后, 在外网浏览器输入 https://mitu.localtunnel.me 即可访问本地的localhost:8000, 需要注意的是,localtunnel的服务器是国外,有时候访问可能不太理想


natapp (国内网站)

官网: natapp.cn/  , 进入官网后注册账号登录

1.  进入用户中心


2. 可以购买不同的隧道,有不同的功能, 如绑定自己的域名,都有详细介绍., 简单的测试建议使用免费隧道。 购买隧道后在“我的隧道”有详细信息,注意authtoken,一会配置客户端时使用, 


3. 最右边进入“配置”, 可配置指定的端口,默认80


4. 下载 客户端软件, 根据自己实际需求下载


5. 下载后解压缩得到 natapp.exe文件, 还需下载config.ini文件natapp.cn/article/con… ,将config.ininatapp.exe放在同个目录 , 并打开config.ini 添加authtoken (购买时“我的隧道”中的authtoken)


6.  在 natapp.exe 的目录下命令行运行 $ natapp 


http://i4fdpf.natappfree.cc -> 127.0.0.1:8000, 本地的服务映射到了 http://i4fdpf.natappfree.cc, 外网请求http://i4fdpf.natappfree.cc即可访问到本地的localhost:8000, 注意此时本地必须开启一个localhost:8000的服务。


            

    总结: 

1. 两个工具均需要开启本地服务, 然后通过对于的端口号(省略时是默认80)映射,

2. localtunnel 配置简单, 但外国服务器有时候访问不理想

3. natapp是国内服务器,但配置相对繁琐