CasaOS / ZimaOS [TUTO] Installer Nginx Proxy Manager

morgyann

Grand Maître Jedi
Membre Confirmé
2 Février 2023
2 805
664
188
.bzh
yapasdebug.bzh
Avec un serveur proxy inversé et un nom de domaine redirigé vers votre serveur, vous pourrez exposer vos services Web – applications – de votre réseau privé et vous connecter à celles-ci de n’importe où.

Nginx Proxy Manager – NPM – est un outil open source conçu pour simplifier la gestion d’un serveur proxy inverse – reverse proxy – basé sur Nginx, ainsi que la configuration de certificats SSL/TLS. Il fournit une interface web graphique qui permet aux utilisateurs, même non expérimentés en administration système ou en ligne de commande, de configurer facilement des hôtes virtuels, des redirections, des règles de sécurité et la terminaison SSL.

C'est ici https://nginxproxymanager.com/

1. Configurations préalables​

Avant de procéder à l’installation de l’application NginxProxyManager, il vous faudra au préalable

1.1. Créer un Nom De Domaine et rediriger celui ci vers l’IP publique de la Box du réseau local de votre serveur.

1.2. Changer le port d’écoute 80 par défaut, lors de l’installation de ZimaOS, si vous installer NPM sur cette machine.

1.3. Sur la Box/Routeur, domestique ou professionnelle, de votre opérateurje rappelle que vos devez disposer d’une IPv4 publique dédiée et fixe – vous accédez à son panneau de configuration

Vous fixez l’adresse IP locale attribuée à votre serveurdu type 192.168.1.x – en bail permanent afin que cette dernière ne change plus en cas de redémarrage de la box ou du serveur ou expiration du bail temporaire. Suivant le modèle de votre Box, cette opération s’effectue au niveau de l’onglet DHCP ou Réseau local ou Appareils connectés.

Si vous souhaitez changer cette IP locale, par exemple le DHCP a attribué l’IP 192.168.1.166 et préféreriez 192.168.1.20, inscrivez cette nouvelle IP locale lors de la création du bail permanent sur votre Box et, redémarrez votre serveur pour qu’elle soit prise en compte.


Ouvrez les ports 443 et 80 pour le serveur. L’onglet de la Box se nomme souvent NAT ou NAT/PAT ou Sécurité. Vous devez créer 2 lignes. Une première ligne sur l’adresse IP locale et/ou Nom du Serveur pour le port 80 interne et externe et une deuxième pour le port 443 interne et externe. Par exemple, sur l’illustration le serveur est à l’adresse locale 192.168.1.7 et sont ouverts les deux ports 443 et 80 en TCP. Concernant la fenêtre Source, laissez par défaut Toutes ou *

Installer-NPM-Ouvrir-les-ports-80-et-443.png

Si cette option d’attribution de ports n’est pas présente sur votre Box, c’est sans doute que vous êtes sur une IP Publique partagée souvent appelée CGNAT, dûe à la pénurie des IPv4. Vous devrez obtenir une IPv4 dédiée.

Sur les Box domestiques, la fonction UPnP est activée par défaut – que vous trouvez souvent à l’onglet NAT – cette fonction UPnP permet d’ouvrir automatiquement des ports d’écoute à la demande de vos logiciels serveurs par exemple Plex Serveur, ou certains serveurs de Jeux en ligne ou encore les NAS commerciaux etc. En terme de sécurité, il est conseillé de désactiver cette fonction et d’affecter les ports concernés manuellement si nécessaire et dans la mesure où cette manip n’affecte pas le fonctionnement de vos appareils connectés.


2. Installer Nginx Proxy Manager​

Bien qu’il y ait l’application dans le magasin d’Application mais basée sur l’ancienne version, je vous propose cette configuration qui permet de disposer de l’ensemble des éléments nécessaires à renseigner.

2.1. Cliquez sur l’icône + en haut à droite de la page d’accueil au dessus des tuiles et sélectionnez Installer une application personnalisée.

2.2. La fenêtre des paramètres de votre application s’ouvre et cliquez sur l’icône flèche vers le carré en haut à droite, avec pour libellé Importer

2.3. Le pop-up vous propose d’importer votre configuration avec un fichier YAML ou de copier-coller celle-ci dans la fenêtre dédiée. Vous pouvez agrandir cette fenêtre en sélectionnant les deux traits en bas à droite.

2.4. Copier-coller dans la fenêtre le code de configuration ci dessous.


