react+nginx

React + Nginx (statique et dynamique)

Spread the love

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 !

chevron_left
chevron_right

Laisser un commentaire

%d blogueurs aiment cette page :