use docker-compose to build frontend and backend ,then call api from frontend but fail-CodePudding

i build frontend (next.js) and backend(express) ,and try to call backend api but fail.

the following is my code:

dockerFile from backend(listen port 3001)

FROM node:16.13-alpine
WORKDIR /backend/
COPY . .
ENV NODE_ENV=production
EXPOSE 3001
RUN npm install -g [email protected]\
        && npm install\
        && npm install typescript -g\
        && npx tsc
CMD [ "node", "./build/index.js" ]

dockerFile from frontend(listen port 3000), api baseUrl is http://node:80/

FROM node:16.13-alpine
WORKDIR /frontend/
ENV PORT 3000
COPY package.json ./
COPY yarn.lock ./
RUN npm install
COPY . ./
EXPOSE ${PORT}
ENTRYPOINT ["npm", "run","dev"]

docker-compose.yml

version: "3.9"
services:
  node:
    env_file: "./back/.env"
    volumes:
      - ./test:/backend/test
      - ./back/node_modules:/backend/src/node_modules
    build:
      context: ./back
    ports:
      - "80:3001"
    expose:
      - 80
    networks:
      - testNetwork
  next:
    depends_on:
      - node
    build:
      context: ./front
    ports:
      - "3000:3000"
    networks:
      - testNetwork
    volumes:
      - ./front/node_modules:/frontend/src/node_modules
      - ./test:/frontend/test
networks:  
    testNetwork:

i can access localhost:80 ,which is working. but when i access localhost:3000, i got error by next.js as below

next_1  | Error: connect ECONNREFUSED 172.21.0.2:80
next_1  |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {
next_1  |   type: 'Error',
next_1  |   config: {
next_1  |     transitional: {
next_1  |       silentJSONParsing: true,
next_1  |       forcedJSONParsing: true,
next_1  |       clarifyTimeoutError: false
next_1  |     },
next_1  |     transformRequest: [ null ],
next_1  |     transformResponse: [ null ],
next_1  |     timeout: 0,
next_1  |     xsrfCookieName: 'XSRF-TOKEN',
next_1  |     xsrfHeaderName: 'X-XSRF-TOKEN',
next_1  |     maxContentLength: -1,
next_1  |     maxBodyLength: -1,
next_1  |     headers: {
next_1  |       Accept: 'application/json, text/plain, */*',
next_1  |       'User-Agent': 'axios/0.23.0'
next_1  |     },
next_1  |     baseURL: 'http://node:80/',
next_1  |     method: 'get',
next_1  |     url: 'getStaticPath/onlyCategoryRoute'
next_1  |   },
next_1  |   code: 'ECONNREFUSED',
next_1  |   status: null
next_1  | }

thanks for looking

CodePudding user response：

Your application is attempting to connect to port 80 within a docker container but you have port 80 available only on the host computer, within the docker container, it is port 3001.