个人中心
gpt4 book ai didi

javascript - 是否可以在客户端将 React 服务器环境变量用于前端？

转载 作者：行者123 更新时间：2023-12-04 07:52:29 24 4
gpt4 key购买 nike

我正在使用 PKG ，为我的 Appolo GraphQL Server + React 客户端制作一个可执行的 .exe 文件，并将它们全部捆绑到一个 exe 文件中。它正在工作，现在有一个要求:应用程序应该从某个地方读取 IP 地址并将其用作主机、端口等的常量。
从服务器端我使用 fs.readFileSync - 没关系。我可以读取任何文本文件，因为它是 nodejs 服务器端。现在的要求是将该IP传递给客户端文件->进入静态文件夹(标记为*)，其中我有带有客户端IP的constant.js来连接内部(编译的静态/js ..)。服务器端文件(NodeJs+React):

├───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一个人。然后我把文件夹 构建 并替换服务器端文件:server/build 文件夹。然后我在服务器端做 - npm run build并接收一个exe文件。这个exe的服务器部分(/server/index.js)可以读取settings.txt，但不能读取/server/build/static/js中的那部分(客户端)...
我的问题是:是否可以通过某种方式修改 webpacker，并且服务器环境变量将可以从客户端使用命令 process.env.myvar 访问(并且将是动态的) ?
如果没有，在这种情况下我可以利用什么技巧？请注意，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-data-from-the-server-into-the-page .如果没有人会发布额外的答案，我稍后会决定如何处理最佳答案。

最佳答案

如 docs 中所述，您可以创建可以注入(inject)前端代码的服务器端变量。
这是您需要做的:

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

    • const myConfig1 = "foo bar"
    const myConfig2 = "anythng else"
  • 在 <head> 中添加以下行index.html的部分文件在您的前端应用程序中。它将从服务器读取负载/数据并将其设置为全局 window目的。 

    • <script src="http://path/to/file/on/server/myConfig.js" type="text/javascript"></script>
    <script>
      window.myConfig1 = myConfig1
      window.myConfig2 = myConfig2
    </script>
  • 现在您可以使用全局 window 在您的 ReactJS 应用程序中访问这些配置变量(来自服务器)对象为 window['myConfig1']和 window['myConfig2'] .

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

    关于javascript - 是否可以在客户端将 React 服务器环境变量用于前端？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66883900/

    24 4 0
    文章推荐： python-3.x - 求解 Atlas IK(无约束)失败？
    文章推荐： python - 尝试解析 Python 中的旧语法
    文章推荐： c# - 将文件上传到 Azure Blob 存储后一小段时间出现 404
    文章推荐： c - C 编译器使用的数据布局(对齐概念)
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com