Каким образом React-приложение получает адрес API-сервера?

Способы конфигурации API URL в React

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

Переменные окружения в Create React App

В проектах, созданных с помощью Create React App (CRA), все переменные окружения, которые должны быть доступны в браузере, должны начинаться с префикса REACT_APP_. Это сделано для безопасности, чтобы случайно не раскрыть серверные секреты.

Пример использования:

// Файл .env в корне проекта
REACT_APP_API_URL=https://api.example.com

// В коде React-компонента
const apiUrl = process.env.REACT_APP_API_URL;

fetch(`${apiUrl}/users`)
  .then(response => response.json())
  .then(data => console.log(data));

Для разных окружений можно создавать файлы: .env.development, .env.production, .env.local. CRA автоматически подгружает нужный файл в зависимости от значения NODE_ENV.

Переменные окружения в Next.js

В Next.js для переменных, доступных на клиенте, используется префикс NEXT_PUBLIC_:

// .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

// В компоненте
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Альтернативные подходы

• Конфигурационный файл: можно создать файл config.js, который экспортирует объект с настройками, и импортировать его в нужных местах. Однако этот подход не позволяет легко менять конфигурацию для разных окружений без пересборки.
• Прокси-сервер: в development режиме можно настроить прокси в package.json (поле proxy), чтобы перенаправлять запросы на другой сервер. Это удобно для локальной разработки, но не решает проблему конфигурации для продакшена.

Вывод

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