Démarrer avec nginx

Mis à jour : 03/03/2025 Danny

NGINX est un logiciel serveur Web open-source

Nginx est utilisé pour héberger des sites web, gérer des reverse proxies et optimiser les performances des applications.

Si vous n'avez pas le temps de lire ce guide en entier,
téléchargez le maintenant

Documentation

Site officiel
https://www.nginx.com/

Liste des dernières versions
https://github.com/nginx/nginx/releases

Installation sous Ubuntu

# installation
sudo apt-get --yes install nginx
sudo apt-get update

# démarre le service nginx
sudo service nginx start

# stoppe le service nginx
sudo service nginx stop

# redémarre le service nginx
sudo service nginx restart

# Désinstallation
sudo apt-get purge nginx nginx-common nginx-full --yes

Tester nginx

# Tester le fonctionnement de nginx
systemctl status nginx

systemctl status nginx.service

# Tester le fichier de configuration
nginx -t

Concepts

root : chemin par défaut
alias : chemin spécifique

root /var/www/html/app/;
location / {
    try_files $uri /index.html;
}
location /app1 {
    alias /var/www/html/app/app1/;
    try_files $uri$args $uri$args/ /index.html;
}

Commentaires

La syntaxe # permet de mettre en commentaire des lignes de code.

##
# Lignes de commentaires
##

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

Fichiers de configuration par défaut

Emplacements par défaut lors de l'installation de nginx.

Fichiers de configuration

/etc/nginx/nginx.conf
/etc/nginx/sites-enabled/default
/var/www/html/index.nginx-debian.html

/etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
}

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    default_type application/octet-stream;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    gzip on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

/etc/nginx/sites-enabled/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}

/var/www/html/index.nginx-debian.html

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

Configuration simplifiée

- On simplifie et adapte le fichier nginx.conf
Si vous tapez 127.0.0.1/url-unknown on obtient une erreur 404 Not Found
L'option suivante permettra de gérer les redirections 404.
try_files $uri /index.html;

- On copie un fichier responsive et simple index.html dans /var/www/html

/var/www/html/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <title>titre de notre page</title>
</head>

<body>
  Contenu de notre page
</body>

</html>

/etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
}

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    default_type application/octet-stream;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    gzip on;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

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

Application Angular avec AOT

Remarque

Le répertoire root peut être n'importe quel autre répertoire que l'on créera.

par exemple root /home/services/frontend/

Déploiement d'une application Angular avec Nginx.

Création d'un projet Angular de base
Compilation
Copie du contenu du répertoire dist dans /home/services/frontend/
Copie du fichier nginx.conf contenant une optimisation de configuration
Redémarrage du service nginx

# Générer un projet appelé angular-starter avec options par défaut
ng new angular-starter --defaults

# Compilation
npm run build

# Copie du contenu de /dist/angular-starter dans /var/www/html/

# Redémarrage du service nginx
sudo service nginx restart

nginx.conf

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /home/services/frontend;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

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

Angular et universal

Ajout de la fonctionalité Server side Rendering dans l'application Angular.
Installation de Node.js.
Installation de pm2.
Création du fichier process.config.js
Modification du fichier nginx.conf.
Copie du répertoire dist complet sur le serveur.

# Ajout d'angular universal avec Angular CLI
ng add @nguniversal/express-engine

# Installation de nodejs sur le serveur
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

# Installation
sudo npm install -g pm2

# Installation d'un process Méthode 1
pm2 start process.config.js --env prod

# Installation d'un process Méthode 2
pm2 start dist/angular-starter/server/main.js --name frontend

# Mise en mémoire
pm2 startup
pm2 save

process.config.js

module.exports = {
  apps : [
    {
      name      : 'frontend',
      script    : 'dist/angular-starter/server/main.js',
      env: {
        COMMON_VARIABLE: 'true'
      },
      env_dev : {
        NODE_ENV: 'dev'
      },
      env_prod : {
        NODE_ENV: 'prod'
      }
    }
  ],
};

nginx.conf

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location / {
            proxy_pass http://127.0.0.1:4000;
        }       

    }
}

Configuration multi domaines

Dans notre exemple
1 domaine et 3 sous domaines

www.your_domain.com
angular.your_domain.com
react.your_domain.com
vue.your_domain.com

Configuration par défaut pour toutes les url

listen 80 default_server;
listen [::]:80 default_server;

Suivie d'une configuration spécifique pour les url souhaitées

server_name react.wosiris.com;

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        location / {
            proxy_pass http://127.0.0.1:4000;
        }       
    }

    server {
        listen 80;
        server_name react.wosiris.com;
        location / {
            proxy_pass http://127.0.0.1:4001;
        }       
    }
}

Streams et Load balancer

Documentation
http://nginx.org/en/docs/http/ngx_http_upstream_module.html

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
        application/atom+xml
        application/javascript
        application/json
        application/rss+xml
        application/vnd.ms-fontobject
        application/x-font-ttf
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/opentype
        image/svg+xml
        image/x-icon
        text/css
        text/plain
        text/x-component;

    sendfile on;
    default_type application/octet-stream;

    upstream main.module {
        server 127.0.0.1:4000;
        server 192.168.100.1:4000;
    }

    upstream react.module {
        server 192.168.0.2:4000;
    }

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        
        location / {
            proxy_pass http://main.module;
        }
    }

    server {
        listen 80;
        server_name react.wosiris.com;
        
        location / {
            proxy_pass http://react.module;
        }
    }
}

Multi Application

1 seul domaine
3 Applications différentes

# Compilation de chaque application
ng build --base-href=/app1/

ng build --base-href=/app2/

ng build --base-href=/app3/

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html/app/;
        location / {
            try_files $uri /index.html;
        }
        # Variante 1 utilisation de root pour l'emplacement de index.html
        location /app1 {
            try_files $uri /app1/index.html;
        }
        # Variante 2 utilisation de alias pour l'emplacement de index.html
        location /app2 {
            alias /var/www/html/app/app2/;
            try_files $uri$args $uri$args/ /index.html;
        }
        # Variante 1 utilisation de root pour l'emplacement de index.html
        location /app3 {
            try_files $uri /app3/index.html;
        }

    }

}

Nginx et https

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    default_type application/octet-stream;

    server {
        listen 80;
        server_name www.wosiris.com;
        return 301 https://www.wosiris.com$request_uri;
    }

    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name www.wosiris.com;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_certificate ssl/wosiris.com/fullchain.pem;
        ssl_certificate_key ssl/wosiris.com/privkey.pem;
        location / {
        root /var/www/html;
            try_files $uri /index.html;
        }
    }

}

worker_processes auto;

events {
    worker_connections 768;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    server {
        listen 80;
        server_name my-domain.com;
        return 301 https://my-domain.com$request_uri;
    }

    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name www.wosiris.com;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_certificate ssl/my-domain.com/fullchain.pem;
        ssl_certificate_key ssl/my-domain.com/privkey.pem;

        location / {
            proxy_pass http://127.0.0.1:4000;
        }
    }

}

Forward IP Adresses

Passer l'adresse IP d'un client via proxy

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name your-domain.com;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_certificate ssl/your-domain.com/fullchain.pem;
    ssl_certificate_key ssl/your-domain.com/privkey.pem;

    root /home/services;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $remote_addr;
        proxy_pass http://backend.module;
    }
}