Installation React · 11 min read · Dec 21, 2025

Comment installer ReactJS avec Nginx sur Ubuntu 22.04

React.js est un framework JavaScript gratuit et open-source développé par Facebook en 2011. Il est utilisé pour créer des composants d’interface utilisateur réutilisables et aide les utilisateurs à créer rapidement et efficacement des applications web riches et engageantes avec un minimum de code. Avec React, vous pouvez construire une interface web interactive et composer des UIs complexes à partir de petites pièces isolées. Il utilise le DOM virtuel, ce qui rend l’application rapide. Il offre de nombreuses fonctionnalités telles que le DOM virtuel, le liaison de données unidirectionnelle, les composants, JSX, les instructions conditionnelles, et bien plus encore.

Dans ce tutoriel, nous allons vous montrer comment installer React.js sur Ubuntu 22.04.

Prérequis

  • Un serveur exécutant Ubuntu 22.04.
  • Un nom de domaine valide pointé vers l’IP de votre serveur.
  • Un mot de passe root configuré sur le serveur.

Commencer

Tout d’abord, vous devrez mettre à jour les paquets de votre système vers la dernière version. Vous pouvez les mettre à jour en utilisant la commande suivante :

apt-get update -y  
apt-get upgrade -y

Une fois tous les paquets à jour, exécutez la commande suivante pour installer d’autres dépendances requises :

apt-get install curl gnupg2 -y

Une fois toutes les dépendances installées, vous pouvez passer à l’étape suivante.

Installer Node.js

Ensuite, vous devrez installer Node.js sur votre serveur. Par défaut, la dernière version de Node.js n’est pas disponible dans le dépôt standard d’Ubuntu 22.04. Vous devrez donc installer Node.js à partir du dépôt officiel de Node.js.

Tout d’abord, ajoutez le dépôt Node.js avec la commande suivante :

curl -sL https://deb.nodesource.com/setup_18.x | bash -

Ensuite, exécutez la commande suivante pour installer Node.js sur votre système :

apt-get install nodejs -y

Après avoir installé Node.js, mettez à jour NPM vers la dernière version en utilisant la commande suivante :

npm install npm@latest -g

Vous devriez obtenir la sortie suivante :

supprimé 14 paquets, changé 73 paquets, et audité 223 paquets en 3s

14 paquets recherchent un financement
  exécutez `npm fund` pour plus de détails

trouvé 0 vulnérabilités

Ensuite, vérifiez la version installée de Node.js avec la commande suivante :

node -v

Vous devriez obtenir la sortie suivante :

v18.12.1

Une fois que vous avez terminé, vous pouvez passer à l’étape suivante.

Installer l’outil Create React App

Create React App est un outil CLI qui aide les utilisateurs à gagner du temps pour la configuration et la mise en place. Vous n’avez qu’à exécuter une seule commande et Create React App mettra en place tous les outils nécessaires pour commencer votre projet.

Vous pouvez installer l’outil Create React App en utilisant la commande suivante :

npm install -g create-react-app

Une fois que vous avez terminé, vous pouvez passer à l’étape suivante.

Créer une application React d’exemple

Dans cette section, nous allons créer une application React d’exemple avec l’outil Create React App.

Tout d’abord, changez le répertoire vers /opt et créez votre premier projet avec la commande suivante :

cd /opt  
create-react-app reactapp

Vous devriez voir la sortie suivante :

Succès ! Créé reactapp à /opt/reactapp
À l'intérieur de ce répertoire, vous pouvez exécuter plusieurs commandes :

  npm start
    Démarre le serveur de développement.

  npm run build
    Regroupe l'application en fichiers statiques pour la production.

  npm test
    Démarre le testeur.

  npm run eject
    Supprime cet outil et copie les dépendances de construction, les fichiers de configuration
    et les scripts dans le répertoire de l'application. Si vous faites cela, vous ne pourrez pas revenir en arrière !

Nous vous suggérons de commencer par taper :

  cd reactapp
  npm start

Bon hacking !

Ensuite, changez le répertoire vers votre répertoire de projet et démarrez votre application avec la commande suivante :

cd /opt/reactapp  
npm start

Vous devriez obtenir la sortie suivante :

Compilé avec succès !

Vous pouvez maintenant voir reactapp dans le navigateur.

  http://localhost:3000

Notez que la version de développement n'est pas optimisée.
Pour créer une version de production, utilisez npm run build.

webpack compilé avec succès

Appuyez sur CTRL+C pour arrêter l’application. Nous allons créer un fichier de service systemd pour gérer l’application React.

Créer un service Systemd pour l’application React

Ensuite, vous devrez créer un service systemd pour votre application React. Vous pouvez le créer avec la commande suivante :

nano /lib/systemd/system/react.service

Ajoutez les lignes suivantes :

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactapp
ExecStart=npm start -- --port=3000

