Docker-compose通过HTTP请求使2个微服务(前端+后端)相互通信 [英] 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'
这是我的浏览器-客户端方法之一,用于将数据发送到后端(通过浏览器,我的网址是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通过HTTP请求使2个微服务(前端+后端)相互通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!