Nginx обратный прокси + Angular обслуживается Nginx - PullRequest
Новая
       92

Nginx обратный прокси + Angular обслуживается Nginx

1 голос
/ 05 мая 2020

У меня есть приложение angular, my-app, которое я создаю локально с ng build --prod и обслуживаю с Nginx dockerized, Dockerfile это: 

FROM nginx:alpine
COPY /dist/my-app /usr/share/nginx/html
EXPOSE 80

Пока я запустите контейнер на основе сборки образа с этим Dockerfile, он работает. Хотя мне нужно поставить еще один Nginx, действующий как обратный прокси, перед этим, я хочу перенаправить трафик c с маршрутом, подобным /my-app, на внутренний Nginx обслуживающий Angular, например: 

http://DOMAIN/my-app ---> Reverse Proxy ---> Nginx+Angular

Я буду использовать Docker Compose для локального разработчика. Мой docker-compose.yml очень прост: 

version: '3'

services:
    nginx:
        container_name: my-nginx
        build: ./nginx
        ports:
            - "80:80"
    my-app:
        container_name: my-app
        build: ./my-app

Для приложения Angular я переопределяю "baseHref": "./my-app/" в моем angular.json файле, строю заново и настраиваю обратный прокси следующим образом: 

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;
    }
  }
}

Здесь index.html в директиве location / является настраиваемым, а не Angular приложением. Таким образом, я ожидаю, что мой обратный прокси-сервер будет обслуживать index.html при посещении маршрута /, что он и делает, но я получаю ошибку 400 Bad Request при попытке посетить /my-app/. Есть ли у кого-нибудь решение для этого? Что я ошибаюсь? Спасибо!

1 Ответ

0 голосов
/ 31 июля 2020

Просто догадываюсь. Я бы так и поступил. 

    # 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://$servername/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;
    }

Если ваш бэкэнд отправляет перенаправления, вы облажались. Проверить с curl -IL http://my-app. Если вы видите 301, 302, 303 до 308 с целью Location: - это редирект. Но, возможно, мой другой ответ может помочь (переписать перенаправления): https://serverfault.com/a/986034/304842. Проблема, которую я вижу, в том, что вам нужны веб-сокеты !? Возможно, вам также понадобится sub_filter или subs_filter, чтобы удалить / my-app / из исходного кода для других ссылок и ресурсов. Проверьте в браузере [F12] -> Сеть.

...