Enregistrez et fermez le fichier, puis rechargez le démon systemd avec la commande suivante :

systemctl daemon-reload

Ensuite, démarrez le service React et activez-le pour qu’il démarre au redémarrage du système en exécutant la commande suivante :

systemctl start react  
systemctl enable react

Vous pouvez vérifier l’état du service React avec la commande suivante :

systemctl status react

Vous devriez obtenir la sortie suivante :

? react.service
     Chargé : chargé (/lib/systemd/system/react.service; statique)
     Actif : actif (en cours d'exécution) depuis dim. 2022-11-20 11:18:50 UTC; 6s ago
   PID principal : 76129 (npm start --por)
      Tâches : 30 (limite : 2242)
     Mémoire : 250.9M
        CPU : 4.663s
     CGroup : /system.slice/react.service
             ??76129 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??76140 sh -c "react-scripts start --port=3000"
             ??76141 node /opt/reactapp/node_modules/.bin/react-scripts start --port=3000
             ??76148 /usr/bin/node /opt/reactapp/node_modules/react-scripts/scripts/start.js --port=3000

Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] Avertissement de dépréciation : 'onAfterSetupMiddl>
Nov 20 11:18:54 ubuntu2204 npm[76148]: (Utilisez `node --trace-deprecation ...` pour montrer où l'avertissement a été créé)
Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] Avertissement de dépréciation : 'onBeforeSetupMid>
Nov 20 11:18:54 ubuntu2204 npm[76148]: Démarrage du serveur de développement...
Nov 20 11:18:55 ubuntu2204 npm[76148]: Compilé avec succès !
Nov 20 11:18:55 ubuntu2204 npm[76148]: Vous pouvez maintenant voir reactapp dans le navigateur.
Nov 20 11:18:55 ubuntu2204 npm[76148]:   http://localhost:3000
Nov 20 11:18:55 ubuntu2204 npm[76148]: Notez que la version de développement n'est pas optimisée.
Nov 20 11:18:55 ubuntu2204 npm[76148]: Pour créer une version de production, utilisez npm run build.
Nov 20 11:18:55 ubuntu2204 npm[76148]: webpack compilé avec succès

Une fois que vous avez terminé, vous pouvez passer à l’étape suivante.

Configurer Nginx comme un proxy inverse

Il est judicieux d’installer et de configurer Nginx comme un proxy inverse pour l’application React. Ainsi, vous pouvez accéder à votre application via le port 80.

Tout d’abord, installez le paquet Nginx en utilisant la commande suivante :

apt-get install nginx -y

Une fois Nginx installé, créez un nouveau fichier de configuration d’hôte virtuel Nginx :

nano /etc/nginx/sites-available/reactjs.conf

Ajoutez les lignes suivantes :

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.example.com;

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Enregistrez et fermez le fichier, puis activez l’hôte virtuel Nginx avec la commande suivante :

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Ensuite, vérifiez Nginx pour toute erreur de syntaxe en exécutant la commande suivante :

ginx -t

Vous devriez obtenir la sortie suivante :

nginx : le fichier de configuration /etc/nginx/nginx.conf a une syntaxe correcte
nginx : le test du fichier de configuration /etc/nginx/nginx.conf a réussi

Enfin, redémarrez le service Nginx pour appliquer les modifications :

systemctl restart nginx

Vous pouvez également vérifier l’état du service Nginx avec la commande suivante :

systemctl status nginx

Vous devriez voir la sortie suivante :

? nginx.service - Un serveur web haute performance et un serveur proxy inverse
     Chargé : chargé (/lib/systemd/system/nginx.service; activé; présélection du fournisseur : activé)
     Actif : actif (en cours d'exécution) depuis dim. 2022-11-20 11:20:17 UTC; 6s ago
       Docs : man:nginx(8)
    Processus : 76760 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exité, statut=0/SUCCÈS)
    Processus : 76762 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exité, statut=0/SUCCÈS)
   PID principal : 76763 (nginx)
      Tâches : 2 (limite : 2242)
     Mémoire : 2.6M
        CPU : 32ms
     CGroup : /system.slice/nginx.service
             ??76763 "nginx : processus maître /usr/sbin/nginx -g daemon on; master_process on;"
             ??76764 "nginx : processus de travail" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Nov 20 11:20:17 ubuntu2204 systemd[1]: Démarrage d'un serveur web haute performance et d'un serveur proxy inverse...
Nov 20 11:20:17 ubuntu2204 systemd[1]: Démarré un serveur web haute performance et un serveur proxy inverse.

À ce stade, Nginx est installé et configuré pour servir l’application React. Vous pouvez maintenant passer à l’étape suivante.

Sécuriser React.js avec Let’s Encrypt

Ensuite, vous devrez installer le paquet client Certbot pour installer et gérer le SSL Let’s Encrypt.

