如何配置我的 package.json 文件以从我的 OS 中设置的环境变量中读取？

Question

我正在使用 React 16.12.0。我在 package.json

中配置了以下 "proxy"

{
  "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",

这对开发非常有用，但是当我将我的站点移至质量检查和生产环境时，我希望能够从某种环境变量中读取我的 package.json 文件。如何编写 package.json 或配置我的应用程序以根据环境或至少在我的环境中设置的变量使用不同的 URL？

Answer 1

package.json 中的 proxy 值是静态的，无法从环境变量中检索它的值。因此，只需使用动态方式进行代理注册，如下所述：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually 它将允许您使用 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 problem。当运行远程环境上的 React 应用程序时，应该有一个反向代理（例如：Nginx、Apache 等）负责在静态服务的 React 文件上重定向前端请求（资产和路由），并且后端请求后端。实施规则如下：

如果传入的请求对应于预定义的模式（例如：/api/...），则转发到后端的内部URL
否则，如果请求对应于来自 React 构建的文件，则提供它
否则，断言这是一条路线，然后服务index.html

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

Answer 2

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

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production.

作为替代方案，您可以改用环境变量：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

如何配置我的 package.json 文件以从我的 OS 中设置的环境变量中读取？

How do I configure my package.json file to read from an env var set in my OS?

proxy

environment-variables

reactjs

package.json