將 package.json 中的代理設置為 env 變量

Question

我需要在運行時在我的package.json中設置proxy值，就像使用環境變量一樣。 這怎么可能呢？

// package.json
{
  "name": "demo",
  "proxy": process.env.MY_PROXY_VAL , // <- how?
  "dependencies": {},
  "scripts": {},
}

謝謝。

Answer 1

它將自動從HTTPS_PROXY或HTTP_PROXY讀取，因此您不需要這樣做。

從文檔 ：

用於傳出https請求的代理。 如果設置了HTTPS_PROXY或https_proxy或HTTP_PROXY或http_proxy環境變量，則基礎請求庫將接受代理設置。

Answer 2

所以我將我的評論轉化為答案，因為我認為指出這個問題的實際解決方案很重要。

我正在尋找完全相同的答案，還嘗試通過 .env 文件以及直接從腳本中設置HTTP_PROXY和HTTPS_PROXY變量。 但是，這並不能解決問題，因為這將覆蓋本地計算機的系統代理設置，我認為這不是 OP 打算做的事情。 結果可能是您無法再加載 npm 包，因為系統代理設置不正確。

相反，有一種方法可以在開發中為 CRA 手動配置代理，正如官方文檔所指出的： https://create-react-app.dev/docs/proxying-api-requests-in-development/#手動配置代理

有了這個，你應該在項目的/src文件夾下創建一個本地setupProxy.js文件，然后它將覆蓋package.json中設置的代理。 當然，您必須確保所有路徑都已正確設置，但它運行良好，並且您可以精細控制應用程序中的哪些頁面將被代理，哪些不會。

為了專門針對您關於如何通過環境變量設置代理的問題，這里是一個示例，您可以如何使用setupProxy方法和createProxyMiddleware來做到這一點：

// Sample of how to setup a proxy middleware with environment variables

//// file: <project_root>/src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/rest',
    createProxyMiddleware({
      target: process.env.REACT_APP_PROXY_HOST,
      changeOrigin: true,
    })
  );
};


//// file: <project_root>/.env

REACT_APP_PROXY_HOST=https://localhost:6700

在這種情況下，我只想代理針對/rest端點的請求，為此我創建了一個新端點。 所有其他請求仍將 go 到默認的localhost:3000 Url，服務於 React 應用程序。

主機通過環境變量REACT_APP_PROXY_HOST定義。 我在本地.env文件中定義了變量，但如果需要，您也可以直接在package.json中的腳本中設置它。

更新：盡管最初的問題已經為我解決了，但我在嘗試將請求轉發到運行在https上的服務器時遇到了另一個問題。 之前的開發設置與 package.json 中設置的package.json代理沒問題。 但是，當使用createProxyMiddleware並以在 https 上運行的帶有證書的服務器為目標時，必須提供所用證書的路徑。

// Sample of how to setup a proxy middleware with environment variables 
// targeting a server running on https

//// file: <project_root>/src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
const fs = require('fs');

const protocol = JSON.parse(process.env.HTTPS) ? "https:" : "http:";
const host = process.env.REACT_APP_PROXY_HOST
const port = process.env.REACT_APP_PROXY_PORT

module.exports = function(app) {
  app.use(
    '/rest',
    createProxyMiddleware({
      target: {
        protocol: protocol,
        host: host,
        port: port,
        pfx: fs.readFileSync('src/root-cert.pem')
      },
      changeOrigin: true,
    })
  );
};


//// file: <project_root>/.env

HTTPS=true
REACT_APP_PROXY_HOST=localhost
REACT_APP_PROXY_PORT=6700

在這種情況下，而不是將目標作為字符串提供，它應該作為包含protocol 、 host 、 port和屬性pfx的 object 給出，其中包含通過 https 驗證服務器的證書。在這種情況下，它是一個硬編碼路徑項目源目錄，但是它也可以使用環境變量來設置。

設置HTTPS=true會覆蓋默認的開發設置，默認情況下會在https://localhost:3000啟動開發服務器。 通過此設置並提供正確的證書，可以毫無問題地訪問運行在 https 上的服務器。

作為參考，此解決方案在http-proxy-middleware和底層node-http-proxy的文檔中有正式鏈接：

• https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/https.md
• https://github.com/http-party/node-http-proxy#http---https-using-a-pkcs12-client-certificate

這個問題在其他地方也引起了一些關注，例如

• https://github.com/facebook/create-react-app/issues/3783
• https://github.com/facebook/create-react-app/issues/4288
• https://github.com/usc-isi-i2/kgtk-browser/issues/32

希望能幫助搜索相同問題的人，如果對此有任何更新或事情發生變化，請隨時在評論中添加建議。