Reactjs 部署react前端时如何注入API服务器URL？

免责声明：我是React noob，所以可能我尝试的不是React方式

我正在编写一个React前端，它将被部署为由一些云提供商静态提供服务，例如S3或谷歌存储或其他什么。这个前端与云中某个地方的多个API服务器交互，可能在同一个提供者中，也可能不是。此外，在开发UI或其一部分时，这些服务器的地址可能是本地或测试实例

如何以灵活的方式将API服务器URL注入我的react应用程序，以便我可以使用不同的地址在dev、staging或prod中部署

解决方案：我最终使用了一系列建议的解决方案：

• 使用

  .env.production

  和

  .env.development

  文件（确切名称）存储变量

  REACT\u APP\u API\u URI='host'

• 这由CreateReact应用程序的构建支架自动获取，并在UI代码中作为

  process.env.react\uApp\uAPI\uURI提供

请注意，这有点违背了的原则，例如，在版本控制中的文件中存储环境变量，但它确实起到了作用。

您可以试试这个

if(process.env.NODE_ENV === 'development') {
  url = 'https://google.com'
}

if(process.env.NODE_ENV === 'production') {
  url = 'https://stackoverflow.com/'
}

---

例如，您可以在构建步骤中使用环境变量来实现这一点

例如，您可以使用类似的方法来定义环境变量并将它们加载到您的webpack文件中（假设您使用webpack）。但是你真的可以在任何捆绑机上使用它

.env文件：

API=http://localhost:3000

在您的网页上，您可以使用

示例取自文档：添加API环境

    ...
    require('dotenv').config()
    ...

    new webpack.DefinePlugin({
      API_ENDPOINT: process.env.API,
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });

无论如何，这只是一种方式。我喜欢这种方式，因为它使我的项目能够为不同环境定义API键和其他有用的东西做好准备

---

注意：您甚至可以为本地、临时和生产定义不同的.env文件，并根据构建类型在网页包中加载相应的文件。

如果API对于

开发

或

生产

环境保持不变，则可以使用

.env

文件。在

build

之后，您不能更改这些参数。

如果要在生成后更改

URL

，请添加

js

文件，比如

config.js

在

index.html

在

conf.js

like中添加

URL

var URL1 = 'https://www.google.com'

您可以访问以下参数：

export const {URL1} = window;

使用这个包，您可以为您的环境创建一个env文件

例如，使用以下代码创建.env.staging和.env文件

// .env.staging file   
API_URL=https://staging.url.com/api/

如何使用API_URL从env变量获取：

fetch(process.env.API_URL)

然后，您可以在package.json中添加一些额外的脚本：

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}

---

这是有道理的，但我使用了

createreact-app

来构建我的应用程序，它似乎没有使用webpack。或者它是在引擎盖下使用它？@insitu是的，它确实在引擎盖下使用网页包。它使用react脚本。@insitu看看这篇文章：这基本上是我的方法，使用CRA。这令人困惑：在构建时是否有

process.env.XXX

可用？您可以在这里看到示例，但是

process.env.NODE\u env

假设有一个节点服务器正在运行，不是吗？这意味着这在运行时起作用，而不是在构建时。那么你是说webpack会对JS代码进行内省，并用它们的值静态地替换这些变量？是的。我打赌你用的是CreateReact应用程序。当您将其部署为生产时，您将构建捆绑包，并且NODE_ENV将设置为“production”，您的api url将被替换，但运行时会读取

.ENV

文件吗？

process.env.API\u URL

变量何时定义？我希望这种情况在构建/部署时发生，这样当应用程序在浏览器中执行时，它将使用正确的URL进行静态配置。不，当您运行包含它的命令时，它将转换

process.env.API\u URL

。例如，如果您运行命令

warn build:staging

来生成react，它将

fetch（process.env.API\u URL）

转换为

fetch（'https://staging.url.com/api/）

然后您可以将生成文件部署到登台服务器。我通常会在repo中添加一个

.env.sample

，而不是带有值的实际文件。此外，您还可以在CI/CD中设置该环境变量，以便更好地与12因素方法保持一致。这是一个不错的解决方案。您可以使用

console.log（process.env.NODE\u env）

和

console.log（process.env.REACT\u APP\u API\u URI）

在将

.env.production

和

.env.development

文件添加到根目录后从任何位置进行查看。重要说明：使用

创建REACT APP

，您需要在变量名前面加上前缀

REACT\u APP

，才能访问它。但如果我们这样做，那么URL1将公开可用。任何人都可以看到。是的，这不是一个好的做法。必须有一个承载reactjs应用程序的后端服务器。因此，您可以使用路由名称（而不是ip）点击服务器，并且端口、ip、端口将与reactjs应用程序相同。然后，您可以从服务器端从所需的应用程序中获取数据。

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}