如何在单独的 Docker 容器中通信 Express API 和 React

Question

我有一个简单的应用程序，它从 express 中获取数据并在 react 中显示它。 在没有 docker 的情况下，它可以按预期工作，但在将它们作为容器启动时不会。 运行 docker 后，React 和 Express 都能够启动并可以在浏览器中的 localhost:3000 和 localhost:5000 查看

他们是如何沟通的

在 react-app package.json 中，我有"proxy": "http://localhost:5000"和快速路由。

反应 Dockerfile

FROM node:17 as build

WORKDIR /code

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.12-alpine

COPY --from=build /code/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

快递 Dockerfile

FROM node:17

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5000

CMD ["npm", "start"]

docker-compose.yml

version: "3"
services:
  react-app:
    image: react
    stdin_open: true
    ports:
      - "3000:80"
    networks:
      - react-express
    
  api-server:
    image: express
    ports:
      - "5000:5000"
    networks:
      - react-express

networks:
  react-express:
    driver: bridge

      

Answer 1

从您的示例中我发现您正在使用反应脚本？

如果是这样，代理参数仅适用于npm start的开发。

请记住，代理仅在开发中有效（使用 npm start），您可以确保 /api/todos 之类的 URL 指向生产中的正确内容。

这里： https ://create-react-app.dev/docs/proxying-api-requests-in-development/

Answer 2

在 package.json 中使用代理不起作用，因此您可以将其放在您的反应应用程序中。 使用相同的 Dockerfile 和 docker-compose 设置。

  const api = axios.create({
    baseURL: "http://localhost:5000"
  })

并要求这样表达

api.post("/logs", {data:value})
    .then(res => {
      console.log(res)
    })

这可能会导致 CORS 出现错误，因此您可以将其放在 Express API 中与您设置端口并让它侦听的同一文件中。

import cors from 'cors'

const app = express();

app.use(cors({
    origin: 'http://localhost:3000'
}))