我是否必须使用 ngrok 公开前端和后端以使 MERN 堆栈使 CRUD 操作正常工作？

Question

我正在本地计算机上开发 MERN 应用程序。

前端开启localhost:3000

后端开启localhost:3003

我的前端代码中有一个请求，如下所示：

axios.get('localhost:3000/comments', params)

现在，我使用 ngrok 公开应用程序，如下所示：

ngrok start front_end back_end

我的 .yml 配置文件如下所示：

tunnels:
    front_end:
        proto: http
        addr: 3000
        subdomain: fakedomaintest
    back_end:
        proto: http
        addr: 3003
        subdomain: fakedomaintestback

我的问题是，我是否必须以不同的方式公开后端，或者我是否错误地拆分了堆栈？

当我公开 localhost:3000 和 localhost:3003 时，我编辑前端代码中的 CRUD 行以匹配 ngrok URL，如下所示：

axios.get('fakedomaintestback.ngrok.io/comments', params)

并且在访问 fakedomaintest.ngrok.io 时它起作用了....

但是有没有更简单的方法，让我不必在每次想将 ngrok 用于远程原型时都在前端编辑 CRUD 行？

我在这里错过了什么？

Answer 1

如果您的应用程序运行在 localhost:3003 那么您的 axios 调用应该是 axios.get('localhost:3003/comments', params)

要解决 url 切换问题：

您可以使用 dotenv 为您的应用程序设置环境变量。

https://www.npmjs.com/package/dotenv

它是如何工作的，你会在你的反应应用程序的根文件夹中创建一个 .env 文件，其中包含以下内容：

BACKEND_HOST=localhost:3003

然后在您的代码中，您可以将所有网络调用更改为以下内容：

axios.get(`${process.env.BACKEND_HOST}/comments`, params)

当您想切换到使用 ngrok 时，只需更改 .env 文件中的值即可。

如果您碰巧在使用 Create React App，.env 文件将已被支持，但您必须在所有变量前加上前缀 REACT_APP，因此 BACKEND_HOST 会成为 REACT_APP_BACKEND_HOST

我是否必须使用 ngrok 公开前端和后端以使 MERN 堆栈使 CRUD 操作正常工作？

Do I have to expose front and back ends with ngrok for MERN stack for CRUD ops to work?

node.js

reactjs

mongodb

express

ngrok