Code:
name: nginxproxymanager
services:
  nginxproxymanager:
    cpu_shares:
    command: []
    container_name: nginxproxymanager
    deploy:
      resources:
        limits:
          memory:
        reservations:
          memory:
          devices: []
    image: jc21/nginx-proxy-manager:latest
    labels:
      icon: https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/icon.png
    ports:
      - target: 80
        published: "80"
        protocol: tcp
      - target: 443
        published: "443"
        protocol: tcp
      - target: 81
        published: "81"
        protocol: tcp
    restart: unless-stopped
    volumes:
      - type: bind
        source: /DATA/AppData/nginxproxymanager/data
        target: /data
      - type: bind
        source: /DATA/AppData/nginxproxymanager/etc/letsencrypt
        target: /etc/letsencrypt
    devices: []
    cap_add: []
    environment: []
    network_mode: bridge
    privileged: false
x-casaos:
  architectures:
    - amd64
    - arm64
    - arm
  author:
  category: Network
  description:
    fr_fr: Nginx Proxy Manager est un outil simple et puissant pour vous aider à
      héberger plusieurs sites Web sur un seul serveur.
  developer: Nginx Proxy Manager
  hostname:
  icon: https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/icon.png
  index: /
  is_uncontrolled: false
  main: nginxproxymanager
  port_map: "81"
  scheme: http
  screenshot_link:
    - https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/screenshot-1.jpg
    - https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/screenshot-2.jpg
    - https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/screenshot-3.jpg
  store_app_id: nginxproxymanager
  tagline:
    fr_fr: Gestion des hôtes proxy Nginx avec une interface simple et puissante.

  thumbnail: https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/NginxProxyManager/thumbnail.png
  title:
    custom: "NGINX PROXY MANAGER"
    en_us: Nginx Proxy Manager


Cliquez sur Appliquer, puis sur OK sur le Pop-up qui s’affiche

2.5. Sur le Panneau Paramètres, maintenant pré-rempli, modifiez,

L’espace Web UI en inscrivant en dur l’IP locale du serveur qui s’affiche en filigrane

Installer-NPM-Inscrire-lIP-locale.png

2.6. Cliquez sur Installer et patientez le temps de l’installation

3. Première configuration​

3.1. Cliquez sur la nouvelle tuile créée. Un page web s’ouvre et indiquez – pour création de votre compte administrateur – un nom – une adresse courriel et un mot de passe. Puis SAVE.

Installer-NPM-Creation-du-compte.png

3.2. Sur l’interface vous pouvez modifier le profil si vous le souhaitez. L’interface n’est pas encore traduite en français.

Installer-NPM-Modifier-le-profil.png



4. Lier vos Noms De Domaines – NDD​


Les deux principales fonctions de cette application sont

1. De générer des certificats SSL, via Let’s Encrypt, pour vos NDD redirigés sur votre serveur

2. De faire « correspondre » à chaque NDD certifié, un hôte – votre app web – afin de l’exposer sur le web et de la joindre en https

4.1. Générer un certificat SSL pour votre NDD​

Cliquez sur l’onglet Certificates puis sur Add Certificate -> Let’s Encrypt via HTTP

La fonction via DNS permet de générer des Wildcards qui sera le sujet d’un prochain tuto.

Installer-NPM-Lets-Encrypt-via-HTTP.png

Inscrivez votre NDD dans la fenêtre puis cliquez sur le bandeau Create « … » et validez avec Save

La fenêtre vous rappelle que « Ces domaines doivent déjà être configurés pour pointer vers cette installation ».

Installer-NPM-Indiquez-le-NDD.png


Le certificat SSL pour ce NDD est créé en s’affichant dans la liste Certificates. Vous pouvez renouveler cette opération si vous avez plusieurs NDD redirigés vers votre serveur. La colonne de droite STATUT m’indique – Not Used – qu’il n’est pas attaché à une application locale actuelle ou future.



Installer-NPM-Certificats.png

4.2. Attacher une Application au NDD​

Pour configurer votre application sur le web, sélectionnez le second onglet Hosts et, sur le Bouton Add Proxy Host

Installer-NPM-Add-Proxy-Host.png

Sur la fenêtre qui s’ouvre à l’onglet Details vous indiquez

. Dans la fenêtre Domain Name, le Nom De Domaine certifié qui sera utilisé pour se connecter à l’App

. Dans la fenêtre Sheme si votre App, sur le réseau local, se connecte en HTTP, le plus général, ou sur un port HTTPS

