Как использовать разные IP-адреса для разработки и производства с реагированием и аксиом

Question

Я создаю приложение, используя реагирующий и django rest framework. Я могу получить доступ ко всем данным через ax ios url (127.0.0.1:8000). Но когда я развертываю его на azure для производства, то для запроса URL-адреса ax ios ip нужно изменить на azure ip контейнера. Каков наилучший способ сделать это для производства?

Answer 1

Вы можете использовать переменные окружения , создав .env файл. Вы можете иметь файл .env.development для разработки и файл .env.production для производства.

Когда вы разрабатываете на своем компьютере с npm start или yarn start, он будет использовать файл .env.development в ваше приложение.

При сборке для производства с npm build или yarn build будет использоваться файл .env.production.

.env.development

REACT_APP_AXIOS_URL="127.0.0.1:8000"

.env.production

REACT_APP_AXIOS_URL="http://yourapi.com"

Тогда код вашего приложения должен ссылаться на эти переменные только через process.env.

axios.get(process.env.REACT_APP_AXIOS_URL)

Answer 2

Вы можете использовать config для этой цели. Это создаст несколько файлов конфигурации, которые загружаются в соответствии со средой приложения. В вашем сценарии вам необходимо установить config, используя:

npm i config

После этого создайте папку config в вашем проекте root. Создайте два файла как default.json и production.json. Теперь вы можете создать файл JSON, например, с другим значением для обоих файлов / сред:

{
  serverURL: "localhost:3000"
}

, а затем использовать переменную, например:

const config = require('config').default;

const url = config.get('serverURL');

Передать эту переменную url на axios при запросе. И он автоматически выберет IP в зависимости от установленного окружения. Когда вы создаете приложение react.js, оно устанавливает рабочую среду. Надеюсь, это поможет вам.