前端开发神器之ngrok

frontoldman 发布于2019-08-21 17:17 / 1838人阅读

摘要：能做什么，为什么是前端开发神器内网穿透，映射本地开发环境到公网，模拟多终端线上环境。努力成为优秀的前端开发工程师

ngrok能做什么，为什么是前端开发神器？

内网穿透，映射本地开发环境到公网，模拟多终端线上环境。

结合一个很简单的PWA demo，举个简单的例子

1.克隆demo到本地

git clone https://github.com/minimal-xyz/minimal-pwa.git

2.本地8080端口运行demo

cnpm i http-server -g
http-server -c-1
chrome http://localhost:8080

3.ngrok内网穿透到公网

ngrok http 8080

4.查看公网地址

chrome http://127.0.0.1:4040/inspect/http

5.公网多终端访问

①使用另外一台或本机desktop

chrome http://733a1ad2.ngrok.io

②使用android，safari mobile，ff mobile等mobile phones
地址栏手动输入http://733a1ad2.ngrok.io

优点：

1.一条url甩产品脸上
2.内网穿透多终端测试
3.监控请求和响应

缺点：

1.响应时间较长
2.安全性不保证

tips:

1.ngrok下载地址：https://ngrok.com/download
2.环境:git，node，cnpm，ngrok，Chrome
3.chrome和ngrok命令需设置环境变量
4.以上命令在终端中运行即可
5.协议选择https和http都行

题外话：
　　今天MDN官方宣布say goodbye to firebug，say hello to pwa and view sources，最后说了很多煽情的话。我只在很久以前用过一次firebug改dom装逼，所以对这些煽情的话无感，倒是对pwa和view source有了很深的兴趣。
　　于是借这个大好的加班前夜，学了下PWA，学习链接附上：https://zhuanlan.zhihu.com/p/...，他们家的各种教程不能太好，无论前端还是nodejs，真心不错，以后外卖我只吃饿了么。
　　无意中发现ngrok这个神器，一开始以为这家伙只能做内网穿透，后来发现既然公网地址提供出来了，手机上也可以访问啊，一下子有些兴奋，因为第一家实习时学到的移动端前端测试，需要手动配置本地localhost开发环境，而且需要连接到360免费wifi，较为麻烦。
　　其实ngrok还有很多其他的功能，有兴趣的同学可以到https://ngrok.com/product查看。

努力成为优秀的前端开发工程师！

GPU云服务器云服务器 react开发神器云栖大会开发者之夜 Ngrok 前端开发用什么前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89359.html

Windows平台后端开发环境神器Laragon——裂墙推荐！

摘要：是一个可移植，隔离，快速且功能强大的通用开发环境，适用于，，，，，。每每这样都绝望地将项目放到推荐的标准开发环境上面跑，杀鸡也用牛刀着实不痛快。 Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ru...

CoderDock 2019-07-01 12:45 评论0 收藏0
Windows平台后端开发环境神器Laragon——裂墙推荐！

摘要：是一个可移植，隔离，快速且功能强大的通用开发环境，适用于，，，，，。每每这样都绝望地将项目放到推荐的标准开发环境上面跑，杀鸡也用牛刀着实不痛快。 Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ru...

yanest 2019-07-25 15:07 评论0 收藏0
前端那些小众而又精美的网站及工具

摘要：写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我在这里感激不尽让我们发现美并记录它第一次写文章请多多包涵如有我没有写到的但又是一些好用的工具及写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我...

Edison 2019-08-02 16:02 评论0 收藏0