Реагировать на импорт среды в setupProxy.js http-proxy-middleware генерировать неожиданный идентификатор

Question

Мне нужно установить цель прокси http-proxy-middleware в реакции, используя переменную, полученную craco. Я следовал этому руководству, чтобы иметь больше конфигурационного файла для разных сред. У меня есть 3 файла local.js, development.js и production.js, которые были выбраны craco с использованием различных npm run startlocal, startdevelopment.

В package.json у меня есть:

 "scripts": {
        "startlocal": "cross-env CLIENT_ENV=local craco start",
        "startdevelopment": "cross-env CLIENT_ENV=development craco start",
        "startproduction": "cross-env CLIENT_ENV=production craco start",

Проблема в том, что я хочу изменить прокси-сервер в зависимости от того, в какой среде я работаю, и поэтому, используя http-proxy-middleware, я использовал setupProxy.js, как указано в руководстве. Если я вставлю импорт среды из "среды"; в setupProxy.js у меня есть неожиданный идентификатор ошибки.

Это код файла setupProxy.js:

 import environment from 'environment';
    const proxy = require('http-proxy-middleware');

    module.exports = function(app) {
      app.use(proxy('/api', { target: 'http://localhost:5000/' }));
    };

    this my craco.config.js

    const path = require('path');    

    module.exports = function({ env, paths }) {    
      return {    
        webpack: {   
          alias: {    
            environment: path.join(__dirname, 'src', 'environments',     process.env.CLIENT_ENV)    
          }    
        },    
      };    
    };     

Вывод на консоль с помощью npm run startlocal

Неожиданный идентификатор
нпм ERR! код ELIFECYCLE
нпм ERR! Errno 1
нпм ERR! seltirmedfront_candidati@0.1.0 startlocal: cross-env CLIENT_ENV=local craco start
нпм ERR! Статус выхода 1
нпм ERR!
нпм ERR! Ошибка при запуске сценария seltirmedfront_candidati@0.1.0 startlocal.
нпм ERR! Это, вероятно, не проблема с npm. Вероятно, есть дополнительные выходные данные регистрации.

Я предполагаю, что проблема связана с тем фактом, что setupProxy.js загружается автоматически и загружается до craco.config.js, поэтому он не имеет такого импорта.

Answer 1

Тебе не нужно setupProxy.js а также http-proxy-middleware.

Просто добавьте прокси в свой текущий craco.config.js:

module.exports = {
...
    devServer: {
        proxy: {
            '/api': 'http://localhost:5000'
        }
    }
};

подробнее о настройках devServer: https://webpack.js.org/configuration/dev-server/

Answer 2

Чтобы настроить прокси в проекте React с различными средами, вы можете изменитьsetupProxy.jsфайл в зависимости от среды. Вот шаги по настройке прокси-сервера в различных средах:

      const testHost = '11.22.23.13'; // test env
const devHost = '11.22.238.14'; // dev env
module.exports = function (app) {
  const isDev = process.env.CLIENT_ENV === 'development';
  const host = isDev ? devHost : testHost;
  console.log('launch env：', process.env.CLIENT_ENV, host);
  if (isDev) {
    app.use(
      '/api',
      createProxyMiddleware((pathname) => pathname.match('^/api'), {
        target: `http://${devHost}:8088`,
        changeOrigin: true,
        ws: true,
      }),
    );
    app.use(
      '/admin',
      createProxyMiddleware({
        target: `http://${devHost}:8088`,
        changeOrigin: true,
      }),
    );
  } else {
    app.use(
      '/api',
      createProxyMiddleware((pathname) => pathname.match('^/api'), {
        target: `http://${testHost}:8088`,
        changeOrigin: true,
        ws: true,
      }),
    );
    app.use(
      '/admin',
      createProxyMiddleware({
        target: `http://${testHost}:8088`,
        changeOrigin: true,
      }),
    );
  }

Когда вы делаете запросы API в своем приложении React, они будут автоматически перенаправляться на указанный целевой URL-адрес в зависимости от среды. Обратите внимание, что вам необходимо установитьCLIENT_ENVпеременную среды для разработки или производства в зависимости от среды, в которой вы запускаете приложение. Эту переменную можно установить в командной строке или в конфигурации инструмента сборки.