将应用程序部署到 Heroku 时,如何将对 localhost 的调用更改为外部 api 调用?

IT技术 reactjs
2021-05-01 14:20:17

我完成了我的应用程序并想将它部署到 Heroku。我有调用 api(在本地机器上)看起来像这样

  const isDeleted = await request(
      "DELETE",
      `/api/me/posts/${postId}`
    );

在开发中,他们被代理package.json这样

"proxy": "http://localhost:4000"

如何将该代理更改为外部 api url?

我找到了建议使用常量创建文件并url有条件地导出的解决方案,如下所示:

exports = isProduction ? 'api/production' : 'http://localhost:300'

然后在我所有的调用前加上那个常量,但感觉不对,我认为有一种更简洁的方法来做到这一点。

2个回答

在 ReactJs 中,您可以将环境变量以不同的方式用于生产和开发服务器。
在项目的根目录中创建 .env 文件和 .env.production 。
1. 需要使用 REACT_APP_{Your custom variable name} 语法由 react server 来接。

.env 文件

REACT_APP_BACKEND_URL=https://localhost/

.env.生产

REACT_APP_BACKEND_URL=https://online-exam-mern.herokuapp.com/

JS

const response = await fetch(
      `${process.env.REACT_APP_BACKEND_URL}admin/auth/login`,
      {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          email,
          password
        })
      }
    );

当您使用 npm run build 构建项目时,react 将自动选择 .env.production 文件变量,而在开发期间它将使用 .env 文件中的变量

Heroku 有自己的环境变量。它们被称为配置变量。看这里。

即使它们是 Heroku 环境,它们仍然必须以REACT_APP. 否则 React 不会接收它们。

我在我所有的电话前加上前缀REACT_APP_API并且它起作用了。