对于H5页面的前端开发者来说,分享和测试正在开发的网站或应用变得越来越重要,尤其是在移动设备和不同网络环境下的测试。
而这就是 Ngrok
发挥作用的地方。
Ngrok
是一个反向代理工具,它允许你将本地服务器暴露给公网,使得任何人都可以通过一个公网地址访问到你的本地服务。
本文将介绍 Ngrok
的作用、如何下载和注册、在 Node
环境中的使用,以及它为前端项目带来的便利。
Ngrok 的作用
Ngrok
的主要作用是将你的本地开发服务器通过一个公网的 URL
暴露给外部网络。这意味着,不管是客户、同事还是朋友,他们都可以通过这个 URL 直接访问到你本地运行的应用,而无需部署到公共服务器上。这对于演示、测试以及在开发过程中的即时反馈非常有用。
如何下载及注册
- 下载 Ngrok: 访问 Ngrok 的官方网站,下载适合你操作系统的
Ngrok
版本。
- 注册并获取 Authtoken: 为了使用
Ngrok
,你需要在其官网注册账号。注册后,你将获得一个authtoken
,这个token
是连接你的本地服务与Ngrok
服务的桥梁。
将 Download
页签中的安装包下载下来之后双击运行,然后再运行下面生成好的命令:
bash
ngrok config add-authtoken 2e4PMs8rSuuRDw*****KO3aoTko_3hGat4ZVo*****vJgpwch
这样就签名成功了,接下来可以在相同的终端运行下面的命令将 8080
端口暴露出去:
bash
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 项目中,运行以下命令安装:
bash
npm install @ngrok/ngrok
- 新建一个前端项目并启动:
bash
npx create-react-app demo
yarn start
一般来说项目会直接运行在 3000
端口上。记住这个 3000.
- 使用 @ngrok/ngrok: 在你的
Node.js
应用中,你可以使用以下代码来启动一个Ngrok
进程,并将你的本地端口(例如前端项目所在的:3000)暴露给公网:
javascript
// 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
:
txt
https://8576-60-**-1-39.ngrok-free.app
带来的便利
使用 Ngrok 在前端项目中带来了多方面的便利:
- 易于分享: 你可以非常容易地与他人分享你的进度,只需要给他们发送一个
URL
即可。 - 真实的测试环境: 通过
Ngrok
暴露的公网URL
,你可以在真实的网络环境下测试应用,这对于检查网络请求、第三方服务集成等非常重要。 - 无需部署: 在初期开发阶段,你可以避免频繁的部署操作,直接通过
Ngrok
分享你的本地版本给任何人。 - 跨设备测试:
Ngrok
使得在不同的设备上测试你的应用变得简单,无论是不同操作系统的计算机还是移动设备。
总之,Ngrok
为前端开发者提供了一个快速、便捷的方式来分享和测试他们的应用。通过 @ngrok/ngrok
包,Node.js
用户可以轻松地在他们的项目中集成 Ngrok
,进一步提升开发效率和协作的便利性。
最后
教你们一个技巧记住这个库:ngrok
利用谐音就是:那个人ok。 怎么样还可以吧!