Docker-compose заставляет 2 микросервиса (frontend + backend) связываться друг с другом с помощью http-запросов - PullRequest
Новая
       23

Docker-compose заставляет 2 микросервиса (frontend + backend) связываться друг с другом с помощью http-запросов

0 голосов
/ 30 апреля 2019

У меня есть 2 микросервиса: внешний интерфейс с next.js и внутренний с node.js, откуда я получаю данные через REST-API из внешнего интерфейса.

У меня теперь проблема в том, что мои 2 службы не работаютКажется, что он не общается напрямую друг с другом, дело в том, что он работает, когда я получаю данные с самого начала с помощью метода getinitialProps () с fetch-API.Мой серверный интерфейс находит серверную часть по имени службы.Тем не менее, когда я делаю http-запрос от клиента к бэкэнду (например, через ввод данных из браузера).Он больше не может найти бэкэнд?Почему это так?

вот мой docker-compose.yml: 

version: '3'

services:
  dcbackend:
    container_name: dcbackend
    build:
      context: ./dcbackend
      dockerfile: Dockerfile
    image: dcbackend
    hostname: dcbackend
    ports:
      - '7766:7766'

  dcfrontend:
    container_name: dcfrontend
    build:
      context: ./dcfrontend
      dockerfile: Dockerfile
    image: dcfrontend
    volumes:
      - /app/node_modules
      - ./dcfrontend:/app      
    hostname: dcfrontend
    ports:
      - '6677:6677'

Вот один из моих методов браузера-клиента для отправки данных на сервер (через браузер мойURL-адрес http: dcbackend ... поэтому обычно он должен найти другую среду докера, где находится бэкэнд, но он не ... 

    if (environment == 'dev') {
  url_link = `http://localhost:${port}`;  
} else {
  url_link = `http://dcbackend:${port}`;
}

let doublettenListe_link = `${url_link}/doubletten/`;

 finishDocumentHandler = (anzeige,index) => {
    let thisDocumentID = anzeige.id;
    const requestOptions = {
        method: 'PUT'
    };

    fetch(doublettenListe_link + thisDocumentID, requestOptions)
    .then((response) => {   
        this.setState({finishSuccess: 'Dubletten in Datenbank eintragen erfolgreich!'});
        this.setState({finishFail: ''});
        this.processDocumentArray(index);
        console.log(response);
    })
    .catch((error) => {   
        this.setState({finishSuccess: ''});  
        this.setState({finishFail : `Error beim Erzeugen des Eintrags! Eintrag wurde nicht in Datenbank gespeichert. Bitte prüfen, ob der Server läuft. ${error}`});
    }); 
  }

Ответ на вкладке сети от моего запроса: 

Request URL: http://dcbackend:7766/doubletten/304699981
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Access-Control-Request-Method: PUT
Origin: http://localhost:6677
Referer: http://localhost:6677/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

это как-то связано с конфигурацией docker, или с CORS (), или с чем-то еще? Я не могу выполнить клиентский http-запрос для бэкэнда, однако начальная выборка из бэкэнда для получения некоторыхданные работают ...

1 Ответ

3 голосов
/ 01 мая 2019

Вы должны разделить запросы на стороне сервера и на стороне клиента. Вам необходимо использовать адрес своего хоста для запросов на стороне клиента (например, http://localhost:7766),, поскольку ваш браузер не сможет получить доступ к бэкэнду через псевдоним докера.

Вы можете определить конфигурацию только для сервера и общедоступной среды выполнения с помощью next.config.js.

Например: 

// next.config.js
module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    apiUrl: 'http://dcbackend:7766'
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: 'http://localhost:7766'
  }
}

Тогда вам нужно получить apiUrl от nextjs с getConfig()

// pages/index.js
import getConfig from 'next/config';

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();

const apiUrl = serverRuntimeConfig.apiUrl || publicRuntimeConfig.apiUrl;

const Index = ({ json }) => <div>Index</div>;

Index.getInitialProps = async () => {
    try {
       const res = await fetch(`${apiUrl}/doubletten/304699981`);
       const json = await res.json();
       return { json };
    } catch(e) {
       console.log('Failed to fetch', e);
       return { json: null };
    }
}

export default Index;
...