Как прокси-клиент Vue на сервер Express, работающий в док-контейнерах

Question

Я пытаюсь заставить приложение vue cli3 общаться с моим api node express, работающим в отдельных контейнерах докеров.Локально, я просто добавляю конфигурацию в файле vue.config для прокси моего dev-сервера, и у меня возникают проблемы при попытке подражать этой функциональности между контейнерами.

Я настроил каждый файл dockerfile для сервера и клиента изапустив их из файла docker-compose.yml.Клиент будет работать нормально, но при отправке запроса на экспресс-сервер, вкладка сети показывает его через порт 5001. Сервер также работает и может быть доступен через порт 3001.

Функциональность, которую я пытаюсьреплицировать в vue.config.js

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

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;"]

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;
    }
  }

Если это поможет, вот как они выглядят вживую после запуска 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

Я ожидаю, что любой клиентский запрос в / api будет портирован на 3001 на моемКонтейнер Docker вместо 5001, как сейчас.

Answer 1

Ок, похоже, я вообще не вводил свой файл nginx.conf, поэтому изменил Client Dockerfile на

# production stage
FROM nginx:stable-alpine as production-stage
RUN apk add --update --upgrade --no-cache wget
ADD ./nginx.conf /etc/nginx/nginx.conf            <-- added this line
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80

, затем в nginx.conf, убедитесь, что он был указан для моего встроенного файла index.html

    location / {
        root /app/dist;   <-- add dist here
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }