ReactJS est une bibliothèque JavaScript gratuite et open source utilisée pour créer des composants d'interface utilisateur réutilisables. Il a été développé par Facebook en 2011 pour créer rapidement et efficacement des applications Web riches et engageantes avec un minimum de codage. Il vous permet de créer des éléments interactifs sur des sites Web. Il utilise Virtual DOM qui rend l'application rapide. Il offre un riche ensemble de fonctionnalités, notamment le DOM virtuel, la liaison de données unidirectionnelle, les composants, JSX, les instructions conditionnelles et bien d'autres.
Dans ce didacticiel, nous allons vous montrer comment installer l'application de création de réaction et héberger une application ReactJS avec le serveur Web Nginx sur Ubuntu 20.04.
Prérequis
- Un serveur exécutant Ubuntu 20.04 avec au moins 2 Go de RAM.
- Un nom de domaine valide pointant vers l'IP de votre serveur. Dans ce didacticiel, nous utiliserons le domaine reactjs.example.com.
- Un mot de passe root est configuré sur le serveur.
Mise en route
Avant de commencer, il est toujours recommandé de mettre à jour vos packages système vers la dernière version. Vous pouvez les mettre à jour en exécutant la commande suivante :
apt-get update -y
Une fois tous les packages mis à jour, installez les autres dépendances requises en exécutant la commande suivante :
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 référentiel standard Ubuntu 20.04. Vous devrez donc installer Node.js à partir du référentiel officiel Node.js.
Tout d'abord, ajoutez le dépôt Node.js avec la commande suivante :
curl -sL https://deb.nodesource.com/setup_14.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 le NPM vers la dernière version à l'aide de la commande suivante :
npm install [email protected] -g
Vous devriez obtenir le résultat suivant :
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js + [email protected] updated 2 packages in 12.78s
Ensuite, vérifiez la version installée de Node.js avec la commande suivante :
node -v
Vous devriez obtenir le résultat suivant :
v14.15.3
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Installer l'outil Créer une application React
Create React App est un outil qui vous fait gagner du temps pour l'installation et la configuration. Il vous suffit d'exécuter une seule commande et Create React App configurera tous les outils nécessaires pour démarrer votre projet.
Vous pouvez installer l'outil Create React App à l'aide de la commande suivante :
npm install -g create-react-app
Vous devriez obtenir le résultat suivant :
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js + [email protected] added 67 packages from 25 contributors in 4.705s
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Créez votre première application React
Dans cette section, nous allons vous montrer comment créer une application React avec l'outil Créer une application React.
Tout d'abord, changez le répertoire en /opt et créez votre premier projet avec la commande suivante :
cd /opt
create-react-app reactproject
Vous devriez voir le résultat suivant :
Success! Created reactproject at /opt/reactproject
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 reactproject
npm start
Happy hacking!
Ensuite, changez le répertoire de votre projet et démarrez votre application avec la commande suivante :
cd /opt/reactproject
npm start
Vous devriez obtenir le résultat suivant :
Compiled successfully! You can now view reactproject in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Appuyez sur CTRL+C pour arrêter l'application.
Créer un fichier de démarrage pour l'application React
Si vous souhaitez démarrer React App automatiquement au redémarrage du système, vous devrez créer un service systemd pour votre application React. Vous pouvez ainsi gérer facilement votre application à l'aide de la commande systemctl. Vous pouvez créer un fichier de service systemd avec la commande suivante :
nano /lib/systemd/system/react.service
Ajoutez les lignes suivantes :
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject 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 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 le résultat suivant :
? react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
Main PID: 30833 (node)
Tasks: 30 (limit: 4691)
Memory: 141.0M
CGroup: /system.slice/react.service
??30833 npm
??30844 sh -c react-scripts start "--port=3000"
??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000
Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...
Une fois que vous avez terminé, vous pouvez passer à l'étape suivante.
Configurer Nginx pour l'application React
C'est une bonne idée d'installer et de configurer Nginx en tant que proxy inverse pour React App. Vous pouvez donc accéder à votre application via le port 80.
Tout d'abord, installez le package Nginx à l'aide de 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 le Nginx pour toute erreur de syntaxe en exécutant 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, 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 le résultat suivant :
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
Docs: man:nginx(8)
Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 30915 (nginx)
Tasks: 3 (limit: 4691)
Memory: 3.6M
CGroup: /system.slice/nginx.service
??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
??30916 nginx: worker process
??30917 nginx: worker process
Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.
À ce stade, Nginx est installé et configuré pour servir React App. Vous pouvez maintenant passer à l'étape suivante.
Accéder à l'interface Web de l'application React
Maintenant, ouvrez votre navigateur Web et tapez l'URL http://reactjs.example.com . Vous serez redirigé vers l'interface Web de React.Js dans l'écran suivant :
Conclusion
Toutes nos félicitations! vous avez installé et configuré avec succès React.Js sur le serveur Ubuntu 20.04. J'espère que vous avez maintenant suffisamment de connaissances pour déployer votre propre application React dans l'environnement de production. N'hésitez pas à me demander si vous avez des questions.