múltiple Aplicaciones Vue en docker nginx - no puede reescribir la ruta raíz de ubicación

Question

Trato de servir dos aplicaciones Vue en contenedores vía docker nginx. El problema es - si pongo raíz para cada ubicación como este, tengo 404 en las urls de GET. server { listen 80; server_name localhost; location /backend/api { proxy_pass http://backend-diagnostics/api; } location ^~ /constructor { root /client/constructor; index index.html; try_files $uri /index.html; } location ^~ /viewer { root /client/viewer; index index.html; try_files $uri /index.html; } } nginx tiene un registro:  [error] 28#28: *3 open()  /etc/nginx/html/index.html  failed (2: No such file or directory)  Si agrego raíz al bloque servidor, así server { listen 80; server_name localhost; root /client/constructor; index index.html; location /backend/api { proxy_pass http://backend-diagnostics/api; } location ^~ /constructor { root /client/constructor; index index.html; try_files $uri /index.html; } location ^~ /viewer { root /client/viewer; index index.html; try_files $uri /index.html; } } la aplicación del constructor comienza a funcionar, pero si consigo localhost/viewerTengo resultado como si estuviera tratando de conseguir localhost/constructor. Si pongo la ubicación como esta location /viewer {...} la solicitud devuelve página en blanco. La fuente incluye texto We're sorry but constructor-client doesn't work properly without JavaScript enabled. Please enable it to continue. archivo de compostura de Docker, si es necesario version:  3  services: backend-diagnostics: build: ./backend command: bash -c  pm2-runtime start app.js  env_file: ./backend/.env.staging ports:  - 8080:80 # expose: # - 80 constructor-client: build: ./constructor- client command: bash -c  cp -r /app/dist/* /dist/  # ports: # - 8081:80 volumes:  - ./client/constructor:/dist viewer: build: ./viewer-client command: bash -c  cp -r /app/dist/* /dist/  # ports: # - 8082:8082 volumes:  - ./client/viewer:/dist nginx: build: ./nginx ports:  - 80:80  - 443:443 links:  - backend-diagnostics # - constructor-client # - viewer volumes:  - ./client/constructor:/client/constructor  - ./client/viewer:/client/viewer

Gpt · Accepted Answer

El problema que estás experimentando puede estar relacionado con la configuración de raíz y ubicaciones en tu archivo de configuración de Nginx. Vamos a abordar cada parte del problema para intentar resolverlo:

Configuración inicial de Nginx:

En tu primera configuración de Nginx, estás utilizando las ubicaciones `^~ /constructor` y `^~ /viewer` con la directiva `root` dentro de cada una. Sin embargo, al hacer esto, estás especificando la raíz de la aplicación dentro de cada ubicación, lo que puede estar causando conflicto.

Problema con la configuración raíz:

En tu segundo intento, al especificar la raíz en el bloque del servidor, funciona para la aplicación `constructor` pero no para la aplicación `viewer`. Esto se debe a que al definir la raíz en el nivel del servidor, se aplica a todas las ubicaciones, por lo que al acceder a `/viewer`, sigue apuntando a la raíz de la aplicación `constructor`.

Solución sugerida:

Una forma de abordar este problema es ajustar la configuración y separar las configuraciones de raíz y ubicaciones. Aquí te dejo una propuesta de cómo podrías hacerlo:

nginx
server {
    listen 80;
    server_name localhost;

    location /backend/api {
        proxy_pass http://backend-diagnostics/api;
    }

    location /constructor {
        alias /client/constructor;
        try_files $uri /constructor/index.html;
    }

    location /viewer {
        alias /client/viewer;
        try_files $uri /viewer/index.html;
    }
}

En esta configuración:

Usamos la directiva `alias` en lugar de `root` dentro de las ubicaciones para especificar la ruta real de los archivos estáticos.

Utilizamos `try_files` para intentar servir los archivos estáticos de la aplicación.

Asegúrate de que las rutas especificadas en `alias` coincidan con las que mapeas en tus contenedores Docker.

Prueba con esta configuración para ver si resuelve el problema que estás experimentando. No dudes en hacer preguntas si necesitas más ayuda.

Respondida el Dec 19, 2020 a las 11:14 - por Gpt

Gemini · Answer

Parece que el problema en tu configuración de Nginx es cómo estás dirigiendo las solicitudes a tus diferentes aplicaciones Vue alojadas en contenedores Docker. Aquí tienes algunos puntos que debes tener en cuenta:

Problema con la configuración de la raíz:

En tu configuración inicial, estás asignando la raíz /client/constructor al bloque del servidor, lo que hará que todas las solicitudes se dirijan a la aplicación constructor. Para servir varias aplicaciones, debes configurar ubicaciones independientes con sus propias raíces:

nginx
server {
    listen          80;
    server_name     localhost;

    location /backend/api {
        proxy_pass http://backend-diagnostics/api;
    }

    location /constructor {
        root /client/constructor;
        index index.html;
        try_files $uri /index.html;
    }

    location /viewer {
        root /client/viewer;
        index index.html;
        try_files $uri /index.html;
    }
}

Ruta raíz:

Es importante tener una ruta raíz (generalmente /) para cada ubicación para manejar las solicitudes de la página de inicio. En tu configuración inicial, no tenías rutas raíz configuradas para tus ubicaciones /constructor y /viewer. Asegúrate de incluir la barra diagonal inicial en tus rutas raíz:

nginx
location /constructor {
    ...
}

location /viewer {
    ...
}

Configuración de enlace:

En tu archivo docker-compose.yml, tienes nginx configurado para enlazarse solo con el servicio backend-diagnostics. Esto significa que Nginx no tiene conocimiento de tus servicios constructor-client y viewer. Debes agregar los servicios constructor-client y viewer a la lista de enlaces para que Nginx pueda comunicarse con ellos:


nginx:
    ...
    links:
         backend-diagnostics
         constructor-client
         viewer

Consideraciones adicionales:

Asegúrate de que los puertos expuestos por tus servicios constructor-client y viewer estén configurados correctamente en el archivo docker-compose.yml. Verifica que tus aplicaciones Vue estén construyéndose y ejecutándose correctamente en sus respectivos contenedores.

Comprueba los registros de Nginx y Docker para ver si hay mensajes de error o advertencias que puedan proporcionar información adicional.

Después de realizar estos cambios y reiniciar tus contenedores Docker, deberías poder acceder a tus dos aplicaciones Vue en http://localhost/constructor y http://localhost/viewer.

Respondida el Dec 19, 2020 a las 11:19 - por Gemini

múltiple Aplicaciones Vue en docker nginx - no puede reescribir la ruta raíz de ubicación

2 Respuestas: