是否可以在客户端前端使用React服务器环境变量

我正在使用PKG，为我的Appolo GraphQL Server+React客户端制作一个可执行的.exe文件，将所有文件捆绑到一个exe文件中。它正在工作，现在有一个要求：应用程序应该从某个地方读取一个IP地址，并将其用作主机、端口等的常量。

从服务器端来看，我使用的是fs.readFileSync，这还可以。我可以读取任何文本文件，因为它在nodejs服务器端。现在的要求是将该IP传递到客户端文件->进入静态文件夹(标记为*(，在那里我有带有客户端IP的constant.js在里面连接(编译的static/js..(。服务器端文件(NodeJs+Rreact(：

├───build
│   └───static
│       ├───css
│       ├───*js*
│       └───media
├───config
├───src
│   ├───core
│   ├───graphql
│   ├───guardServer
│   └───pg
└───SSL

客户端React文件树：

├───.idea
├───.vs
│   └───React
│       └───v16
├───build
│   └───static
│       ├───css
│       ├───js
│       └───media
├───public
└───src
├───components
│   ├───core
│   │   ├───functions
│   │   └───modal
│   └───modules
│       ├───account
│       ├───adminPanel
│       │   └───pages
│       ├───archive
│       ├───hr-department
│       │   └───pages
│       ├───logs
│       ├───monitor
│       └───reports
├───config
└───images

所以我的行动是：npm run build紧咬。然后我使用build文件夹并替换服务器端文件：server/build文件夹。然后我在服务器端做npm run build，并接收一个exe文件。如果这个exe的服务器部分(/server/index.js(可以读取settings.txt，但不能读取/server/build/static/js内的部分(客户端(。。。

我的问题是：通过某种方式修改webpacker，服务器环境变量是否可以通过命令process.env.myvar从客户端访问(并且是动态的(？

如果没有，在这种情况下我有什么技巧可以利用吗？请注意，由于文件系统shapshot限制，现在允许使用PKG的fs.writeFileSync。

服务器端代码：

let fileContent = fs.readFileSync("D:\settings.txt", "utf8");
let getIp=JSON.parse(fileContent); //fine working, got IP

客户端使用Apollo客户端，正是为了他，我需要从服务器端传递IP，有什么想法吗？

更新Ajeet Shah。我做了什么：

On my server.js - var __SERVER_DATA__ = "192.168.0.111";
in index.html of client - <script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
in index.js of client - console.log(window.SERVER_DATA);

更新：

我想我将在一段时间内使用小型http服务器，它将在localhost:port上运行。从那里我可以自由阅读任何设置。谢谢大家的回答。

我选择了更多选项的答案，并且有关于localStorage的建议。非常感谢大家的提醒。仍在尝试实现所提供的方法。

更新

我已经做完了。我使用了一个html变量window.SERVER_DATA = __SERVER_DATA__，如下所述-https://create-react-app.dev/docs/title-and-meta-tags/#injecting-数据从服务器进入页面。若并没有人发布额外的答案，我稍后会决定如何处理最佳答案。

如文档中所述，您可以创建可以注入前端代码的服务器端变量。

以下是您需要做的：

创建一个JS脚本，比如myConfig.js，并将其放置在服务器的公共位置，以便前端可以加载它
在此文件中定义配置数据，例如：

const myConfig1 = "foo bar"
const myConfig2 = "anythng else"

在前端应用程序的index.html文件的<head>部分添加以下行。它将从服务器读取负载/数据，并将其设置在全局window对象中

<script src="http://path/to/file/on/server/myConfig.js" type="text/javascript"></script>
<script>
window.myConfig1 = myConfig1
window.myConfig2 = myConfig2
</script>

现在，您可以使用全局window对象作为window['myConfig1']和window['myConfig2']访问ReactJS应用程序中的配置变量(来自服务器(

使用此方法，当您更改配置变量时，不需要使用npm run build重建前端应用程序，因为这些变量是在服务器上独立于前端定义的。要更改这些配置变量，您只需要在服务器上更改它们并在浏览器中进行刷新。

在后端技术中，一切都是通过环境变量来解决的，当您必须通过阶段(dev、staging、prod(移动应用程序时，这是一种很好的做法。

在客户端技术(react、vue、angular或simple-js(中，动态获取这些值是复杂的。

检查这个答案以了解变量在js客户端中是如何工作的，或者如何注入动态值

https://stackoverflow.com/a/54271114/3957754

REACT_APP

一种策略是使用REACT_APP变量

https://create-react-app.dev/docs/adding-custom-environment-variables/

因此，如果您在服务器端中创建此变量

export REACT_APP_remote_ip

React库将为您创建一个变量。您可以在任何反应文件中使用thia-var

process.env.remote_ip

Webpack

与REACT_APP类似，webpack提供了一个选项，可以将服务器端变量公开为全局javascript变量，以便在任何.js文件中使用

new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
})

/设置

另一种选择是在nodejs服务器端创建一个端点。这个端点可以访问环境值，因此您可以返回任何您想要的内容：

res.json({
"ip1": process.env.remote_ip_1
});

在此之后，您只需要在react或javascript文件的最早期的js或入口点中调用或调用此endpoint/settings。

最后，/settings的返回可以作为全局javascript值公开，也可以存储在浏览器的localstore中

REACT_APP

Webpack

/设置

相关内容

最新更新

热门标签：