> This page is for 平台, version 旧版.
> For other versions, use one of these documentation indexes:
> - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt
> - V4 实验版: https://next.developer.frame.io/platform/v4-experimental/llms.txt
> - 旧版: https://next.developer.frame.io/platform/v2/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://next.developer.frame.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server.

# 使用 ngrok

ngrok 是一款易于使用的工具，可让您在本地计算机上创建一个安全隧道，并生成一个公共 URL，您可以用它来测试本地项目，或者与客户或团队成员分享您的工作以供审阅。您可以设置 HTTP 或 HTTPS；而且由于此工具的普及程度，如果出现问题，会有大量文章介绍解决问题的不同方法。本文介绍了几种安装 ngrok 的简单方法，以及当您的 Web 应用程序无法与 ngrok 通信时的解决方案。




<Info title="ngrok">
  我们在 ngrok 的朋友们编写了一篇很出色的文章，专门介绍如何通过 ngrok 支持 Frame.io Webhook。请在[此处](https://ngrok.com/docs/integrations/frameio/webhooks)查看。
</Info>


## 安装 ngrok




您可以通过几种不同的方式使用 ngrok





### 通过 ngrok 安装程序进行安装



1. 前往 ngrok 网站并按照其中的说明操作：[https://ngrok.com/download](https://ngrok.com/download)
2. 如果您需要使用通过连接帐户提供的功能，则应按照这些说明获取帐户和令牌。





您不必非要获取帐户或添加令牌，但一定要查看下载页面，了解这是否是您想要或需要的功能。




<Info title="注意：">
  


如果使用此方法，ngrok 将从您存储它的位置运行，除非您让它在整个系统中都可用。



</Info>


### 使用 Homebrew 安装

这是我最喜欢的 ngrok 安装方法。如果您已安装 Homebrew，只需键入 `homebrew cask install ngrok` 即可。ngrok 将会为您安装，并且您可以在任何地方使用它！最棒的是，您不必在每个命令的开头都在终端中键入 `./ngrok`，只需键入 `ngrok` 即可。您可以[在此](https://gist.github.com/wosephjeber/aa174fb851dfe87e644e)了解有关此选项的更多信息。

## 使用 ngrok

设置好 ngrok 后，选择一个端口（如 `3000`）然后在终端命令行中使用命令 ngrok http `3000` 来运行它。您不必一定要使用端口 `3000`，但这是在设置中常用的端口选择。如果您将 ngrok 设置为从特定文件夹运行，那么您必须位于您放置 ngrok 的文件夹中，并使用命令 `./ngrok http 3000`。

启动您的项目服务器，使其监听同一个端口，然后您就可以使用 ngrok 提供的公共地址访问您的工作成果了。





### Web 应用程序与 ngrok 的故障排除——尾部斜杠




您在使用 ngrok 时可能遇到的一个问题是，当您设置了一个 ngrok URL 用于您的 Web 应用程序时，却无法连接到您的服务器。这个问题令人沮丧的是，ngrok 不会记录您向它发送过任何内容。您可以打开 localhost:4040 来看看发生了什么，但它也不会显示任何内容。（localhost:4040 由 ngrok 提供，以便您可以监测发往您服务器的任何请求。）ngrok 似乎将地址匹配到 /(.*) 而不是 (/.*)，因此如果您在地址末尾没有包含尾部斜杠，并且在 ngrok 监控工具中看不到任何内容，那是因为 ngrok 找不到与您所列地址匹配的内容。

以下是添加尾部斜杠的示例：`http://something.ngrok.io/` 您也可以将示例应用程序编写为解析到包含斜杠的端点。请记住，为了让 Frame.io 应用程序能够访问您的服务器，如果您的示例应用程序使用端点 `/actions`，您需要在 ngrok 地址的末尾添加 /actions 端点。例如，若 ngrok 地址是 `http://something.ngrok.io`，您需要在自定义操作设置中将其提供为 `http://something.ngrok.io/actions`。对于其他 Web 应用程序，这可能会有所不同，因此如果您无法立即让它正常工作，可以尝试调整 ngrok 地址的末尾部分。

### 除了 ngrok，我还能使用其他工具吗？试试 Glitch！

Glitch 是一个相当酷的 ngrok 替代品，而且设置速度更快。Glitch 允许您创建一个帐户，然后使用他们的服务器构建自己的应用程序，并提供一个可公开访问的 URL。您可以与其他人协作，将代码设为公开或私有，并从多种语言和平台中进行选择。请访问 [https://glitch.com/create](https://glitch.com/create) 查看可用的内容。当您在 Glitch 上设置项目时，对于某些 Web 应用程序，尾部斜杠问题同样存在。以 Frame.io 为例，当您在 [developer.frame.io](/) 中设置自定义操作时，需要在 Glitch 提供的 URL 末尾加上尾部斜杠。您无需添加任何其他内容，即使是对于 /actions 端点也是如此。

### 是否有已设置好的内容可供我立即试用？

是的。 如果您不想使用 ngrok 或创建自己的 Glitch 项目，我们已设置了一个示例应用程序供您试用，网址为：[https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me)。请记住，当您在 [developer.frame.io](/) 的自定义操作区域中添加此地址时，需要加上尾部斜杠。

### 资源




本节列出了整篇文章中提到的资源：

* **ngrok** [https://ngrok.com/](https://ngrok.com/)
* **Glitch** [https://glitch.com/](https://glitch.com/)
* **Glitch 中的可用平台** [https://glitch.com/create](https://glitch.com/create)
* **用于 JavaScript 自定义操作的 Glitch 示例应用程序** [https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me)
* **Frame.io 开发者注册与设置** [Frame.io 开发者网站](/)
* **Frame.io Web 应用程序** [ https://app.frame.io/](https://app.frame.io/)