必知必会!怎样让别人看到我的(本地)网页或项目?-(Ngrok内网穿透)-(免费)-(保姆级教学)

初学者适用,useful小技巧,收藏!



前言

小朋友们可能都有很多问号???
在这里插入图片描述

我制作的精美的、功能强大的网页或项目只能在本机运行 ,怎样才能让别人看到呢?

答:把电脑搬到别人面前,运行给他看。

不不不,在某些情况和场合下,这肯定是行不通的,比如说:你做了一个外包项目,甲方想看看你的成果;在今年这种情况下,我们在家上网课,但是想让老师感受一下你的实验成果。。。。。。
所以,我们还是得学会这个小技巧的,让别人随时随地能看到你的成果。


保姆级教学

在这里插入图片描述

  • 首先,你要将你的项目部署到服务器上(博主选择部署到自己电脑的Tomcat上),每个人的情况不同,大家可通过学习其它教程先学会如何部署项目。

博主这边以一个简单的JAVAWEB项目作为示例,我将项目部署在本机的8080端口

下图为博主在IDEA中配置Tomcat的信息
在这里插入图片描述

  • OK,弄好之后把你的项目运行起来,你会发现浏览器所访问的地址是http://localhost:8080/***,后面这段***是不是就让人很难受?
    虽然在这里看起来可能无所谓,但等下我们可是要通过一个网址来对其进行访问的,后面一通赘余,不爽不爽。

所以,我们点击上面那张图中的 部署 就会出现如下图所示的界面。

在这里插入图片描述
注意:最下面的Application context中的内容就是上面说的http://localhost:8080/*** 中的 *** ,所以,我们可以将其设置为自己想要的内容,此处博主将其设置为空。

  • 网址怎么来呢?

1.进入这个网址:http://www.ngrok.cc/
2.进行注册,并且登录。
3.出现如下界面
在这里插入图片描述
点击隧道管理中的“开通隧道
于是,就可以选择你所需要的服务器了;
【免费】:翻到最下面,最后一个是免费的,我们选择它(有需要的小朋友可以选择别的)
在这里插入图片描述
进入后,按自己要求填写好相关信息
注意:端口号填项目部署在本机的端口号,博主这里部署在8080端口,所以填127.0.0.1:8080
在这里插入图片描述

然后确认自己的操作,就会进入如下图所示的界面

在这里插入图片描述
点击客户端下载并按自己的电脑型号配置选择文件,就会下载一个压缩包,将其解压会得到如下图所示的两个文件夹。
该压缩包博主已经打包放在资源里了,有需要的小伙伴可以自取(Windows x64)
在这里插入图片描述
打开windows_amd64
在这里插入图片描述
双击打开Sunny-Ngrok启动工具.bat
在这里插入图片描述
提示我们输入客户端id,在哪呢?

其实这就是我们在隧道管理界面的那个隧道id
在这里插入图片描述

将其复制到命令行中,回车

  • 大功告成

这个时候,我们访问这个域名就可以访问我们本地的项目了!!!

在这里插入图片描述

  • 展示一下:
    在这里插入图片描述

此时,命令行中就会显示资源访问记录
在这里插入图片描述


注意事项

  1. 本地项目一定要跑起来
  2. 端口一定要设置正确
  3. 命令行不能关
  4. :点赞+收藏

科普

Ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。Ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放。

  • 什么是反向代理?

反向代理在计算机网络中是代理服务器的一种。服务器根据客户端的请求,从其关系的一组或多组后端服务器(如Web服务器)上获取资源,然后再将这些资源返回给客户端,客户端只会得知反向代理的IP地址,而不知道在代理服务器后面的服务器集群的存在。


博主也是刚学会就来跟大家分享了,所以有什么描述得不准确的地方还希望小朋友们能指正


有趣有用的小技巧,你学废了吗?


关注博主,学习更多小技巧

  • 27
    点赞
  • 147
    收藏
    觉得还不错? 一键收藏
  • 24
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值