Как настроить выборку базового URL при развертывании в Docker для приложения «Реакция»?

Question

У меня есть приложение React с выборками из API. У меня есть dockerfile, который работает.

Как мне настроить базовый URL для всех выборок в производстве?

В конце я разверну свое приложение React в Службы приложений Azure . Я использовал тег proxy в package.json, но это только для разработки. Пример выборки выглядит следующим образом: (до "/ оценки" должен быть размещен базовый URL)

    fetch(`/evaluations?onlyactiveones=true`, this.credentials)
        .then(response => response.text())
        .then(data => {
            this.setState({ evaluations: data });
            console.log(data);
        });

Answer 1

Я теперь решил эту проблему.Вещи, которые я сделал:

1. Определите переменную env для базового URL, например: process.env.REACT_APP_API_PROXY

2. Замените все выборки этой переменной env.Для приведенного выше примера:

       fetch(`${process.env.REACT_APP_API_PROXY}/evaluations?onlyactiveones=true`, this.credentials)
       .then(response => response.text())
       .then(data => {
           this.setState({ evaluations: data });
           console.log(data);
       });
   

3. Определите переменную env, как вам нравится.Переменная env должна быть помещена перед сборкой приложения реакции, ее нельзя заменить во время выполнения.

Answer 2

Похоже, вы делаете вызовы fetch для относительного URL.Поэтому по умолчанию он будет звонить на ваш домен как базовый URL.Например, в этом случае, http://yourdomain.com/evluations,, но, скорее всего, вы хотите позвонить на http://someotherdomain.com/api/evaluations.. Для этого вам необходимо настроить обратный прокси-сервер на вашем веб-сайте Azure (или на любом другом хост-сервере).

На веб-сайте Azure вы можете настроить обратный прокси-сервер, как показано в следующей ссылке: https://ppolyzos.com/2015/10/26/reverse-proxy-functionality-in-azure-web-sites/