node.js - Docker-compose 使 2 个微服务(前端+后端)通过 http 请求相互通信
问题描述
我有 2 个微服务:带有 next.js 的前端和带有 node.js 的后端,我通过 REST-API 从前端获取数据。
我现在有一个问题,我的 2 个服务似乎没有直接相互通信,问题是,当我在开始时使用 fetch-API 的 getinitialProps() 方法获取数据时,它可以工作。我的服务器端前端通过其服务名称找到后端。但是,当我从客户端向后端发出 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 ......所以通常它应该找到后端所在的另一个 docker 环境,但它没有...... .
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-configuration 或 CORS() 或其他任何东西有关吗?我不能向后端发出客户端 http 请求,但是,从后端获取一些数据的初始提取工作......
解决方案
您必须将服务器端和客户端请求分开。您需要将主机地址用于客户端请求(例如http://localhost:7766),因为您的浏览器将无法通过 docker 别名访问后端。
您可以使用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;
推荐阅读
- c# - 如何使用 EF Core 使 C# 中的字段唯一?
- symfony - Symfony 中的延迟学说事件侦听器以发送 webhook
- kotlin - 如何在双回合中修复 NumberFormatException
- python - 如何使用upper()制作字符串的第一个字母大写 - PYTHON
- azure - devops:实现 Azure AD 安全组
- protocol-buffers - ProtoBuf 有效负载的建议扩展是什么?
- javascript - UseState 不会触发重新渲染
- apache - 从 URL 中删除 .php 但它仍应指向原始文件(mod-rewrite)
- reactjs - 我如何修复无法使用“in”运算符在未定义的反应中搜索“1”?
- python - 在Django中将html表单数据转换为pdf