目录
🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步涉猎Python人工智能开发和前端开发。
🦅主页:@逐梦苍穹
📕您的一键三连,是我创作的最大动力🌹
如果想要让自己简历上的项目经历显得更真实,最好是把项目上线并且提供地址给招聘方访问。
没有服务器,那玩意儿要钱,咋办?
项目用的服务太多了,数据库 Redis 消息队列 ES 什么的,想上线太麻烦了,咋办?
今天就给大家分享两个免费的神器,不用买服务器、不用自己部署各种服务,直接让别人访问到你电脑上的网站!
1 、简介
先思考一个问题:为什么别人无法直接访问你电脑上运行的网站和服务?
答案很简单。大多数情况下,我们的个人电脑都处于内网,即没有可公开访问的独立 IP 地址,因此其他内网用户找不到你,就没办法和你建立网络连接。
为了实现上述需求,我们采取的方法是 内网穿透 。
什么是内网穿透呢?
它的作用是:将内网的电脑 "暴露" 到公共网络。可以简单理解为一个中间人,由于他知道你的电脑地址,所以能建立一条隧道,帮助其他用户访问到你的计算机。

这次要使用的免费内网穿透工具是 Ngrok和cpolar。
2 、Ngrok
首先我们访问 Ngrok 官网,使用 GitHub 或者Google邮箱进行注册登录。
2.1 、下载安装


用谷歌登录,现在会出现一个需要验证的页面:

去手机的Google Play商店搜索谷歌验证器,获取一个验证码输入即可:

注册登录成功后,根据自己的操作系统选择下载 Ngrok 的安装压缩包:

2.2 、运行
接下来我们参照官方文档,在本地执行 ngrok 命令添加用户的 authtoken:

直接复制上图的命令,进入到 ngrok 文件所在的目录执行,如下图:

现在,你的账号信息已经保存到本地的 ngrok 配置文件中了,接下来只需要执行 ngrok http <端口号> 命令即可启动内网穿透服务。
如下图,注意将端口号改为自己本地项目占用的端口号,比如前端一般是 80、后端一般是 8080。

Ngrok 自动为我们生成了一个域名,指向本机的服务:

在浏览器访问该域名,就能访问到自己电脑上启动的项目了。
2.3 、固定域名
通过上述命令直接启动内网穿透,每次得到的访问域名是随机生成的,这不利于我们持续访问。
可以从 ngrok 官网找到静态域名的配置:


第一次进入域名配置页面时,如果没有域名,可以免费创建一个。
创建好域名后,复制下图的 ngrok 启动命令:

然后在终端中执行该命令即可,本质上就是在启动 ngrok 时指定了 domain 参数:

通过这种方式,每次的内网穿透域名就都是固定的。
2.4 、配置多服务
以上是单服务的内网穿透,但实际情况下,我们本地可能不仅有前端、还有后端服务,那么如何利用 Ngrok 同时内网穿透多个服务呢?
这就需要我们修改 ngrok 的配置文件,手动配置隧道。
首先根据官方文档的指引,找到自己电脑上的默认 ngrok.yml 配置文件:

然后在编辑器中修改这个文件,比如配置前端(frontend)和后端(backend)两条隧道,对应的本地服务端口分别为 80 和 8080;
通过这种方式,每次启动内网穿透得到的域名依然是随机的。
我们可以通过修改 ngrok.yml 文件的 domain 配置来指定域名。配置文件内容如下:

通过 ngrok start <隧道名称> 配置指定启动哪个隧道:
bash
ngrok start frontend
ngrok start backend
或者执行 ngrok start --all 命令同时启动所有隧道,运行结果如下,同时在 ngrok-free.app 域名下分配了 2 个子域名,并指向对应服务:

访问不同的域名,就能访问到前端或后端了
3 、cpolar
3.1 、下载安装

安装过程中,一直下一步即可。
3.2 、运行
cpolar 指定authtoken
复制authtoken:

执行命令:

获取临时域名
执行命令:

获取域名:
