Ngrok 及其在前端项目中的使用

对于H5页面的前端开发者来说，分享和测试正在开发的网站或应用变得越来越重要，尤其是在移动设备和不同网络环境下的测试。

而这就是 Ngrok 发挥作用的地方。

Ngrok 是一个反向代理工具，它允许你将本地服务器暴露给公网，使得任何人都可以通过一个公网地址访问到你的本地服务。

本文将介绍 Ngrok 的作用、如何下载和注册、在 Node 环境中的使用，以及它为前端项目带来的便利。

Ngrok 的作用

Ngrok 的主要作用是将你的本地开发服务器通过一个公网的 URL 暴露给外部网络。这意味着，不管是客户、同事还是朋友，他们都可以通过这个 URL 直接访问到你本地运行的应用，而无需部署到公共服务器上。这对于演示、测试以及在开发过程中的即时反馈非常有用。

如何下载及注册

下载 Ngrok： 访问 Ngrok 的官方网站，下载适合你操作系统的 Ngrok 版本。

注册并获取 Authtoken： 为了使用 Ngrok，你需要在其官网注册账号。注册后，你将获得一个 authtoken，这个 token 是连接你的本地服务与 Ngrok 服务的桥梁。

将 Download 页签中的安装包下载下来之后双击运行，然后再运行下面生成好的命令：

ngrok config add-authtoken 2e4PMs8rSuuRDw*****KO3aoTko_3hGat4ZVo*****vJgpwch

这样就签名成功了，接下来可以在相同的终端运行下面的命令将 8080 端口暴露出去：

ngrok http http://localhost:8080

执行之后你就会得到一个公网的 URL ，映射到 8080 端口上。

如何在 Node 环境中使用

Ngrok 也可以通过 Node 包的形式使用，这使得在 Node.js 项目中集成 Ngrok 变得非常容易。@ngrok/ngrok 是 Ngrok 的官方 Node.js 客户端，让你可以直接在 Node.js 应用中启动和管理 Ngrok 进程。以下是如何在 Node 环境中使用 @ngrok/ngrok：

安装 @ngrok/ngrok： 在你的 Node.js 项目中，运行以下命令安装：

npm install @ngrok/ngrok

新建一个前端项目并启动：

npx create-react-app demo

yarn start

一般来说项目会直接运行在 3000 端口上。记住这个 3000.

使用 @ngrok/ngrok： 在你的 Node.js 应用中，你可以使用以下代码来启动一个 Ngrok 进程，并将你的本地端口（例如前端项目所在的：3000）暴露给公网：

// make webserver
const http = require("http");
http
  .createServer(function (req, res) {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write("Congrats you have a created an ngrok web server");
    res.end();
  })
  .listen(3000);
console.log(`Node.js web server at 3000 is running..`);

// setup ngrok
const ngrok = require("@ngrok/ngrok");
(async function () {
  const listener = await ngrok.forward({ addr: 3000, authtoken: '2e4PMs8rSuuRDw*****KO3aoTko_3hGat4ZVo*****vJgpwch' });
  console.log(`Ingress established at: ${listener.url()}`);
})();

这个时候你就会在控制台得到这个 url：

https://8576-60-**-1-39.ngrok-free.app

带来的便利

使用 Ngrok 在前端项目中带来了多方面的便利：

易于分享： 你可以非常容易地与他人分享你的进度，只需要给他们发送一个 URL 即可。
真实的测试环境： 通过 Ngrok 暴露的公网 URL，你可以在真实的网络环境下测试应用，这对于检查网络请求、第三方服务集成等非常重要。
无需部署： 在初期开发阶段，你可以避免频繁的部署操作，直接通过 Ngrok 分享你的本地版本给任何人。
跨设备测试： Ngrok 使得在不同的设备上测试你的应用变得简单，无论是不同操作系统的计算机还是移动设备。

总之，Ngrok 为前端开发者提供了一个快速、便捷的方式来分享和测试他们的应用。通过 @ngrok/ngrok 包，Node.js 用户可以轻松地在他们的项目中集成 Ngrok，进一步提升开发效率和协作的便利性。

最后

教你们一个技巧记住这个库：ngrok 利用谐音就是:那个人ok。怎么样还可以吧！