Создание приложения Create React для конкретной среды

Содержание

Вопрос или проблема
Ответ или решение
Решение проблемы сборки Create React App для специфической среды

Вопрос или проблема

Проблема: Когда я создаю сборку с помощью Create React App, процесс сборки предполагает NODE_ENV=production, что приводит к тому, что мои HTTP-запросы направляются на производственные URL-адреса, вместо тестовых URL-адресов.

Я ищу способ сделать так, чтобы артефакт сборки, генерируемый командой npm run build, указывал на NODE_ENV=staging, а не на NODE_ENV=production.

Мое приложение – это приложение PERN, находящееся в монорепозитории. Артефакт сборки фронтенда включен в бэкенд.

// backend/app.js
app.use(express.static(path.join(__dirname, 'assets')));
app.use(express.static(path.join(__dirname, 'build')));

Скрипты в package.json фронтенда:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -f .env.staging npm run build",
    "build:production": "dotenvx run -f ../backend/.env.production -- react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Сначала я попробовал: основываясь на документации CRA: Настройка переменных окружения для произвольных сред сборки

Я осознаю, что Create React App по умолчанию использует производственную сборку, однако, когда я пытаюсь env-cmd -f envfilepath command, сборка все равно предполагает производство.

Во-вторых, я попробовал указать на .env файлы бэкенда, используя dotenvx:

Сборка с "build:staging": "dotenvx run -f ../backend/.env.staging -- react-scripts build", артефакт сборки фронтенда предполагает производственную среду. Я использую dotenvx (.env, .env.staging, .env.production), чтобы контролировать, какие переменные окружения загружаются при запуске приложения.

Дополнительный контекст: Есть много технического долга. Бэкенд работает на Node 16.2, фронтенд на React 17.0.2, react-scripts – 5.0.0. Я хочу решить проблему со сборкой в тестовой среде перед обновлением.

Есть идеи?

Ответ или решение

Решение проблемы сборки Create React App для специфической среды

Введение

При использовании Create React App (CRA) могут встречаться ситуации, когда необходимо создать сборку для конкретной среды, такой как staging. По умолчанию, при выполнении команды npm run build используется переменная окружения NODE_ENV=production, что может привести к ошибкам, если API-запросы нацелены на production-урлы вместо staging-версий. В этом решении мы рассмотрим, как корректно установить среду сборки для ваших нужд.

Проблема

Вы описали ситуацию, когда необходимо собирать фронтенд-приложение в monorepo с привязкой к staging среде, однако стандартные команды для сборки по умолчанию не позволяют этого сделать. Попытки использовать env-cmd и dotenvx не дали ожидаемого результата — сборка всегда воспринимается как production.

Решение

Существует несколько способов указать нужную переменную окружения для сборки вашего приложения:

Используйте cross-env для установки переменной окружения.

Один из наиболее простых способов изменить значение NODE_ENV во время сборки — воспользоваться пакетом cross-env. Установите его, выполнив команду:
```
npm install --save-dev cross-env
```
После установки измените ваши скрипты сборки в package.json, чтобы использовать cross-env. Пример:
```
"scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "build:staging": "cross-env NODE_ENV=staging env-cmd -f .env.staging npm run build",
 "build:production": "cross-env NODE_ENV=production dotenvx run -f ../backend/.env.production -- react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
}
```
В этом примере cross-env задаёт значение переменной окружения NODE_ENV=staging перед вызовом команды сборки.
Создайте файлы окружения.

Убедитесь, что у вас есть файл .env.staging, который содержит все необходимые переменные окружения для staging-сборки. Например:
```
REACT_APP_API_URL=https://api.staging.example.com
```
CRA автоматически системой окружения загружает данные из файлов с префиксом REACT_APP_, если они существуют.
Проверка конфигурации вашего приложения.

После изменения скриптов и настройки переменных окружения проверьте, действительно ли ваши собранные артефакты указывают на нужные staging-URL. Для этого:
- Запустите сборку командой npm run build:staging.
- Откройте собранные файлы (обычно в папке build/static/js), убедитесь, что ссылки на API указывают на staging-версии.
Дополнительные советы.
- Заводите четкую структуру управления переменными окружения для фронтенда и бэкенда, чтобы избежать путаницы.
- Рассмотрите возможность обновления React и библиотеки react-scripts на более свежие версии для получения последних улучшений и исправлений в функциональности.

Заключение

Следуя данным рекомендациям, вы сможете настроить сборку вашего приложения Create React App для специфической среды staging, избегая проблем с неправильными URL. Это не только оптимизирует ваш рабочий процесс, но и повысит надежность тестирования и развертывания вашего приложения. Будьте внимательны к деталям при работе с переменными окружения, и вы добьетесь желаемого результата.