How to proxy Vue client to Express server running in docker containers

I’m trying to get a vue cli3 app to talk to my node express api running in separate docker containers. Locally, I just add a configuration in vue.config file to proxy my dev server and I’m having trouble trying to mimic this functionality between containers.

Ive set up a dockerfile each for the server and the client and running them from a docker-compose.yml file. The client will run fine but when making a request to the express server, the network tab shows it using port 5001. The server is also running and can be accessed at port 3001.

The functionality I’m trying to replicate in vue.config.js

module.exports = {
    devServer: {
        port: 5001,
        proxy: {
            '/api': {
                target: 'http://localhost:3001'
            }
        }
    },
}

Client Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Server Dockerfile

# develop stage
FROM node:11-alpine as develop-stage
WORKDIR /app/server
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001

CMD ["npm", "run", "start"]

docker-compose.yml

version: '3.7'
services:
  client:
    build: ./
    volumes:
      - ./:/app
      - /node_modules
    ports:
      - 8080:80
      - 5001:80
    container_name: client
    depends_on:
      - api
    links:
      - api
  api:
    build: ./server
    volumes:
      - ./server:/server
      - /server/node_modules
    ports:
      - 3001:3001
    container_name: api

nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
upstream rest_api {
    server api:3001;
  }
  server {
    listen 80;
    server_name localhost;
    location / {
        root /app;
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }
    location /api {
        proxy_pass http://rest_api;
        # rewrite ^/api(.*)$ $1 break;
    }
  }

If it helps, here’s what they look live after running docker compose

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                                        NAMES
81e894bf4671        wiley_client        "nginx -g 'daemon of…"   3 hours ago         Up 3 hours          0.0.0.0:5001->80/tcp, 0.0.0.0:8080->80/tcp   client
4941260708b4        wiley_api           "docker-entrypoint.s…"   3 hours ago         Up 3 hours          0.0.0.0:3001->3001/tcp                       api

I expect any client request at /api to port to 3001 on my server docker container instead of 5001 like it currently is.

Source: StackOverflow