Использование разных URL-адресов API для разработки и производства с React и axios

Question

Я создаю веб-приложение с использованием интерфейса React и внутреннего интерфейса Node.js (API).
В интерфейсе React я вызываю методы API следующим образом:

axios({
    method: 'post',
    url: 'http://servername:9999/reports.activities',
    data: {
        user_id: 1
    }
}).then(res => {
    this.setState(res.data);
});

Иногда мне нужно протестировать методы APIэто еще не выпущено в производство.
Когда я тестирую бэкэнд локально, я запускаю nodemon api.js на localhost:9999.
Каждый раз, когда я хочу протестировать веб-интерфейс с локально работающим API, я должен изменить http://servername:9999на http://localhost:9999 в моем коде внешнего интерфейса.
Я думаю, что это неправильный подход.
Каков наилучший способ использовать разные URL для разработки (при локальном запуске npm start) и для производства (npm build)?
Я думал об использовании dotenv для этой цели.Это правильный подход?
Какая лучшая практика?

Answer 1

Если вы используете приложение create-реакции-приложение, у вас уже установлен dotenv.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

Таким образом, вы можете сделать следующее:

const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT || 'http://production';

...
url: `${API_ENDPOINT}/reports.activities`