在某些时候,您可能希望向其他人展示您正在开发的项目。幸运的是,有一些不错的工具可以实现这一点,例如 localhost.run 和 Ngrok。两者都会创建到您的开发服务器的隧道,并且(默认情况下)在其各自的服务器上自动生成一个互联网地址,供您的客户或您想展示作品的任何人使用。
警告
将您的开发服务器开放到公网会带来安全风险。使用此类工具时务必谨慎。
演示或测试完成后,请确保停止 localhost.run 或 ngrok。这将防止任何人通过它们未经授权访问您的计算机。
使用 Tunnelmole
Tunnelmole 可以在任何安装了 NodeJS 16+ 的机器上运行,并且没有非 JavaScript 依赖项。
首先,全局安装 tunnelmole
包
$ yarn global add tunnelmole
然后,假设您正在端口 80
上运行 quasar,请运行以下命令
$ tmole 80
如果您的端口与 80
不同,请将 80
更改为您的端口。
以下是带有输出的完整命令
$ tmole 80
http://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
https://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
如果您正在自行托管 Tunnelmole 服务或为官方服务设置了 API 密钥,则可以运行以下命令以使用自定义子域名(同样,如果您的端口不同,请将 80
替换为您的端口)。
$ tmole 80 as mysubdomain.tunnelmole.com
还可以从代码中启动 tunnelmole,如果您将其作为依赖项添加到您的项目中(yarn add --dev tunnelmole
或 npm i --save-dev tunnelmole
或 pnpm/bun 等效项)。
首先导入 tunnelmole。ES 和 CommonJS 模块都受支持。
将 tunnelmole 作为 ES 模块导入
// import as ESM:
import { tunnelmole } from 'tunnelmole';
// or import as CommonJS module:
const tunnelmole = require('tunnelmole/cjs');
导入模块后,您可以使用以下代码启动 tunnelmole,如果您的应用程序监听的端口不同,请将端口 80
更改为该端口。
const url = await tunnelmole({
port: 80
// Optionally, add "domain: 'mysubdomain.tunnelmole.com'" if using a custom subdomain
});
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com
使用 localhost.run
- 假设您有一个 SSH shell,您只需要发出以下命令(替换您的详细信息)
$ ssh -R 80:localhost:8080 ssh.localhost.run
# In case your development server doesn't run on port 8080 you need to change the number to the correct port
- 就是这样,您现在将拥有一个基于您当前系统用户名分配给您的随机子域名,如下所示
$ ssh -R 80:localhost:8080 ssh.localhost.run
Connect to http://fakeusername-random4chars.localhost.run or https://fakeusername-random4chars.localhost.run
Press ctrl-c to quit.
目前无法请求您自己的子域名。
使用 Ngrok
下载并安装 ngrok 此处。(请注意,ngrok 可执行文件不需要放在您的 cordova 文件夹内或从其内部运行。在 Mac 上,最好将 ngrok 可执行文件放在
/usr/local/bin
中,以便能够全局运行它。)启动您的开发服务器
$ quasar dev
- 创建您的 ngrok 连接
$ ngrok http 8080
# In case your development server doesn't run on port 8080 you need to change the number to the correct port
- ngrok 在启动时会在命令行中显示 URL。
Tunnel Status online
Version 2.0/2.0
Web Interface http://127.0.0.1:4040
Forwarding http://92832de0.ngrok.io -> localhost:8080
Forwarding https://92832de0.ngrok.io -> localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
请注意,“转发”URL 将对任何人可见,直到此连接再次关闭。
检查流量
运行 ngrok 时,访问 http://localhost:4040
以检查流量。
此工具允许使用自定义域名、密码保护等等。如果您需要进一步的帮助,请参考 ngrok 文档 以获取更多信息。