Как настроить файл пакета. json для чтения из набора env var в моей ОС? - PullRequest
Новая
       27

Как настроить файл пакета. json для чтения из набора env var в моей ОС?

3 голосов
/ 12 марта 2020

Я использую 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 и production, мне бы хотелось иметь возможность иметь свой пакет . json файл читается из некоторой переменной окружения. Как мне написать свой пакет. json или настроить мое приложение на использование другого URL-адреса в зависимости от среды или хотя бы набора переменных в моей среде?

Ответы [ 2 ]

2 голосов
/ 21 марта 2020

Из документов: https://create-react-app.dev/docs/proxying-api-requests-in-development/

Имейте в виду, что прокси-сервер влияет только на разработку (с npm start), и решать вам убедитесь, что URL-адреса, такие как / api / todos, указывают на правильную вещь в производственном процессе.

Вместо этого вы можете использовать вместо этого переменные окружения: https://create-react-app.dev/docs/adding-custom-environment-variables/

Вы должны создать файлы .env.development и .env.production в root вашего проекта: 

# .env.development

REACT_APP_PROXY=http://localhost:9090

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

и использовать их в приложении реакции: 

// anywhere in the react app
const REACT_APP_PROXY = process.env.REACT_APP_PROXY
0 голосов
/ 14 марта 2020

Значение proxy в package.json равно stati c, и невозможно получить его значение из переменных среды. Так что просто используйте динамический способ c для регистрации прокси, как описано здесь: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring -the-proxy-вручную Это позволит вам получить любую переменную среды с синтаксисом 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 проблема . При запуске приложения реагирования в удаленной среде должен быть обратный прокси-сервер (например: Nginx, Apache, ...), отвечающий за перенаправление запросов веб-интерфейса (ресурсов и маршрутов) на статически обслуживаемые файлы реакции, и запросы бэкэнда на бэкэнд. Реализуемое правило следующее:

  • Если входящие запросы соответствуют предопределенному шаблону (например: /api/...), перешлите на внутренний URL-адрес серверной части
  • Иначе, если запрос соответствует файлу из сборки реаги, отправьте его
  • В противном случае подтвердите, что это маршрут, а затем отправьте index.html

Веб-сервер реагирования должен использоваться на машинах разработки только. Он обеспечивает компиляцию в режиме реального времени и оперативную перезагрузку, которая бесполезна в производственной среде и, вероятно, не проверяется на наличие уязвимостей безопасности. Загружать URL-адрес серверной части из переменных среды по-прежнему неплохо, поскольку это позволяет вашей кодовой базе оставаться неизменной для каждого разработчика, работающего над вашим проектом.

...