React est une bibliothèque JavaScript gratuite et open-source développée par Facebook. Il est utilisé pour créer des composants d'interface Web et d'interface utilisateur. Il est souvent utilisé pour développer des applications Web ou des applications mobiles. Il permet aux développeurs de créer des composants réutilisables indépendants les uns des autres. Il peut être utilisé avec d'autres bibliothèques, notamment Axios, JQuery AJAX ou le navigateur intégré window.fetch.
Dans cet article, nous allons vous montrer comment installer React JS sur CentOS 8
Prérequis
- Un serveur exécutant CentOS 8.
- Un nom de domaine valide pointé vers l'adresse IP de votre serveur.
- Un mot de passe root est configuré sur le serveur.
Mise en route
Avant de commencer, vous devrez mettre à jour vos packages système vers la dernière version. Vous pouvez les mettre à jour en exécutant la commande suivante :
dnf update -y
Une fois que tous les packages sont à jour, installez les autres dépendances requises avec la commande suivante :
dnf install gcc-c++ make curl -y
Une fois que vous avez terminé d'installer les dépendances requises, vous pouvez passer à l'étape suivante.
Installer NPM et Node.js
Ensuite, vous devrez installer Node.js et NPM sur votre système. NPM également appelé gestionnaire de packages est un outil de ligne de commande utilisé pour interagir avec les packages Javascript. Par défaut, la dernière version de NPM et Node.js n'est pas incluse dans le référentiel par défaut de CentOS. Vous devrez donc ajouter le référentiel source Node à votre système. Vous pouvez l'ajouter avec la commande suivante :
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
Une fois le référentiel ajouté, installez Node.js et NPM avec la commande suivante :
dnf install nodejs -y
Une fois l'installation terminée, vérifiez la version de Node.js en exécutant la commande suivante :
node -v
Vous devriez obtenir le résultat suivant :
v14.16.0
Vous pouvez également vérifier la version de NPM en exécutant la commande suivante :
npm -v
Vous devriez obtenir le résultat suivant :
6.14.11
À ce stade, NPM et Node.js sont installés sur votre système. Vous pouvez maintenant procéder à l'installation de Reactjs.
Installer Reactjs
Avant de commencer, vous devrez installer create-react-app sur votre système. Il s'agit d'un utilitaire de ligne de commande utilisé pour créer une application React.
Vous pouvez l'installer à l'aide du NPM comme indiqué ci-dessous :
npm install -g create-react-app
Une fois installé, vérifiez la version installée de create-react-app à l'aide de la commande suivante :
create-react-app --version
Vous devriez voir le résultat suivant :
4.0.3
Ensuite, créez votre première application Reactjs avec la commande suivante :
create-react-app myapp
Vous devriez voir le résultat suivant :
Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd myapp
npm start
Ensuite, changez le répertoire en myapp et démarrez l'application avec la commande suivante :
cd myapp
npm start
Une fois l'application démarrée avec succès, vous devriez obtenir le résultat suivant :
Compiled successfully! You can now view myapp in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Maintenant, appuyez sur CTRL + C pour arrêter l'application. Vous pouvez maintenant passer à l'étape suivante.
Créer un fichier de service Systemd pour Reactjs
Ensuite, c'est une bonne idée de créer un fichier de service systemd pour gérer le service Reactjs. Vous pouvez le créer avec la commande suivante :
nano /lib/systemd/system/react.service
Ajoutez les lignes suivantes :
[Unit] After=network.target [Service] Type=simple User=root WorkingDirectory=/root/myapp ExecStart=/usr/bin/npm start Restart=on-failure [Install] WantedBy=multi-user.target
Enregistrez et fermez le fichier puis rechargez le démon systemd avec la commande suivante :
systemctl daemon-reload
Ensuite, démarrez le service Reactjs et activez-le au redémarrage du système avec la commande suivante :
systemctl start react
systemctl enable react
Ensuite, vérifiez l'état de l'application Reactjs avec la commande suivante :
systemctl status react
Vous devriez obtenir le résultat suivant :
? react.service
Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
Main PID: 2191 (node)
Tasks: 29 (limit: 12524)
Memory: 220.3M
CGroup: /system.slice/react.service
??2191 npm
??2202 node /root/myapp/node_modules/.bin/react-scripts start
??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]: http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.
À ce stade, Reactjs est démarré et écoute sur le port 3000. Vous pouvez le vérifier avec la commande suivante :
ss -antpl | grep 3000
Vous devriez obtenir le résultat suivant :
LISTEN 0 128 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=2209,fd=18))
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Configurer Nginx en tant que proxy inverse pour l'application React
Ensuite, vous devrez configurer Nginx en tant que proxy inverse pour accéder à l'application React sur le port 80. Tout d'abord, installez le package Nginx avec la commande suivante :
dnf install nginx -y
Une fois le Nginx installé, créez un nouveau fichier de configuration d'hôte virtuel Nginx avec la commande suivante :
nano /etc/nginx/conf.d/react.conf
Ajoutez les lignes suivantes :
server {
listen 80;
server_name react.example.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:3000;
}
}
Enregistrez et fermez le fichier lorsque vous avez terminé, puis vérifiez le Nginx pour toute erreur de syntaxe avec la commande suivante :
nginx -t
Vous devriez obtenir le résultat suivant :
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Enfin, démarrez le service Nginx et activez-le au redémarrage du système en exécutant la commande suivante :
systemctl start nginx
systemctl enable nginx
Vous pouvez également vérifier l'état du Nginx en exécutant la commande suivante :
systemctl status nginx
Vous devriez obtenir le statut du service React dans la sortie suivante :
? nginx.service - The nginx HTTP and reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
Main PID: 4081 (nginx)
Tasks: 2 (limit: 12524)
Memory: 4.0M
CGroup: /system.slice/nginx.service
??4081 nginx: master process /usr/sbin/nginx
??4082 nginx: worker process
Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Configurer le pare-feu
Ensuite, vous devrez autoriser les ports 80 et 443 à travers le pare-feu. Vous pouvez les autoriser en exécutant la commande suivante :
firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp
Ensuite, rechargez le pare-feu pour appliquer les modifications de configuration :
firewall-cmd --reload
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Accéder à l'application Reactjs
Maintenant, ouvrez votre navigateur Web et accédez à votre application Reactjs en utilisant l'URL http://react.example.com . Vous devriez voir la page Reactjs sur l'écran suivant :
Conclusion
Toutes nos félicitations! vous avez installé avec succès Reactjs sur CentOS 8. Vous avez également configuré Nginx en tant que proxy inverse pour l'application Reactjs. Vous pouvez maintenant commencer à développer votre application Reactjs.