Démarrer avec Nginx

Mis à jour : 19/01/2023 danny

NGINX est un logiciel serveur Web

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