Proxy wordpress from react inside docker

Question

I'm building a web app with create-react-app as a frontend and wordpress API as a backend. I want to use docker for a seamless deployment.

Everything is working on its own (I'm able to reach the backend via postman), but the frontend fails to communicate with the backend, creating following error:

Proxy error: Could not proxy request /wp-json/wp/v2/pages from localhost:3000 to http://localhost:8000.

Here is my docker-compose.yml:

version: '3'

services:
  # Database
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: xxx
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: xxx
    networks:
      - wpsite
  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: xxx
    networks:
      - wpsite
  # Wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: xxx
    networks:
      - wpsite

  # frontend  
  frontend:
    volumes:
      - ./frontend/src:/usr/src/app/src
      - ./frontend/public:/usr/src/app/public
    command: npm run start
    build: ./frontend
    ports:
      - 3000:3000
    links:
      - wordpress
networks:
  wpsite:
volumes:
  db_data:

Here the frontend Dockerfile:

FROM node:10-alpine

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package.json /usr/src/app/

RUN npm install

ADD src /usr/src/app/src
ADD public /usr/src/app/public

RUN npm build

CMD [ "npm", "start" ]

and the frontend package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "classnames": "^2.2.6",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "PORT=3000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:8000"
}

I figure it has something to do with the docker containers each creating their own 'localhost', so the port 8000 I'm trying to proxy doesn't exist in the scope of its own container?

But I'm lost as to how to solve it and would really appreciate any kind of help!

Answer 1

So you need to read into networking of docker-compose. What happens is that each container is a separate entity in the network with their own localhost. In order for containers to be able to communicate with each other you can use their corresponding service names as hostnames - in your case to access Wordpress service from your frontend you can use https://wordpress:80/ for example

Try replacing the "proxy": "http://localhost:8000" with "proxy": "http://wordpress:80"

The port mappings you define are in order for you to be able to access these containers from outside the virtual network that is created for your docker compose project.

More about it here https://docs.docker.com/compose/networking/