Как поднять 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"
В чем проблема?