前端開發神器之ngrok

frontoldman 發布于2019-08-21 17:17 / 1952人閱讀

摘要：能做什么，為什么是前端開發神器內網穿透，映射本地開發環境到公網，模擬多終端線上環境。努力成為優秀的前端開發工程師

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 前端開發用什么前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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