Arhn - архитектура программирования

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

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

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

Пока я запускаю контейнер на основе сборки образа с этим Dockerfile, он работает. Хотя мне нужно поставить еще один Nginx, действующий как обратный прокси, перед этим, я хочу перенаправить трафик с маршрутом типа /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 неверный запрос при попытке посетить /my-app/. Есть ли у кого-нибудь решение для этого? Что я ошибаюсь? Спасибо!

nginx angular nginx-reverse-proxy reverse-proxy
05.05.2020

Ответы:


1

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

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

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

31.07.2020
  • Если я отправлю curl -IL http://localhost:8081, я получу: $ curl -IL http://localhost:8081 % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 808 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0HTTP/1.1 200 OK ... 11.09.2020
  • По-прежнему не работает, теперь URL-адрес localhost / my-app возвращает 400 Bad Request nginx / 1.19.2. 11.09.2020
  • Не знаю, можете ли вы обновить вопрос с вашей текущей конфигурацией? Также /var/log/nginx/error.log может быть интересным. 11.09.2020
  • проклятая косая черта в proxy_pass займет у меня 15 часов, пока я не прочитаю этот ответ 16.01.2021
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..