Angular App работает на nginx и за дополнительным обратным прокси-сервером nginx - PullRequest
Новая
       151

Angular App работает на nginx и за дополнительным обратным прокси-сервером nginx

0 голосов
/ 12 сентября 2018

В настоящее время я пытаюсь создать обратный прокси-сервер для двух приложений Angular.Я хочу, чтобы оба приложения были доступны через порт 443 хоста докера с включенным SSL (например, https://192.168.x.x/app1 и https://192.168.x.x/app2),, чтобы пользователям не приходилось вводить номера портов для каждогоapp.

Моя настройка заключается в том, что каждая часть приложения запускается в своем собственном контейнере Docker: - Контейнер 1: приложение Angular 1 (порт 80 открыт для хоста через порт 8080) - Контейнер 2: приложение Angular 2 (Порт 80 доступен для хоста через порт 8081) - Контейнер 3: обратный прокси-сервер (открыт порт 443)

И приложения Angular, и обратный прокси-сервер работают на nginx. Приложения построены так: ng build --prod --base-href /app1/ --deploy-url /app1/

Настройка nginx приложений выглядит следующим образом: 

server {
  listen 80;
  sendfile on;

  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Конфигурация обратного прокси-сервера nginx выглядит следующим образом: 

server {
  listen 443;
  ssl on;
  ssl_certificate /etc/nginx/certs/domaincertificate.cer;
  ssl_certificate_key /etc/nginx/certs/domain.key;

  location /app1/ {
    proxy_pass http://192.168.x.x:8080;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;

  }
  location /app2/ {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
     proxy_pass http://192.168.x.x:8081;
  }
}

Если я пытаюсь открытьприложение по URL 'https://192.168.x.x/app1', приложение достигнуто, но я получаю сообщения об ошибках для всех статических файлов' Uncaught SyntaxError: неожиданный токен <': <a href="https://i.stack.imgur.com/b3ay4.jpg" rel="nofollow noreferrer"> сообщения об ошибках из chrome

Itкажется, что вместо статиc js и css файлы, index.html приложения возвращается.Я считаю, что это проблема конфигурации nginx самих приложений.

Я потратил немало времени, пытаясь понять, как решить эту проблему, но пока не повезло.Я надеюсь, что кто-то здесь может помочь мне с этим.

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

Во-первых, я предпочитаю подход один сервис, один контейнер, обеспечивающий перенаправление с nginx. Он также почти автоматически покрывает https, используя докеризованный обратный прокси-сервер nginx с сертификатами. Вы также можете использовать letsencrypt сертификаты , если хотите. Вы можете развертывать свои приложения Angular в контейнерах за обратным прокси .

enter image description here

Ниже я опишу шаги для развертывания вашего докера. Я также включаю portainer , который представляет собой графический интерфейс для развертывания вашего контейнера:

  • Запустите nginx в порту 443, предоставив сертификаты, сгенерированные для вашего домена, используя параметр -v $ HOME / certs: / etc / nginx / certs. Положите сертификаты где-нибудь на хосте, например / etc / nginx / certs . Параметр - restart = всегда необходим для автоматического запуска контейнера при перезагрузке сервера: 
docker run -d --name nginx-proxy --restart=always -p 443:443 -v /root/certs:/etc/nginx/certs -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy
  • Ваши приложения 1 и 2 должны быть развернуты в appX.yourdomain и должны быть перенаправлены на IP-адрес докера (таким образом, nginx может перенаправить поддомен в ваш контейнер).
  • Dockerfile ДОЛЖЕН предоставлять доступ к веб-службе через разные порты (8080 и 8081). Компонент также должен быть развернут на этом порту
  • Самое важное, что контейнеры приложения 1 и 2 должны включать параметр -e VIRTUAL_HOST = appX.yourdomain и PROXY_ADDRESS_FORWARDING = true : 
docker run --name app1 --restart=always -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_HOST=app1.yourdomain yourcontainer
  • Также запущен Portainer для предоставления панели мониторинга для докеров: 
docker run --name portainer --restart=always -v ~/portainer:/data -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_HOST=portainer.yourdomain portainer/portainer -H tcp://yourdockerip:2376

Таким образом, в основном, когда какой-то запрос (поддомен) поступает в nginx, он автоматически перенаправляется в приложение углового контейнера (на которое ссылается appX.yourdomain). Лучше всего то, что jwilder / nginx-proxy автоматически обновляет nginx.conf при запуске разных контейнеров. Наша архитектура микросервисов реализована в Spring (автоматическое развертывание), поэтому я привожу здесь, как вы можете собрать контейнер с angular и nginx , но я думаю, вы уже решили это. Я также хотел бы использовать docker-compose.

0 голосов
/ 05 марта 2019

проблема в том, что контейнеры 8080 и 8081 могут открывать ресурсы, такие как localhost: 8080 / styles.css или localhost: 8080 / bundle.js. но с текущей конфигурацией они получают запросы localhost: 8080 / app1 / styles.css. попробуйте добавить rewrite /?app1/(.*)$ /$1 break; правило для обратного прокси, чтобы они получали правильные запросы

...