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

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

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

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

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

Ngrok 的作用

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

如何下载及注册

  1. 下载 Ngrok: 访问 Ngrok 的官方网站,下载适合你操作系统的 Ngrok 版本。
  1. 注册并获取 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/ngrokNgrok 的官方 Node.js 客户端,让你可以直接在 Node.js 应用中启动和管理 Ngrok 进程。以下是如何在 Node 环境中使用 @ngrok/ngrok

  1. 安装 @ngrok/ngrok: 在你的 Node.js 项目中,运行以下命令安装:
bash 复制代码
npm install @ngrok/ngrok
  1. 新建一个前端项目并启动:
bash 复制代码
npx create-react-app demo

yarn start

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

  1. 使用 @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。 怎么样还可以吧!

相关推荐
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js
郑小憨16 小时前
Node.js简介以及安装部署 (基础介绍 一)
java·javascript·node.js
lin-lins19 小时前
模块化开发 & webpack
前端·webpack·node.js
GDAL1 天前
npm入门教程13:npm workspace功能
前端·npm·node.js
wumu_Love1 天前
npm 和 node 总结
前端·npm·node.js
J不A秃V头A2 天前
报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js
GDAL2 天前
npm入门教程14:npm依赖管理
前端·npm·node.js
子非鱼9212 天前
【Ajax】原生Ajax与jQuery中的Ajax
xml·ajax·node.js·jquery
前端李易安2 天前
webpack的常见配置
前端·webpack·node.js