不用服务器，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 程序。

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