Docker-compose 使 2 个微服务(前端+后端)通过 http 请求相互通信 [英] Docker-compose make 2 microservices (frontend+backend) communicate to each other with http requests

问题描述

我有 2 个微服务:带有 next.js 的前端和带有 node.js 的后端，我通过 REST-API 从前端获取数据.

I have 2 microservices: frontend with next.js and a backend with node.js from where I fetch data via REST-APIs from the frontend.

我现在有一个问题，我的 2 个服务似乎没有直接相互通信，问题是，当我在开始时使用 fetch-API 的 getinitialProps() 方法获取数据时，它可以工作.我的服务器端前端通过其服务名称找到后端.但是，当我从客户端向后端发出 http 请求时(例如通过浏览器表单输入).它再也找不到后端了?这是为什么呢?

I now have the problem, that my 2 services don't seem to communicate directly to eachother, the thing is, it works when I fetch the data at the beginnning with the getinitialProps() Method with the fetch-API. My server-side frontend finds the backend via its service-name. However, when I am doing a http-request from the client to the backend (e.g via browser form inputs). It cannot find the backend anymore? Why is that?

这是我的 docker-compose.yml:

here is my 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... 所以通常它应该找到后端所在的另一个 docker 环境，但确实如此不是……

Here is one of my browser-client side methods to send data to the backend (via the browser, my url is http:dcbackend... so normally it should find the other docker environment where the backend is, but it does not...

    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}`});
    }); 
  }  

我的请求中来自网络选项卡的响应是:

Response from network tab from my request is:

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-configuration、CORS() 或其他任何东西有关?我不能向后端发出客户端 http 请求，但是，从后端获取一些数据的初始提取工作......

does it have something to do with docker-configuration, or with CORS() or with anything else? I can't do a client http request to backend, however, the initial fetch from the backend to get some data works...

推荐答案

你必须将服务器端和客户端请求分开.您需要将主机地址用于客户端请求(例如 http://localhost:7766)，因为您的浏览器将无法通过 docker 别名访问后端.

You have to separate the server side and the client side requests. You need to use your host address for the client side requests (eg. http://localhost:7766), because your browser will not be able to reach the backend via docker alias.

您可以使用 next.config.js 定义仅服务器和公共运行时配置.

You can define the server-only and public runtime config with 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'
  }
}

然后你需要使用 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;

这篇关于Docker-compose 使 2 个微服务(前端+后端)通过 http 请求相互通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！