如何*同时*将ngrok用于后端和前端？

Question

我有一个我想在移动设备上测试的react应用，但是Chrome或Firefox中的移动开发工具还不够。

后端在localhost:5000上运行，前端在localhost:3000上运行。

如果我同时运行ngrok http 3000和ngrok http 5000，并且使用ngrok http 3000给定的链接，我可以访问我的前端，但是（可以理解）它可以与后端通信相对于我的手机的localhost: 5000服务器，而不是查看ngrok http 5000给出的链接。

我的问题是：

1. 配置我的应用程序和ngrok以便使我可以同时在计算机和手机上测试我的应用程序的最佳方法是什么？

2. 是否有一种更好的方法可以完全不使用ngrok？

谢谢

Answer 1

在您已从API服务器进行配置的前端中，将其替换为正在运行后端的Ngrok URL，然后在前端运行Ngrok，然后您可以从任何地方访问前端

Answer 2

首先，您可以将代理配置为来自开发服务器的后端。这将使您的前端可以从任何位置通过相对URL（例如/api而不是localhost:5000/api）访问后端。为此，您应该将"proxy": "http://localhost:5000"添加到package.json中，然后确保您的后端请求与您的前端请求不匹配，最好使用前缀。更多详细信息here。

鉴于您只需要在本地网络中测试应用程序，就不需要ngrok，因为您可以通过手机的本地IP通过电话访问开发机器。要找出答案，请运行ifconfig或ipconfig，然后在手机中而不是ngrok提供的域中键入返回的本地IP（通常为192.168.X.X之类的东西）。