Nginx no sirve Angular hospedada en una imagen de docker

Question

Esta pregunta se ha hecho un millón de veces y hemos intentado casi todas las soluciones que podríamos encontrar para intentar resolverlo. Estamos sirviendo una aplicación Angular, alojada dentro de una imagen Docker (imagen alpina deNGINX) dentro de la ubicación predeterminada, /usr/share/nginx/html/*, a través de un mapeo 80:7021. En nuestra caja Linux, enganchamos un contenedor para servir un montón de imágenes, una de ellas siendo esta imagen Angular. La imagen Angular se construye con --prod base-href= /v2/  como la URL final que debe servir la aplicación tiene una /v2/ ubicación enganchada en NGINX en la máquina Linux. Dentro de nuestra configuración predeterminada para NGINX en el cuadro Linux, tenemos una ubicación /v2/ conectado y un proxy_pass a http://localhost:7021 También dentro del NGINX en la caja Linux fijamos el mimo. en consecuencia, para asegurar que la JS/CSS sea cumplida correctamente. Sin embargo, los archivos JS/CSS no se sirven. Por defecto, si NGINX no puede encontrar un archivo, sirve el archivo index estándar.html en su lugar, resultando en el temido  resource servido como texto/html  error. Hemos probado todos los escenarios posibles para resolver esto así que estoy girando aquí con la esperanza de que alguien ha visto este comportamiento no siendo resuelto y puede proporcionar una resolución que no sea mime. tipos y ubicación /.css. Una vez más, una reiteración de los dos escenarios que tenemos. 1.) Una imagen Docker, basada en NGINX Alpine Esta imagen contiene un --prod --base-href= /v2/  versión construida de nuestra aplicación Angular. Los archivos de aplicación son copiados /usr/share/nginx/html/*. 2.) Hostbox La caja de acogida está ejecutando Ubuntu 18.04 distro y tiene NGINX 1.14.2 y Docker 19.03.6. La caja host tiene un contenedor establecido para ejecutar un conjunto de imágenes, incluyendo la imagen Angular, discutido anteriormente. La caja de acogida, en NGINX tiene una /ubicación establecida para la aplicación Angular en /v2/*, lo que significa: https://www.awesomewebsite/v2/{angular}, por lo tanto la razón por la que construimos la cuenta con un coeficiente base de /v2/. Esto es práctica estándar en lo que somos conscientes y las cosas deben funcionar. Pero no lo hace. Hemos agotado nuestra búsqueda de Google. ¿Qué podemos probar después?

Gpt · Accepted Answer

Para solucionar el problema de que los archivos JS/CSS no se están sirviendo correctamente en tu aplicación Angular alojada en una imagen Docker con NGINX, puedes intentar lo siguiente:

Verifica la configuración de NGINX:

- Asegúrate de que la configuración de NGINX dentro de la imagen Docker esté correctamente configurada para servir los archivos estáticos.

Revisa el archivo de configuración de NGINX dentro de la imagen y confirma que está correctamente configurado para servir los archivos estáticos.

Corregir la ubicación de los archivos estáticos:

- Confirma que los archivos JS/CSS están siendo copiados correctamente a la ubicación correcta dentro de la imagen Docker (/usr/share/nginx/html/*).

Verifica que los archivos JS/CSS se encuentran en la ruta esperada y que no hay problemas de permisos en la ubicación donde se copian los archivos estáticos.

Configuración del base-href en Angular:

- Asegúrate de que el base-href que estás utilizando en la construcción de tu aplicación Angular (/v2/) coincida con la configuración de NGINX en la máquina Linux.

Revisa si es necesario ajustar el base-href en la configuración de Angular para que coincida con la ruta configurada en NGINX.

Verificación de la proxy_pass en NGINX:

- Confirma que la configuración de proxy_pass en NGINX está redirigiendo correctamente las solicitudes a la aplicación Angular en el puerto correcto (http://localhost:7021).

Verificar MIME types y configuración de tipos de archivos en NGINX:

- Asegúrate de que la configuración de los tipos MIME en NGINX esté correctamente configurada para servir archivos JS/CSS.

Revisa si es necesario agregar o ajustar los tipos MIME en la configuración de NGINX para los archivos estáticos.

Espero que estos pasos te ayuden a resolver el problema con la configuración de NGINX y que puedas servir correctamente los archivos estáticos en tu aplicación Angular. ¡Déjame saber si necesitas más ayuda!

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

Gemini · Answer

Problema: nginx no sirve archivos estáticos (JS/CSS) para una aplicación Angular alojada en un contenedor Docker. Pasos para solucionar problemas: 1 . Verificar la configuración de nginx: Asegúrate de que la configuración de ubicación para /v2/ tenga las siguientes directivas: location /v2/ { try_files $uri $uri/ /index.html; } Verifica que el. mime. tiposse configura correctamente para servir archivos JS y CSS. 2 . Verificar la imagen de Angular: Asegúrate de que la aplicación Angular se haya construido con la opción --prod. Verifica que la opción --base-href esté configurada correctamente en /v2/. Asegúrate de que los archivos estáticos se copien correctamente en /usr/share/nginx/html/. 3 . Verificar la configuración del contenedor Docker: Asegúrate de que el puerto 80 esté mapeado al puerto 7021 en el contenedor. Verifica que el contenedor tenga acceso a Internet. 4 . Depurar el contenedor Docker: Ejecuta el comando docker logs para ver los registros del contenedor. Ejecuta el comando docker exec -it /bin/sh para ingresar al contenedor y depurar el problema. 5 . Otras consideraciones: Verifica si hay algún cortafuegos o software antivirus que pueda estar bloqueando el acceso a los archivos estáticos. Intenta reiniciar nginx y el contenedor Docker. Prueba una versión diferente de nginx o Angular. Posible solución:* Si todos los pasos anteriores no resuelven el problema, intenta agregar la siguiente directiva a la configuración de ubicación en nginx: add_header Cache-Control no-cache; Esto evitará que nginx almacene en caché los archivos estáticos y obligará al navegador a obtener los archivos más recientes del contenedor.

Nginx no sirve Angular hospedada en una imagen de docker

2 Respuestas: