React JS - 从外部属性文件中读取环境配置
[英]React JS - Reading environment configurations from external property file
问题描述
Problem : I am new to React JS , and looking for an option to read environment configs from an external property file.
问题：我是React JS的新手，正在寻找从外部属性文件中读取环境配置的选项。 This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically.这个问题对于我的一位客户来说更为具体，他希望可以选择动态更改环境文件。 Eg change the hostname/port dynamically whenever there is a change.例如，只要有更改，就动态更改hostname/port 。 The build process is not owned by my client.构建过程不属于我的客户。 I create a minified final package, which my client deploys it on tomcat/web server.我创建了一个缩小的最终 package，我的客户端将它部署在tomcat/web server.
Tried Solution : With some read-outs, I have configured.env files for different environments and able to successfully read configs from these files.尝试过的解决方案：通过一些读数，我已经为不同的环境配置了 .env 文件，并且能够成功地从这些文件中读取配置。 However, these are more of a build process environment files.但是，这些更多的是构建过程环境文件。 And, I am trying to find a way to read the configs from an external source after my package is created.而且，在创建 package 之后，我正试图找到一种从外部源读取配置的方法。
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader".使用“properties-reader”之类的库读取外部属性文件。 I will provide the property file as part of my release bundle (ie build folder).我将提供属性文件作为我的发布包（即构建文件夹）的一部分。 My client can change this property file whenever required.我的客户可以在需要时更改此属性文件。
Please suggest if this is the correct approach or is there a better solution to this problem?请建议这是正确的方法还是有更好的解决方案？
2 个解决方案
解决方案1
4 已采纳 2019-11-12 22:45:19
A Solution which worked for me !!对我有用的解决方案！
1) Create a "config.js" file inside public folder of react project. 1）在反应项目的公共文件夹中创建一个“config.js”文件。 Sample Content of the "config.js" file - “config.js”文件的示例内容 -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. 2) 参考 index.html 中的“config.js”文件。 Code for index.html will be - index.html 的代码将是 -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. 3) 现在，可以访问 config.js 文件的内容来响应代码。 Sample code to retrieve the value of config.js variables -检索 config.js 变量值的示例代码 -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed.在需要访问变量值的任何地方添加此代码。 I added this in my service class which is making ajax call.我在我的服务 class 中添加了这个，它正在调用 ajax。
解决方案2
0 2019-11-11 05:58:40
I would suggest using something like Firebase Realtime DB .我建议使用Firebase Realtime DB 之类的东西。 I had a similar requirement for pointing the App builds to production or development server APIs for my company.我对将应用程序构建指向我公司的生产或开发服务器 API 有类似的要求。 For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.为此，我们使用加载 Firebase 配置，然后从那里获取用于获取主机服务器端点的 UI。
Advantages:优点：
- This saves you from deploying your build folder every time.这使您不必每次都部署构建文件夹。
- This is realtime and less prone to errors.这是实时的，不易出错。
- FirebaseDB is free for small stuff like this. FirebaseDB 对于这样的小东西是免费的。
The second option is to create two environment files which I see you have already done.第二个选项是创建两个我看到你已经完成的环境文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.