当前位置：首页 > 博客人生 > 博客教程

文章摘要：大家好，我是小沈子，今天分享一个非常实用的小教程，不花钱，不用买服务器，不用自己部署各种服务，只需要一个小工具，直接让别人访问到你电脑上做好的网站，这种方法尤其适用于你要参加竞赛，需要给评委演示项目的场景。

没有域名、服务器，就不能上线网站了么？

发布时间：2023-09-17 作者：小沈子分类：编程 Ngrok 内网穿透

前言

没有服务器和公网IP，想让别人访问自己做好的网站，怎么办？

项目用的依赖服务太多了，想上线太麻烦了，怎么办？

协作开发时想让同事直接访问自己本地运行的项目，怎么办？

正文

大家好，我是小沈子，今天分享一个非常实用的小教程，不花钱，不用买服务器，不用自己部署各种服务，只需要一个小工具，直接让别人访问到你电脑上做好的网站，这种方法尤其适用于你要参加竞赛，需要给评委演示项目的场景。

那在阅读之前先请大家思考一个问题：

为什么别人无法直接访问你电脑上运行的网站和服务呢？

答案很简单，大多数情况下我们的个人电脑都处于局域网内，缺少可公开访问的公网IP地址，因此其他用户在网络上就找不到你，就没办法和你建立网络连接，那怎么解决这个问题呢？

一种可行的方法是内网穿透。通过一定的网络配置将内网的电脑暴露到公共网络，可以简单理解为有一个中间服务，由于他知道你电脑的地址，就可以帮助其他用户访问到你的计算机，那如何实现内网穿透呢？

微信图片_20230917161237.png

很简单，使用ngrok一分钟就能搞定，那首先我们访问它的官网注册登录，注册登录成功后根据自己的操作系统选择下载软件的安装压缩包，然后将下载好的zip包解压，得到一个可执行文件：

微信图片_20230917161426.png

接下来我们参考官方文档：

在本地执行ngrok命令，添加当前用户的身份验证令牌，进入到刚刚解压的可执行文件所在的目录执行即可：

微信图片_20230917161915.png

微信图片_20230917162047.png

现在呢，你的账号信息已经保存到本地的ngrok配置文件中了，接下来只需要执行ngrok http 80 命令就能启动内网穿透服务了，注意要将输入的端口号改为自己本地项目实际占用的端口号。那小沈子想在这里做个小调研，大家最常用的的口号是什么呢？欢迎在评论区分享。

现在我的电脑已经有一个前端网站了，占用的端口是85，回车即可自动为我们生成一个域名，相当于在他们的服务器上创建了一个隧道，连接了我们本地的服务端口，然后在浏览器访问该域名就能访问到本地启动的前端项目了。是不是很方便呢？

值得一提的是生成的域名还是https的安全域名！

虽然我们已经成功启动了内网穿透，成功的访问到了网站，但是现在每次启动得到的访问域名都是随机生成的，这不利于我们持续访问。

试想一下：你在电脑上做了个网站给你的女神表白，结果呢，刚发给女神网址，网址就变了，那岂不是很尴尬，所以我们需要一个静态的不变的域名，可以在官网找到静态域名配置，第一次进入配置页时，如果还没有添加域名，可以免费创建一个，创建好域名后可以直接复制服务启动命令。

640 (2).png

然后在终端中执行该命令即可，其实就是在启动内网穿透时指定了domian参数，通过这种方式，我们每次的内网穿透域名就都是固定的了。

640 (3).png

如果你是一名后端开发人员，要让前端人员访问你本地开发好的接口，通过这种方式就很简单了，不用反复打包，然后到线上或者测试服务器更新部署项目。

接下来让我们更进一步，以上讲的都是单服务的内网穿透，但如果你是一个全栈开发者，你的本地可能不仅有前端还后端服务那么如何利用ngrok 同时内网穿透多个服务呢？

这就需要我们修改ngrok 配置文件，手动配置隧道连接，首先根据官方文档的指引，找到自己电脑上的默认ngrok.yml配置文件：

640 (4).png

然后在编辑器中修改这个文件：

640 (5).png

比如我这里配置前端和后端两条隧道填写对应的本地服务端口，之后呢可以通过ngrok start命令写上隧道名称，指定启动我们哪个隧道或者执行ngrok start-all命令同时启动所有隧道就会发现生成了两个不同的子域名，分别指向前端和后端服务，但通过上面的方式，每次启动内网穿透得到的域名依然是随机的。我们可以通过ngrok.yml文件的domain配置来指定域名，然后执行命令启动我全部服务。

微信图片_20230917172411.png

注意这里会报错：

640 (6).png

由于ngrok 限定了每个域名只能绑定一个端口，不过也有解决方案可以在配置文件中指定subdomain给每一个端口分配一个子域名。但很遗憾这种方式是需要额外付费的，所以这里就不多说了，那如果我们想要用固定域名访问本地的多个端口怎么办呢？大家有什么更好的解决方案呢？欢迎大家留言分享自己的解决方法。

Ngrok的好处是：简单方便，如果你有一定的探索能力，也可以试试更灵活的开源软件：frp ！

640 (7).png