Как настроить nginx для корректной работы с vue-router внутри docker compose?

Question

[Андрей]

Задачка получается странная. Обычно, достаточно просто раздавать статику, собранную Vue через nginx и горя не знать, но у меня всё это обернуто в docker-compose, где vue приложение это отдельный сервис, работающий на своём адресе, а nginx отдаёт его через proxy_pass

docker compose

services:
  nginx:
    image: nginx:latest
    restart: unless-stopped
    volumes:
      - ./data/nginx:/etc/nginx/conf.d
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - client
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"

  client:
    build:
      dockerfile: ./apps/client/Dockerfile
      context: ../../
    restart: always
    ports:
      - "8080:8080"

nginx

server {
    listen 80;
    server_name mydomain.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name mydomain.com;
    server_tokens off;

    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass  http://client:8080;
        proxy_set_header    Host                $http_host;
        proxy_set_header    X-Real-IP           $remote_addr;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
    }
}

Из-за этого возникает проблема: если попытаться перейти на любой роут, кроме корневого, будет ошибка 404.
При этом если сначала зайти в корень, то потом всё без проблем работает, любой роут открывается нормально.

Comments

[GeminiX]

можно глянуть что в ./apps/client/Dockerfile?
интресует там просто статика или приложение завернуто в node.js через какой-нибудь alpine образ.

Answer 1

[dzhoker1]

Попробуйте добавить try_files в настройки nginx

server {
    listen 443 ssl;
    .. 

    location / {
        try_files $uri $uri/ /index.html;
        proxy_pass http://client:8080;
        ...

Comments

[Андрей]

Не специалист в nginx, но разве try_files имеет какое-то значение при установленном proxy_pass? Ведь по сути никаких статичных файлов же нет