web-dev-qa-db-fra.com

Angular App fonctionnant sur nginx et derrière un proxy inverse nginx supplémentaire

J'essaie actuellement de créer un proxy inverse pour deux Angular. Je veux que les applications soient toutes deux accessibles via le port 443 de l'hôte docker avec SSL activé (comme https : //192.168.xx/app1 et https: //192.168.xx/app2 ), afin que les utilisateurs n'aient pas à taper les numéros de port pour chaque application.

Mon paramètre est que chaque partie de l'application s'exécute dans son propre conteneur Docker: - Conteneur 1: Angular App 1 (Port 80 exposé à l'hôte sur le port 8080) - Conteneur 2: Angular App 2 (Port 80 exposé à l'hôte sur le port Port 8081) - Conteneur 3: proxy inverse (Port 443 exposé)

Les applications Angular Angular et le proxy inverse s'exécutent sur nginx. Les applications sont conçues comme suit: ng build --prod --base-href /app1/ --deploy-url /app1/

Le paramètre nginx des applications est le suivant:

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

La configuration nginx du proxy inverse est comme ça:

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

Si j'essaie d'ouvrir l'application sur l'url ' https: //192.168.xx/app1 ', l'application est atteinte, mais j'obtiens des messages d'erreur pour tous les fichiers statiques 'Uncaught SyntaxError: jeton inattendu < ': Errormessages de chrome

Il semble qu'au lieu des fichiers statiques js et css, le fichier index.html de l'application soit renvoyé. Je crois que c'est un problème de configuration nginx des applications elles-mêmes.

J'ai passé pas mal de temps à essayer de comprendre comment résoudre ce problème, mais pas encore de chance. J'espère que quelqu'un ici pourra m'aider avec ça.

angulardockernginxreverse-proxynginx-reverse-proxy
14
Daniel Ostheimer

Tout d'abord, je préfère l'approche un service, un conteneur assurant la redirection avec nginx. Il couvre également presque automatiquement https en utilisant un proxy inverse nginx docké avec des certificats. Vous pouvez également utiliser permet de chiffrer les certificats si vous le souhaitez. Vous pouvez déployer vos Angular dans des conteneurs derrière le proxy inverse .

enter image description here

Ci-dessous, je décris les étapes de votre déploiement de docker. J'inclus également portainer qui est une interface graphique pour le déploiement de votre conteneur:

  • Exécutez le nginx dans le port 443 en partageant les certificats générés pour votre.domaine en utilisant l'option -v $ HOME/certs:/etc/nginx/certs. Placez les certificats quelque part sur l'hôte par exemple /etc/nginx/certs . L'option - restart = always est nécessaire pour exécuter automatiquement le conteneur au redémarrage du serveur:
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
  • Vos applications 1 et 2 doivent être déployées dans appX.votredomaine et doivent être redirigées vers l'IP docker (de cette façon, nginx peut rediriger le sous-domaine vers votre conteneur) .
  • Dockerfile DOIT exposer le service Web dans différents ports (8080 et 8081). Le composant doit également être déployé sur ce port
  • La chose la plus importante est que les conteneurs des applications 1 et 2 doivent inclure l'option - e VIRTUAL_Host = appX.votredomaine et PROXY_ADDRESS_FORWARDING = true :
docker run --name app1 --restart=always -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_Host=app1.yourdomain yourcontainer
  • Portainer est également lancé pour fournir le tableau de bord des conteneurs docker:
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

Donc, fondamentalement, lorsqu'une demande (sous-domaine) arrive à nginx, il redirige automatiquement vers l'application conteneur angular (référencé par appX.votredomaine). La meilleure chose est que jwilder/nginx-proxy met automatiquement à jour le nginx.conf lorsque les différents conteneurs démarrent. Notre architecture de microservices est implémentée dans Spring (autodéploiement) donc j'inclus ici comment vous pouvez construire le conteneur avec angular et nginx , mais je suppose que vous avez déjà résolu cela. I envisagerait également d'utiliser docker-compose.

4
Carlos Cavero

le problème est: les conteneurs 8080 et 8081 peuvent ouvrir des ressources comme localhost: 8080/styles.css ou localhost: 8080/bundle.js. mais avec la configuration actuelle, ils obtiennent à la place des requêtes localhost: 8080/app1/styles.css. essayez d'ajouter la règle rewrite /?app1/(.*)$ /$1 break; pour inverser le proxy, afin qu'ils obtiennent les bonnes demandes

0
Andrei