不用服务器,1 分钟上线网站!

大家好,我是鱼皮,今天分享一个非常实用的小教程。

之前反复跟大家强调过,想要让自己简历上的项目经历显得更真实,最好是把项目上线并且提供地址给招聘方访问。

结果有同学表示无奈:

  • 鱼皮啊,我没有服务器,那玩意儿要钱,咋办?
  • 鱼皮啊,我项目用的服务太多了,数据库 Redis 消息队列 ES 什么的,想上线太麻烦了,咋办?

今天就给大家分享一个免费的神器,不用买服务器、不用自己部署各种服务,直接让别人访问到你电脑上的网站!

这种方法尤其适于参加竞赛,需要给评委演示项目的场景。

内网穿透

先思考一个问题:为什么别人无法直接访问你电脑上运行的网站和服务?

答案很简单。大多数情况下,我们的个人电脑都处于内网,即没有可公开访问的独立 IP 地址,因此其他内网用户找不到你,就没办法和你建立网络连接。

为了实现上述需求,我们采取的方法是 内网穿透

什么是内网穿透呢?

它的作用是:将内网的电脑 “暴露” 到公共网络。可以简单理解为一个中间人,由于他知道你的电脑地址,所以能建立一条隧道,帮助其他用户访问到你的计算机。

早在 21 年的时候,我就给大家分享过一款内网穿透工具 ,但如今这个工具的限制越来越大了,所以这次我们要使用的免费内网穿透工具是 Ngrok。

Ngrok 实现内网穿透

首先我们访问 Ngrok 官网,使用 GitHub 或者邮箱进行注册登录。

指路:https://ngrok.com/download

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

将下载好的 zip 包解压,得到 ngrok 可执行文件:

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

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

现在,你的账号信息已经保存到本地的 ngrok 配置文件中了,接下来只需要执行 ngrok http <端口号> 命令即可启动内网穿透服务。

如下图,注意将端口号改为自己本地项目占用的端口号,比如前端一般是 80、后端一般是 8080。

此处我的电脑有一个前端网站占用端口是 5173,所以命令如下:

神奇的事情发生了,Ngrok 自动为我们生成了一个域名(还是 Https 的哦),指向本机的服务:

在浏览器访问该域名,就能访问到自己电脑上启动的项目啦!

是不是很方便呢?

固定域名

通过上述命令直接启动内网穿透,每次得到的访问域名是随机生成的,这不利于我们持续访问。

可以从 ngrok 官网找到静态域名的配置:

第一次进入域名配置页面时,如果没有域名,可以免费创建一个:

创建好域名后,复制下图的 ngrok 启动命令:

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

通过这种方式,我们每次的内网穿透域名都是固定的啦:

如果你是一名后端开发同学,要让前端同学访问你本地开发好的接口,通过这种方式就很简单了,不用反复到线上(或者测试服务器)部署项目:

多服务

以上是单服务的内网穿透,但实际情况下,我们本地可能不仅有前端、还有后端服务,那么如何利用 Ngrok 同时内网穿透多个服务呢?

这就需要我们修改 ngrok 的配置文件,手动配置隧道。

首先根据官方文档的指引,找到自己电脑上的默认 ngrok.yml 配置文件:

然后在编辑器中修改这个文件,比如配置前端(frontend)和后端(backend)两条隧道,对应的本地服务端口分别为 5173 和 8104:

之后,可以通过 ngrok start <隧道名称> 配置指定启动哪个隧道:

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

访问不同的域名,就能访问到前端或后端了~

但通过上面的方式,每次启动内网穿透得到的域名依然是随机的。我们可以通过修改 ngrok.yml 文件的 domain 配置来指定域名,如下图:

然后执行 ngrok start --all 命令。。。

结果报错啦!

原来 Ngrok 限制每个域名只能绑定一个端口。

不过也有解决方案,可以在配置文件中指定 subdomain,给每个端口分配一个子域名。但很遗憾,这种方式是需要额外付费的,此处不再赘述。

那如果我们想要用固定域名访问本地的多个端口,怎么办呢?

可以使用 Nginx 进行转发呀!比如在 80 端口启动 Nginx 服务,内网穿透指向 80 端口,然后根据 url 请求地址的前缀,转发到对应的前端或后端服务。

保护隐私

用完 Ngrok 后,记得关闭服务,否则别人能直接访问你电脑上的指定服务,会有一定的安全风险。

对了,AuthToken 千万别泄露哦!当你们看到这篇文章的时候,我已经按照下图的方式重置 token 了~

其他应用场景

除了给别人展示自己本地的项目外,内网穿透还有很多应用场景。

比如上面提到的,在协作开发项目时,通过内网穿透让别人随时访问自己电脑上正在开发的网站或服务,而没必要反反复复把开发到一半的项目部署到服务器上、再去更新。

再比如开发微信公众号后台服务时,需要填写一个服务的域名来接受来自微信侧的请求,如果你没有域名和线上服务器,用内网穿透生成一个即可,还能直接在本地 Debug 程序。

希望大家学会这种 “上线” 方式,还是非常实用的~

#程序员##计算机##编程#
全部评论
看看芝士猩球😃
1
送花
回复 分享
发布于 2023-09-20 10:14 湖北

相关推荐

28 71 评论
分享
牛客网
牛客企业服务