React + Nginx (statique et dynamique)

Nous allons voir comment utiliser Nginx avec React. Aussi bien la partie statique, pour un déploiement en production, par exemple, que la partie dynamique pour votre projet en développement.

Nginx est un logiciel libre de serveur Web ainsi qu’un proxy inverse écrit par Igor Sysoev.

React est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d’applications web monopage, via la création de composants dépendant d’un état et générant une page (ou portion) HTML à chaque changement d’état.

Nginx avec React en statique

Construction du projet

Nous allons nous placer dans le dossier du projet et lancer la construction de votre projet.

cd /var/app/mon_projet
npm run build

C’est tout ce que vous devez faire côté code.

Configuration de Nginx

Nous allons nous placer dans le dossier de configuration des hosts et créer un fichier mon_projet_react.conf

nano /etc/nginx/site-available/mon_projet_react.conf

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

        root /var/app/mon_projet/build;
        index index.html;

        server_name mon_projet.localhost;

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

• La configuration écoute sur le port 80
• Le dossier racine, root, est la localisation du projet
• index est le ficher qui va être utilisé avec le /
• pour le server_name n’oubliez pas de modifier votre fichier host pour pointer sur 127.0.0.1
• la partie location nous indique le comportement pour toutes les urls. Nous testons si le fichier demandé est disponible, sinon on renvoie une 404

Nginx avec React en dynamique

server {
    location / {
        proxy_pass http://localhost:3000;
    }
}

Super ! Vous savez lier React à Nginx !