Tout d’abord, installez Certbot avec la commande suivante :

apt-get install python3-certbot-nginx -y

Une fois l’installation terminée, exécutez la commande suivante pour installer le SSL Let’s Encrypt sur votre site web :

certbot --nginx -d reactjs.example.com

On vous demandera de fournir une adresse e-mail valide et d’accepter les conditions de service comme indiqué ci-dessous :

Enregistrement du journal de débogage dans /var/log/letsencrypt/letsencrypt.log
Plugins sélectionnés : Authenticator nginx, Installer nginx
Entrez l'adresse e-mail (utilisée pour les renouvellements urgents et les avis de sécurité) (Entrez 'c' pour annuler) : [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Veuillez lire les conditions de service à l'adresse https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. Vous devez
accepter pour vous inscrire auprès du serveur ACME à
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)ccepter/(C)annuler : A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Seriez-vous disposé à partager votre adresse e-mail avec la Electronic Frontier
Foundation, un partenaire fondateur du projet Let's Encrypt et l'organisation à but non lucratif
qui développe Certbot ? Nous aimerions vous envoyer des e-mails sur notre travail
pour chiffrer le web, les nouvelles de l'EFF, les campagnes et les moyens de soutenir la liberté numérique.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(O)ui/(N)on : Y
Obtention d'un nouveau certificat
Réalisation des défis suivants :
http-01 défi pour reactjs.example.com
En attente de vérification...
Nettoyage des défis
Déploiement du certificat sur le VirtualHost /etc/nginx/sites-enabled/fuel.conf

Ensuite, choisissez de rediriger ou non le trafic HTTP vers HTTPS comme indiqué ci-dessous :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1 : Pas de redirection - Ne faites aucun changement supplémentaire à la configuration du serveur web.
2 : Rediriger - Faites en sorte que toutes les demandes redirigent vers un accès HTTPS sécurisé. Choisissez ceci pour
les nouveaux sites, ou si vous êtes sûr que votre site fonctionne sur HTTPS. Vous pouvez annuler ce
changement en modifiant la configuration de votre serveur web.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sélectionnez le numéro approprié [1-2] puis [entrée] (appuyez sur 'c' pour annuler) : 2

Tapez 2 et appuyez sur Entrée pour terminer l’installation. Vous devriez voir la sortie suivante :

Redirection de tout le trafic sur le port 80 vers ssl dans /etc/nginx/sites-enabled/fuel.conf

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Félicitations ! Vous avez activé avec succès https://reactjs.example.com

Vous devriez tester votre configuration à :
https://www.ssllabs.com/ssltest/analyze.html?d=reactjs.example.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

NOTES IMPORTANTES :
 - Félicitations ! Votre certificat et votre chaîne ont été enregistrés à :
   /etc/letsencrypt/live/reactjs.example.com/fullchain.pem
   Votre fichier clé a été enregistré à :
   /etc/letsencrypt/live/reactjs.example.com/privkey.pem
   Votre certificat expirera le 2023-02-20. Pour obtenir une nouvelle version ou une version modifiée
   de ce certificat à l'avenir, exécutez simplement certbot à nouveau
   avec l'option "certonly". Pour renouveler *tous* vos certificats de manière non interactive,
   exécutez "certbot renew"
 - Vos identifiants de compte ont été enregistrés dans votre répertoire de configuration Certbot à
   /etc/letsencrypt. Vous devriez faire une
   sauvegarde sécurisée de ce dossier maintenant. Ce répertoire de configuration contiendra également
   des certificats et des clés privées obtenus par Certbot, donc faire des sauvegardes régulières de ce dossier est idéal.
 - Si vous aimez Certbot, veuillez envisager de soutenir notre travail en :

   Faisant un don à ISRG / Let's Encrypt :   https://letsencrypt.org/donate
   Faisant un don à l'EFF :                    https://eff.org/donate-le

 - Nous n'avons pas pu vous abonner à la liste de diffusion de l'EFF car votre
   adresse e-mail semble invalide. Vous pouvez réessayer plus tard en
   visitant https://act.eff.org.

Maintenant, votre application web React.js est sécurisée avec le SSL Let’s Encrypt.

Accéder à l’interface web de l’application React

Maintenant, ouvrez votre navigateur web et tapez l’URL https://reactjs.example.com. Vous serez redirigé vers l’interface web de React.Js sur l’écran suivant :

Conclusion

Félicitations ! Vous avez installé et configuré avec succès React.Js sur le serveur Ubuntu 22.04. Vous pouvez maintenant commencer à construire votre propre application basée sur React et l’héberger dans un environnement de production. N’hésitez pas à me poser des questions si vous en avez.

Share: X/Twitter LinkedIn
#Installation React

Recevez de nouveaux articles dans votre boîte de réception.

Aucun spam. Désabonnez-vous à tout moment.