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 !