ReactJs 如何传递自定义服务器主机名？

Question

我希望能够在运行我的 React 应用程序时传递自定义服务器主机名，以便在我需要获取数据时在 url 中使用。服务器当前正在我的本地计算机上运行，​​所以当我 fetch(url) 我一直在使用“http://localhost :....” ，它工作得很好。但我希望能够传递自定义主机名，例如我的 ip 地址，以在 url 中使用(即 http://ipaddress:.. .)。

我试过像这样启动我的应用程序:

serverhost=ipaddress npm start

然后在我的 package.json 文件中

"scripts" : {
   "start": "react-scripts start $serverhost"
}

在 start.js 中，我可以访问 process.env.serverhost，但我希望能够在浏览器中访问主机名以进行实际的 fetch 调用。我不想在 package.json 或 .env 文件中的“config”中设置主机名，因为它必须能够更改(我觉得这是不可能的)。我只想能够访问在我的 src 文件的命令行中作为参数给出的服务器主机名。

(我在某处读到关于做

REACT_APP_MY_VAR=test npm start 

然后访问它

process.env.REACT_APP_MY_VAR

在 src 文件中，但是当我尝试 fetch(url) 时，我无法解析 URL 错误)

编辑:我尝试使用 REACT_APP 变量，但在获取时不再解析 URL 错误

Answer 1

您可以为每个环境设置 .env 文件，然后设置

REACT_APP_API_ENDPOINT=http://localhost.whatever

例如 .env.development

REACT_APP_API_ENDPOINT=http://localhost.whatever

.env.生产

REACT_APP_API_ENDPOINT=http://production.whatever

这里解释了环境变量的用法 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#what-other-env-files-can-be-used

最终，您可以将其添加到您的脚本中，例如

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
   "start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}

如果您根本不想使用上述方法，请将您的 ip 分配给某个变量并将其添加到命令以运行您的应用程序

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=$(curl ifconfig.me) npm/yarn start"
   "start-other: "REACT_APP_API_ENDPOINT=$(echo MY_VAR_WITH_IP) npm/yarn start"
}

然后从 process.env.REACT_APP_API_ENDPOINT 访问您的网址