. Dans la fenêtre IP, indiquez l’IP de la machine serveur, sur votre réseau local, sur laquelle est ou sera installée l’App

. Dans la fenêtre Port, indiquez le numéro de Port, en local pour http, sur laquelle s’ouvre votre App

Indiquez les options nécessaires au fonctionnement de l’app en https

Installer-NPM-Details.png

Ne validez pas encore et, ouvrez l’onglet SSL. Dans la fenêtre, sélectionnez le Nom De Domaine certifié et correspondant au NDD indiqué précédemment à l’onglet Details. Validez Force SSL et d’autres options si nécessaires. Puis validez avec le bouton SAVE


Installer-NPM-Correspondance-NDD.webp



La récapitulation de vos apps attachées à un NDD s’affiche sur la page Proxy Hosts. Online indique simplement que la configuration est fonctionnelle même si votre application n’est pas encore déployée.

Installer-NPM-Recap-Hosts.png
 
Dernière édition:
Merci pour le tuto.

Je me demande si Nginx Proxy Manager est plus puissant ou non que le proxy inversé du Portail de connexion de DSM.
 
Nginx Proxy Manager est plus puissant
Je ne sais si l'on peut parler de puissance pour ce type de logiciel :unsure:

En terme matériel, il ne consomme quasiment rien en CPU et RAM. En revanche, il doit être installé sur la machine qui a le port réseau avec le + de débit ( si ton réseau est en en 2.5G et que ton Proxy Inversé est sur une machine en 1G, il y aura une réduction du débit à 1G, par ex).

En terme logiciel, les 2 (Syno et NPM) sont très ergonomiques et fonctionnent nickels.
La différence réside en : sur Syno tu dois intervenir sur 2 onglets -> un pour configurer le Proxy Inversé + un pour le NDD (Sécurité). Sur NPM tout se fait sur la même interface. Les 2 demeurent facile d'utilisation.

Sur Syno, les wildcards pour tes NDD perso sont générés automatiquement (testé pour Infomaniak pour ma part et OVH par @zypos). Sur NPM, tu dois générer une clé API chez ton Registraire afin que NPM puisse être autorisé à générer ces wildcards automatiquement - une fois cette opération effectuée NPM les génère instantanément (sur Syno, il y a un petit temps de latence).

En résumé, les 2 fonctionnent bien et restent facile à utiliser. Je pense que l'important reste au niveau du port réseau.
Perso, je ne vois pas trop l'intérêt d'installer sur un Syno, NPM (logiciel sup à gérer qui n'apportera pas grand chose de + et qui risque de perturber le Proxy Inversé intégré dans le DSM).
 
Sur Syno, les wildcards pour tes NDD perso sont générés automatiquement
Je n'utilise pas de wildcards.
Perso, je ne vois pas trop l'intérêt d'installer sur un Syno, NPM (logiciel sup à gérer qui n'apportera pas grand chose de + et qui risque de perturber le Proxy Inversé intégré dans le DSM).
Je vois au moins un intérêt, c'est de ne plus dépendre de DSM si je passe à la concurrence (je n'ai pas dit UGREEN :)), même si ce n'est pas pour tout de suite.

Mais le fait de basculer brutalement les ports 80 et 443 sur NPM risque de poser problème.
 
