是否可以在客户端的前端使用 React 服务器环境变量? [英] Is it possible to use a React server enviroment variables into frontend at client side?

问题描述

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

I am using PKG, to make a executable .exe file for my Appolo GraphQL Server + React client bundled all into one exe file. It's working, and now there is requirement: app should read from somewhere an IP address and use it as constants for host, port, etc.

从服务器端我使用 fs.readFileSync - 这没问题.我可以读取任何文本文件，因为它是 nodejs 服务器端.现在的要求是将该 IP 传递给客户端文件 ->进入静态文件夹(标记为*)，在那里我有带有客户端IP的constant.js要连接到内部(编译的静态/js ..).服务端文件(NodeJs+React):

From server side I am using fs.readFileSync - which is okay. I can read any text file as it's nodejs server side. And now the requirement is to pass that IP to the client files -> into the static folder (marked *), where I have constant.js with IP of client to connect inside (compiled static/js..). Server side files (NodeJs+React):

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

客户端 React 文件树:

Client React files tree:

├───.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中的那个部分(客户端)...

So my actions are: npm run build a clent. Then I taking the folder build and replacing a server side files: server/build folder. Then I'm doing on the server side - npm run build and receiving an exe file. WHERE a server part (/server/index.js) of this exe can read a settings.txt, but not that part (client) which is inside /server/build/static/js...

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

My question is: is it possible by modifying webpacker somehow, and server environment variable will be accessible (and will be dynamic) from client side with command process.env.myvar?

如果没有，在这种情况下我可以使用任何技巧吗?请注意，由于文件系统快照限制，现在允许使用 PKG 的 fs.writeFileSync.

If not, if there are any tricks I can utilize in this case? Please note that PKG's fs.writeFileSync is now allowed due to the filesystem shapshot restriction.

服务端代码:

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

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

Client using Apollo Client and exactly for him I need to pass that IP from server side, any ideas please?

Ajeet Shah 的更新.我做了什么:

Update for Ajeet Shah. What I did:

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 上运行.从那里我可以自由地阅读任何设置.感谢大家提供有用的答案.

I think I will end up for a while with the tiny http server, which will run on localhost:port. And from there I can freely read any settings. Thank you All for usefull answers.

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

I've chosen the answer with more options and there was advise about localStorage. Thank you all much for heads up. Still trying to implement offered methods.

更新.

我已经完成了这件事.我使用了一个 html 变量 window.SERVER_DATA = __SERVER_DATA__ 如这里所述 - https://create-react-app.dev/docs/title-and-meta-tags/#injecting-data-从服务器到页面.如果没有人会发布额外的答案，我将稍后决定如何处理最佳答案.

I've finishied doing this. I've used an html variable window.SERVER_DATA = __SERVER_DATA__ as described here - https://create-react-app.dev/docs/title-and-meta-tags/#injecting-data-from-the-server-into-the-page. I will decide later on what to do with best answer, if nobody will post extra ones.

推荐答案

如 docs，您可以创建可以注入前端代码的服务器端变量.

As described in docs, you can create server side variables that can be injected in your front end code.

这是您需要做的:

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

1. Create a JS script, say myConfig.js, and place it on the server at a public location so that frontend can load it.
2. Define config data in this file, e.g:

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

1. 在前端应用的 index.html 文件的 部分中添加以下几行.它将从服务器读取负载/数据并将它们设置在全局 window 对象中.

1. Add below lines in the <head> section of index.html file in your frontend app. It will read load/data from the server and set those in global window object.

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

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

1. Now you can access those config vars (which came from server) in your ReactJS app using global window object as window['myConfig1'] and window['myConfig2'].

使用此方法，当您更改配置变量时，无需使用 npm run buildrebuild 前端应用程序，因为它们是定义的，与前端分开，在服务器上.要更改这些配置变量，您只需在服务器上更改它们并在浏览器中刷新即可.

Using this method, you don't need to rebuild the frontend app using npm run build when you change your config vars as these are defined, separately from frontend, on the server. To change these config vars, you just need to change those on the server and do a refresh in browser.

这篇关于是否可以在客户端的前端使用 React 服务器环境变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！