Tengo una aplicación angular, my-app , que construyo localmente con ng build --prod y sirvo con Nginx dockerized, el Dockerfile es:
FROM nginx:alpine COPY /dist/my-app /usr/share/nginx/html EXPOSE 80 Siempre que lance un contenedor basado en una imagen creada con este Dockerfile , funciona. Sin embargo, necesito poner otro Nginx que actúe como un proxy inverso antes de este, quiero redirigir el tráfico con una ruta como /my-app al Nginx interno que sirve Angular, así:
http://DOMAIN/my-app ---> Reverse Proxy ---> Nginx+Angular Usaré Docker Compose para desarrollo local. Mi docker-compose.yml es muy simple:
version: '3' services: nginx: container_name: my-nginx build: ./nginx ports: - "80:80" my-app: container_name: my-app build: ./my-app Para la aplicación Angular, "baseHref": "./my-app/" en mi archivo angular.json , construyo de nuevo y configuro el proxy inverso de la siguiente manera:
events {} http { server { listen 80 default_server; listen [::]:80 default_server; root /var/www; index index.html; location / { index index.html; } location /my-app { rewrite /my-app/(.*) /$1 break; proxy_pass http://my-app:80; proxy_set_header Host $host; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $http_connection; proxy_set_header Host $host; } } } Aquí, el index.html en la location / directiva es personalizado, no el de la aplicación Angular. Por lo tanto, espero que mi proxy inverso sirva index.html cuando visite la ruta / , lo cual hace, pero obtengo un error de solicitud incorrecta 400 cuando intento visitar /my-app/ . ¿Alguien tiene una solución para esto? ¿Qué me estoy equivocando? ¡Gracias!
Solo adivinando. Yo lo haría de esa manera.
# Maybe not necessary to redirect from /my-app to /my-app/. location ~ ^/my-app$ { set $myargs $args; # workaround to encode spaces in query string! return 303 $scheme://$server_name/my-app/$is_args$myargs; } location /my-app/ { # works mostly with and sometimes without slash at end! proxy_pass http://my-app:80/; # slash at end is goddamn important here; it hides /my-app/ and does all the $request_uri or regex, $is_args and $args magic for you! proxy_set_header Host $host; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $http_connection; proxy_set_header Host $host; } Si su back-end envía redireccionamientos, tal vez esté jodido. Verifique con curl -IL http://my-app . Si ve 301, 302, 303 hasta 308 con una Location: - es una redirección. Pero tal vez mi otra respuesta allí pueda ayudar (reescribir redireccionamientos): https://serverfault.com/a/986034/304842 o pruebe proxy_redirect . El problema que veo es que quieres websockets!? Tal vez también necesite sub_filter o subs_filter para eliminar /my-app/ del código fuente para otros enlaces y recursos. Verifique con [F12] -> Red en su navegador.