Ngrok,一款可以帮助你展示网站和联网开发的工具


使用Ngrok的目的就是为了可以让别人通过网络访问到自己本机上的项目

下面是一个简单的使用教程,详细的查看官网英文文档。


第一步:

登录官网:https://ngrok.com/

注册或者登录



第二步:



按照上图步骤,首先下载相应的版本

如下为我的解压后的存放目录

按着【shift】键,单击右键,弹出菜单选择“在此处打开命令窗口”

可以通过“ngrok help”查看帮助信息

回车,OK,保存到下面目录文件下:

接着输入“ngrok http 80”,回车

弹出如下窗口,online表示运行成功



用浏览器打开: http://localhost:4040/

进入控制台:



 到此表示运行正常


接下来要运行自己的项目,验证的确可以通过外网访问自己的项目



 我将自己的项目部署到Tomcat上,tomcat的默认端口是8080



  启动tomcat

这时候通过:http://localhost:8080,能访问到tomcat访问页


双击启动ngrok



 已经设置过授权码,所以不用再次设置,直接运行命令:ngrok http 8080,即可。( online表示启动正常)

同时在官网,登录后,能在status标签页里看到自己绑定的URL



 点击链接可以直接访问你设置的主页,因为我没有修改tomcat的配置文件,所以访问的还是tomcat的欢迎页面


通过:http://3e1592be.ngrok.io/Lottery/index.jsp,即可以访问到我的项目主页

简单的说就是http://3e1592be.ngrok.io代替了我们平时开发用的http://localhost:8080罢了


不过遇到很奇怪的是,我第一次访问我的主页是jq库没有被加载到,导致我页面的js不能正常加载。

然后我换到手机上测试一下,手机上竟然可以。

于是我在电脑上刷新了一次页面,这次正常加载了。


以上只是简单的证明了,通过简单的设置,的确可以通过Ngrok从外网访问到我们自己PC内网上的项目


还有更多的设置,详情查看Ngrok的官网Docs帮助文档


该软件不仅能展示自己的网站,对于需要联网进行的开发,例如微信开发方面也是非常有帮助的,详细的自行查看网上资料


来自为知笔记(Wiz)

时间: 2024-08-08 01:26:36

Ngrok,一款可以帮助你展示网站和联网开发的工具的相关文章

14款优秀的代码展示网站

本文列出的这些网站可以分享和展示你的代码.它们都提供在线预览功能,所以别人可以看到你的代码如何运行.它们有时候也被称作“代码广场”或者“沙箱”. 它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实际编程过程会用到的功能.例如,当你需要别人帮你调试源代码的时候,可以使用这些网站分享你有问题的代码,然后把链接分享给帮助你的人.这使得他们可以方便的查看你的源代码并提供解决方案. 1.CodePen 在CodePen上,你可以演示被称作 pens 的代码.Pen 由 HTML.CSS和JS组成.C

干货分享!12款响应式的移动网站模板免费下载

如果你打算开发网站,你想要关注的第一件事就是网站的外观和感觉.另外用户体验很重要,现在是属于移动互联的时代,用户有可能通过移动设备浏览你的网站,因此同样重要的是要考虑你的网站在移动端的使用体验. 这个特殊的列表包含一组基于 HTML5 和 CSS3 的移动网站模板,你可以免费下载这些模板,没有任何限制.赶紧收藏吧:) 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实

19款高端大气企业网站模版

下载地址:点击下载 1.  css3简洁时尚商务整站企业模板 2.  暗红色游戏动漫设计公司html模板 3.  简洁的摩托车企业网站模板 4.  简洁干净的企业HTML5网页模板 5.  简洁极致小清新作品展示灰色整站模板 6.  简洁设计师作品展示响应式模板下载 7.  简洁时尚大气的商业网站模板 8.  简洁素雅扁平化插画设计师网页模板 9.  焦点大图摄影行业网站模板 10.        咖啡大图新闻杂志类网站模板 11.        宽屏大气的互联网科技公司css3企业模板 12.

进阶学习,如何无代码设计一款美观且实用的网站?

作为一门新兴的边缘性职业,网站设计既要从外观上创意,又要适当结合图形.版面及交互设计等相关原理,使得它成为一门独特且令人神往的艺术.毫无疑问,好的设计能让网站在诸多站点中脱颖而出,优秀的创意和表现方式能给浏览者留下深刻的印象,从而持续间接地增加网站访问流量和转换率.然而,要设计出一款兼顾"颜值和实用性"的个人/企业网站并不容易,更不用说让设计想法落地实现出来对大多数人说更是一项艰巨的任务. 那到底如何才能在时间和技能有限的情况下,设计出一款令人满意甚至网红的网站呢?小编认为,在设计的初

5 款让微博等社交网站更加清爽好用 Chrome 扩展

本文标签: Chrome扩展 Extentions 社交网站 审美 Google 原文地址: <5 款让微博等社交网站更加清爽好用 Chrome 扩展> 不论你是在新浪微博上了解朋友近况还是浏览各种段子,或者是去 Facebook 和 Twitter 上看一看外面的世界 follow 一下自己喜欢的明星,社交网站几乎占据了我们大部分的上网时间. 虽然网站内容每天都在更新,但是天天盯着一模一样的网页 UI 看久了,难免会出现审美疲劳:而新浪微博也因为加入了各种各样用不到的功能,而变得臃肿不堪,每

【ASP.NET基础】简单企业产品展示网站--产品编辑CIUD

摘要:本文记录创建一个小的.简单的产品网站的步骤. 一,搭建一个简单的产品展示网站,熟悉以下知识点:NVelocity模板引擎.Ajax无刷新页面请求,文件上传,Row_Number实现分页,ckEditor使用,Bootstrap的简单使用.[点击查看网站效果] 二,网站基本框架:新建项目ProductWeb ,并完成基本框架的搭建(SQLHelper,ckEditor,Common_Nvelocity,Bootstrap等添加到项目中).并创建ProductWebDB .[下载基本模板框架]

20款高质量的 HTML5 网站模板【免费下载】

下面的列表集合了20款高质量的免费 HTML5 网站模板,这些专业的模板能够让你的网站吸引很多的访客.这些免费的 HTML5 模板虽然不是响应式的,不过都很实用.赶紧来看看. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计:25个应用视差滚动单页网站 经典网页设计:20个新鲜出炉 HTML5 网站 经典网页设计:20例简洁精美着陆页面设计 经典网页设计:20个简约风格电子商务网站 Tapestry 在线演示     免费下载 EX Machina 在线演示    

15款HTML5/CSS3案例展示,导航,日历,钟表。

对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画很酷 CSS3菜单我们之前已经分享很多了,有3D菜单.下拉菜单.Tab菜单等,具体大家可以移步至CSS3菜单栏目下查找.今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷,鼠标滑过菜单项时会有一个漂亮的遮罩移动过来,并且这款动画菜单还有非常酷的图标,菜单整体效果很大气. 在线演示     

4款超强大素材资源网站,收藏起来刻不容缓!

还在为写作找不到素材而烦恼?或还在百度一页一页的翻找自己需要的题材呢?素材资源找不到是因为你没用对方法,今天特意为大家整理了4款超强大的素材资源网站.有了这些,相信你能很快寻找到需要的资源了. 1-自媒咖这是一个免费的写作素材网站,聚集了各类自媒体平台,如UC.今日头条.百家号.天天快报.凤凰.新浪.简书等,而且还会实时更新作者排行榜. 2-办公资源办公资源是个模板素材丰富的网站,不仅有PPT模板.Word.Excel模板:还有免费的背景图.音效素材:以及vip免费后的offic教程视频.让你的