Quasar CLI with Webpack - @quasar/app-webpack

向公众开放开发服务器

在某些时候,可能需要向其他人展示正在进行的项目。有几个很不错的工具可以做到这一点,localhost.runNgrok。两者都为您的开发服务器创建连接,并且(默认情况下)在其各自的服务器上自动生成一个因特网地址,以提供给您的客户。

警告

向公众开放开发服务器会带来安全风险。 使用这样的工具时要绝对小心。

完成演示或测试后,请确保停止 localhost.run 或 ngrok。防止别人通过它们对您的计算机进行任何不必要的访问

使用 Tunnelmole

Tunnelmole 可以在任何安装了 NodeJS 16+ 的机器上工作,并且没有非 JavaScript 依赖项。

首先,从 NPM 上安装 Tunnelmole:yarn global add tunnelmole 或者 npm i -g tunnelmole.

然后,假设您的 quasar 运行在 80 端口,运行如下命令:

$ 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 作为依赖项添加到项目中,也可以从代码中启动 Tunnelmole (yarn add --dev tunnelmole or npm i --save-dev tunnelmole)

首先,导入 Tunnelmole 和 CommonJS 模块都支持。

// ESM 方式导入:
import { tunnelmole } from 'tunnelmole';

// 或者 CommonJS 方式导入:
const tunnelmole = require('tunnelmole/cjs');

导入模块后,您可以使用下面的代码启动 Tunnelmole,如果端口 80 不同,则将其更改为应用程序侦听的端口。

const url = await tunnelmole({
    port: 80
    // 可选项,添加 "domain: 'mysubdomain.tunnelmole.com'" 如果使用自定义域名的话
});
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com

使用 localhost.run

  1. 假设您有一个 SSH shell,您只需要运行以下命令(替换您的详细信息)
$ ssh -R 80:localhost:8080 ssh.localhost.run
# 如果您的开发服务器不在端口 8080 上运行,则需要将数字更改为正确的端口
  1. 就这样,现在您将有一个基于当前系统用户名分配给您的随机子域,如下所示:
$ 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

  1. 下载并安装 ngrok here。(请注意,ngrok 可执行文件不需要放在 cordova 文件夹中或从中运行。在 mac 上,最好将 ngok 可执行文件放在 /usr/local/bin 中,以便能够全局运行它。)

  2. 启动开发服务器

$ quasar dev
  1. 创建 ngrok 连接
$ ngrok http 8080
# 如果您的开发服务器不在端口 8080 上运行,则需要将数字更改为正确的端口
  1. 当启动成功后,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 文档以获取更多信息。