Así que tengo un SPA que construí usando Create-React-App. Funciona completamente bien para desarrolladores locales, y quería implementar la aplicación creada usando nginx.
Configuré mi Dockerfile y nginx.conf , y al principio todo parecía funcionar bien. Pero luego, noté el problema más extraño.
La mayor parte de la aplicación funciona bien, pero cuando trato de acceder a una URL anidada directamente (es decir, no navegando a través de la aplicación -> Esto funciona bien. El problema ocurre solo cuando accedo a la URL directamente o actualizo la página), hay errores en la consola/red mientras se recuperan los archivos creados. Digamos que estoy accediendo a localhost:3000/app/potato , veo que mi navegador está intentando acceder a archivos desde localhost:3000/app/static/js/2.ebff4827.chunk.js (en lugar de localhost:3000/static/js/2 .ebff4827.chunk.js )
Acceder a localhost:3000/app funciona bien, pero localhost:3000/app/ (con / final) tiene el mismo comportamiento extraño.
Como resultado, el navegador no puede cargar la página...
Aquí está mi nginx.conf (aunque no creo que esto cause mi error, ya que lo configuré con un CRA en blanco y funcionó bien https://github.com/piaverous/cra-nginx-demo ):
server { listen 3000; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }¿Alguien tiene alguna pista sobre lo que podría estar causando el problema? Estoy totalmente perdido aquí
Entonces resulta que este problema proviene de la compilación de mi paquete web. En mi package.json , tenía la homepage: "./" , lo que provocó que la ruta resolviera los problemas.
¡Simplemente eliminar este campo pareció solucionar este problema! La configuración de Nginx estuvo bien :)