Как правильно настроить ссылки API во время разработки, когда вы запускаете dev API локально?

Question

ФОН

Я настраиваю новые интерфейсные веб-проекты.Приложение, над которым я работаю, также является новым Visual Studio ASP.Net Core Web API.Вся моя работа с пользовательским интерфейсом является частью одного и того же git-репозитория, но не включена в решение Web API.

Для разработки я запускаю API в Visual Studio, чтобы можно было легко запускать / останавливать и прерывать работукод, и я использую npm для запуска и запуска моего приложения пользовательского интерфейса из кода VS.

ВОПРОС

Очевидно, что мне нужно делать вызовы API в моем приложении.Для этого я могу совершать звонки, например:

fetch('http://localhost:55555/api/test')

Очевидная проблема заключается в том, что http://localhost:55555 является локальным адресом, и его, очевидно, необходимо будет публиковать на серверах для разработки и подготовки, а также для производства.Вместо этого я должен определить некоторый тип переменной среды, который заменит жестко закодированный адрес на правильный корневой адрес, и мой код должен ссылаться на это значение конфигурации

В конце концов мы собираемся настроить конвейер CI для этого проекта, поэтомуМне нужно быть уверенным, что я настраиваю типы настроек конфигурации, которые будут отличаться от сервера к серверу, приложение также публикуется.Тем не менее, мои поиски в Google не помогают мне найти правильный способ определения адресов веб-API в переменных среды или файлах конфигурации, к которым я могу получить доступ в своем коде.

Как настроить приложение npm / React так,что он может получить доступ к API-адресу config-define, который впоследствии можно легко изменить в зависимости от среды, в которой он был опубликован?

Answer 1

Создайте config.js в src ... Там сделайте что-то вроде этого:

export const API_BASE_URL =
  process.env.REACT_APP_API_BASE_URL || 'http://localhost:55555/api';

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

import { API_BASE_URL } from './config';

Что-то вроде:

 fetch(`${API_BASE_URL}/auth/etc...`)

РЕДАКТИРОВАТЬ:

Попробуйте это:

import React from 'react';

function App() {
  return <div>{process.env.NODE_ENV}</div>; // (if in developement should say development)
}

export default App;

Дайте мне знать, если он говорит development