如何连接两个运行 react 和 python 的 Docker 容器

Question

我docker-compose.yml提出两个docker容器。

1.( 前端 -reactjs- 在端口3000上运行

2.( 后端 -python(flask( - 在端口8083上运行

前端使用axios通过 url"http://127.0.0.1:8083/api调用python服务器以获取POST方法，但现在由于它们在两个容器上运行，我如何通过该 url 将前端连接到python服务器？

这是我的docker-compose.yml

version: "3.2"
services:
frontend:
build: ./frontend
environment:
CHOKIDAR_USEPOLLING: "true"
volumes:
- /app/node_modules
- ./frontend:/app
ports:
- 80:3000
depends_on: 
- backend
backend: 
build: ./backends/jananath
volumes:
- ./backends/jananath:/usr/src/app
environment:
FLASK_APP: /usr/src/app/server.py
FLASK_DEBUG: 1
FLASK_RUN_EXTRA_FILES: "/usr/src/app/banuka.txt"
ports: 
- 5000:8083

这是server.py的python服务器

from flask import Flask, render_template, request, url_for, redirect
import os
from os import path, walk
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
PORT = 8083
@app.route('/api', methods=['POST', 'GET'])
def upload_file():
file = request.files['file']
filename = file.filename
print(filename)
filepath = os.path.abspath(filename)
print(filepath)
response_ = {}
response_['filename'] = str(filename)
response_['filepath'] = str(filepath)
return response_

if __name__ == '__main__':
app.run(host='0.0.0.0', port=PORT, extra_files=extra_files)

这是从front-end调用POST方法axiosserver.py

const onFormSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const res = await axios.post("http://127.0.0.1:8083/api", formData, { // this url should change now?
headers: {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Credentials": "true",
"crossorigin": "true",
},
});
const {filename, filepath} = res.data;
setUploadedFile({filename, filepath});
} catch (error) {
console.log(error);
}
};

我认为这里的问题是 URL 现在已更改，但我不知道如何解决。有人可以告诉我如何解决这个问题以及我应该点击的正确 URL 是什么？

谢谢！

Answer 1

在 React 应用程序中尝试 backend：8083，您需要重建 react 映像。