Использование разных 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`

Answer 2

Вы можете создать 2 .env файлы, называемые и.

      //.env.development
REACT_APP_API_ENDPOINT=http://localhost:9999

      //.env.production
REACT_APP_API_ENDPOINT=https://servername:9999

Затем используйте его следующим образом -

      //api.js
const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT

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

Как это работает: когда вы бежите npm start, response будет использовать .env.development файл и когда вы это сделаете npm run build, response будет использовать .env.production файл.

Вот соответствующая часть документации .

Answer 3

Если вы перейдете на vite, вы можете использовать. По умолчанию vite предоставляет все переменные env, начинающиеся с VITE_.

      import.meta.VITE_SOME