我可以同时为前端和后端设置 ngrok 吗？

Posted 2023-04-18

【中文标题】我可以同时为前端和后端设置 ngrok 吗？

【英文标题】：Can I setup ngrok for front-end and back-end at the same time?

【发布时间】：2019-07-01 05:36:53

【问题描述】：

我想同时为前端和后端设置 ngrok，这是不可能的，因为我的前端在 Angular 6 上，而后端在 .net 核心中。

当前端和后端都在同一主机和端口上时，我实现了 ngrok。 （两者都在 .Net 和 MVC 中）。所以他们在同一个端口上运行。

现在，我想知道是否有其他方法可以做到这一点。

我的 Angular 6 在 http://localhost:4200/ 上运行 后端运行在https://localhost:44343/

如果有的话请给我建议。

【参考方案1】：

我找到了一个在后端和前端都使用隧道的解决方案，在ngrok.yml 配置文件中定义它们。此文件在 Windows 中通常位于 C:\Users\you\.ngrok2\ngrok.yml。

authtoken: <your token is already here>
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 1337

React.js 的端口是 3000，Sails.js 的端口是 1337。

解除 ngrok 服务： ngrok start frontend backend

Ngrok 将重定向两个端口并提供两个地址而不是一个（如果您考虑 https，则总共四个）。

最后，我使用在 ngrok CLI 中找到的新 URL 更改了前端的 API 地址（您将通过查看端口号来识别它）。

我是通过阅读类似的帖子（您可以找到详细信息here）而不使用“子域”部分（仅在 ngrok 付费服务中可用）来找到该解决方案的。

【参考方案2】：

好问题！我有一个类似的问题，我让我的后端在本地表现得像前端路径的代理服务器，因此它将传入的前端请求路由到本地前端服务器。在 Python 中，使用 Flask 很容易，使用此处描述的代理方法：https://***.com/a/36601467/38611