如何将我的package.json文件配置为从操作系统中的env-var集读取

Question

我使用的是React 16.12.0。我在包.json 中配置了以下"代理">

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:9090",

这对开发非常有效，但当我将网站转移到qa和生产时，我希望能够从某种环境变量中读取我的package.json文件。我如何编写我的package.json或配置我的应用程序，使其根据环境使用不同的URL，或者至少使用环境中的变量集？

Answer 1

从文档：https://create-react-app.dev/docs/proxying-api-requests-in-development/

请记住，代理只在开发中有效(使用npm启动(，并且由您来确保/api/todos等URL在生产中指向正确的东西。

作为替代方案，您可以使用环境变量：https://create-react-app.dev/docs/adding-custom-environment-variables/

您应该在项目的根目录下创建.env.development和.env.production文件：

# .env.development
REACT_APP_PROXY=http://localhost:9090

# .env.production
REACT_APP_PROXY=<some other domain>

并在react应用程序上消费：

// anywhere in the react app
const REACT_APP_PROXY = process.env.REACT_APP_PROXY

Answer 2

package.json中的proxy值是静态的，无法从环境变量中检索其值。因此，只需使用动态方式进行代理注册，如下所述：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-手动代理它将允许您使用语法process.env.SOME_NAME检索任何环境变量

示例：

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
app.use(createProxyMiddleware('/api', {
target: process.env.BACKEND_URL,
changeOrigin: true,
})
);
};

现在我已经回答了你的主要问题，我认为这是一个XY问题。当在远程环境上运行react应用程序时，应该有一个反向代理(例如：Nginx、Apache…(负责重定向静态服务的react文件上的前端请求(资产和路由(，以及后端上的后端请求。要执行的规则如下：

• 如果传入的请求对应于预定义的模式(例如：/api/...(，则转发到后端的内部URL
• 否则，如果请求对应于react构建中的文件，则为其提供服务
• 否则，断言它是一条路由，然后为index.html服务

react的web服务器只能在开发机器上使用。它提供实时编译和实时重新加载，这在生产环境中没有用处，而且可能没有针对安全漏洞进行测试。从环境变量加载后端的URL仍然不是一个坏主意，因为它允许每个开发人员在项目中使用相同的代码库。