Как поднять dev окружение фронта на vue в docker с nginx?

Всем привет. Пытаюсь поднять фронт в докере. docker-compose.yml

  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    working_dir: /app
    container_name: ${APP_NAME}-frontend
    restart: unless-stopped
    tty: true
    volumes:
      - ./frontend:/app
    networks:
      - app
    ports:
      - "5173:5173" # Для dev-сервера Vue

Вся эта прелесть работает через nginx:

  webserver:
    image: nginx:1.29.0-alpine
    container_name: ${APP_NAME}-webserver
    restart: unless-stopped
    ports:
      - "${NGINX_HTTP_PORT:-80}:80"
      - "${NGINX_HTTPS_PORT:-443}:443"
    volumes:
      - ./backend:/var/www/backend:delegated
      - ./frontend:/var/www/frontend:delegated
      - ./docker/nginx/conf.d:/etc/nginx/conf.d:ro
      - ./docker/nginx/logs:/var/log/nginx
      - ./docker/nginx/ssl:/etc/nginx/ssl:ro
      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf
    networks:
      - app
    depends_on:
      - backend
      - frontend

Вот конфиг nginx для frontend:

server {
    listen 80;
    server_name my.local;

    root /var/www/frontend/dist;
    index index.html;

    # Логи
    access_log /var/log/nginx/frontend_access.log;
    error_log /var/log/nginx/frontend_error.log;

    add_header Access-Control-Allow-Origin $http_origin;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Для API запросов к бэку
    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

И конфиг для dev версии фронта:

server {
    listen 80;
    server_name frontend.my.local;

    root /var/www/frontend;
    index index.html;

    # Логи
    access_log /var/log/nginx/frontend_dev_access.log;
    error_log /var/log/nginx/frontend_dev_error.log;

    add_header Access-Control-Allow-Origin $http_origin;

    location / {
        proxy_pass http://frontend:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # Важные настройки для Vite HMR
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # Для API запросов к бэку
    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

В хосты винды прописал:

127.0.0.1 backend.my.local
127.0.0.1 my.local
127.0.0.1 frontend.my.local
127.0.0.1 localhost

При заходе на backend.my.local показывается бэк. При заходе на my.local скомпилированный фронт При заходе на frontend.my.local 502 ошибка. Логи ошибки:

2025/07/13 17:45:06 [error] 20#20: *61 connect() failed (111: Connection refused) while connecting to upstream, client: 10.150.2.1, server: frontend.my.local, request: "GET / HTTP/1.1", upstream: "http://10.150.2.3:5173/", host: "frontend.my.local"

В чем проблема?


Ответы (0 шт):