Mais le fait de basculer brutalement les ports 80 et 443 sur NPM risque de poser problème.
??? Ce logiciel utilise 3 ports : 81 (accès à l'interface) + 2 à exposer 80 pour la validation et le renouvèlement des certifs et 443 en permanence.

Tu parles de basculer le Proxy Inversé de Syno à une autre machine, je suppose ?
Cela te prendra que 5 mn - le temps de rediriger sur ta box/routeur les ports 80 et 443 vers ta nouvelle machine dédiée. La validation des NDD se fait en 1 clic et est instantané. Si tu as des apps installées sur d'autres machines (le Syno par ex) pas de souci, tu indiques simplement leur IP locale + port sur NPM.
 
Dernière édition:
Ce logiciel utilise 3 ports : 81 (accès à l'interface) + 2 à exposer 80 pour la validation et le renouvèlement des certifs et 443 en permanence.
Je ne parlais que des ports 80 et 443 parce que le port 81 ne pose aucun problème.
Tu parles de basculer le Proxy Inversé de Syno à une autre machine, je suppose ?
Non, j'utilise NPM sur le Syno pour tester.
 
Salut @morgyann !
Bon bah... j'ai encore fais une connerie ^^
J'ai suivi le début et créé hier soir mon identifiant.
Ce matin, il ne reconnait pas le mail ou le mot de passe.
J'ai tenté de désinstaller mais - ça m'est déjà arrivé sur Zima - la désinstallation ne permet pas d'effacer les identifiants précédents. La dernière fois sur FileBrowser, j'avais trouvé dans Portainer une ligne modifiable (ID et mot de passe n'avaient rien à voir avec ce que j'avais mis).
Ici, rien dans Portainer. J'ai cherché dans AppData et dans le dossier Docker lié à Nginx pour tout ce qui pouvait s'ouvrir avec Notepad+. Rien non plus.

Bref deux questions : Sais-tu comment réinitialiser Nginx.
Sais-tu comment nettoyer ZimaOs quand on désinstalle une appli pour supprimer la totalité des configurations ?

Comme d'hab, merci pour ton immense patience !
 
Bonjour,
il ne reconnait pas le mail ou le mot de passe.
Là je ne sais pas pourquoi ? Ce que tu peux faire (après avoir supprimé l'app et quand tu la réinstalles), c'est copier/coller le YAML proposé + sur la console tu ajoutes 2 fenêtres dans la partie "Environnement" que tu complètes comme suit (avec tes propres identifiants ;)) :

Code:
      INITIAL_ADMIN_EMAIL: my@example.com
      INITIAL_ADMIN_PASSWORD: mypassword1

1772882286148.png

Comme cela ton identifiant et ton mot de passe seront prédéterminé (et consultable à tout moment si tu oublies) l'option est ici en fin de page :

comment réinitialiser Nginx.
Si rien n'est encore configuré, le + simple c'est d'effacer et recommencer si tu es sur ZimaOS :

1. En haut à droite sur la tuile (icône 3 point verticaux) tu sélectionnes désinstaller

1772881675345.png

2.
Tu ouvres la tuile Files puis sur l'onglet dédié "Fichiers" ; tu vas dans ZimaOS-HD -> Dossier AppData -
Tu repères le dossier concerné dans ton cas c'est nginxproxymanager + Supprimer (ou Corbeille)

1772881780580.png
1772881983028.png


Aussi, change de navigateur (si possible) ou redémarre le ou nettoie l'historique
 
Tu ouvres la tuile Files puis sur l'onglet dédié "Fichiers" ; tu vas dans ZimaOS-HD -> Dossier AppData -
Tu repères le dossier concerné dans ton cas c'est nginxproxymanager + Supprimer (ou Corbeille)
Alors ça, ça ne fait rien. J'ai testé. D'où ma perdition. J'ignore où les identifiants sont conservés.
Pareil sans ID. Firefox, Chrome et Brave que j'avais testé puis supprimé quand je testais l'OS ne peuvent plus fonctionner si je les réinstalle.

Pour le reste, je vais tester ton idée d'intégrer les ID en paramètres ! Je te tiens au jus dans pas longtemps !

Merci !!
 
@morgyann tu es décidément un dieu Zima ! La solution variable environnement sans désinstallation ne fonctionne pas (Je voulais tester deux modes), mais ta solution de désinstaller, vider le dossier puis réinstaller en insérant les variables avant l'installation a fonctionné.
Merci ! Encore une fois
 
Salut !
Je reviens sur cette installation NGING (Enfin réussie). Mon agenda et moi, c'est les montagnes russes !
Alors après moultes tracas liés à HTTPS, j'ai réinitialisé Zima (Sans aucun succès pour résoudre mes soucis), et finis pas le réinstaller à zéro. L'avantage, c'est qu'avec des tutos YAPASDEBUG pour sauvegarder ce qu'il fallait et réinstaller le bouzin, c'était accessible.
Tout roule... mais fauit toujours que je fasse tourner ce !:?!$*^$+/ de NGINX.

J'ai un NDD chez Infomaniak et j'ai créé deux DynDNS pointant sur l'IP flottante de mon routeur. IP VPN de CyberGhost et c'est pour cela qu'elle est flottante.

Une fois dans NGINX, je lance la commande Lets encrypt. J'ai tenté via DNS et via HTTP.
Dans les deux cas, ça renvoie une erreur interne. Voici les miniatures.

Si tu as une idée... je prends.

Via HTTP (J'ignore si c'est la bonne méthode puisque mon IP est dynamique)

erreur Nginx2.png


Via DNS

Erreur Nginx.png