ReactJS est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur dynamiques, tandis que Nginx est un serveur web puissant et efficace. L’installation de ReactJS avec Nginx sur Ubuntu 22.04 permet de déployer des applications web modernes avec efficacité et rapidité. Ce guide détaillé vous fournira les étapes nécessaires pour mettre en place ReactJS et Nginx, le rendant accessible même pour les débutants.

Prérequis

• Ubuntu 22.04 LTS
• Accès à un terminal
• Privilèges sudo

Étape 1 : Installation de Node.js et npm

ReactJS nécessite Node.js, un environnement d’exécution JavaScript, et npm, un gestionnaire de paquets, pour son installation et sa gestion.

1. Installez Node.js et npm :

Ubuntu 22.04 contient par défaut une version de Node.js qui peut ne pas être la plus récente. Pour obtenir la dernière version, utilisez le PPA officiel NodeSource :

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

2. Vérifiez l’installation en affichant les versions installées de Node.js et npm :

node -v
npm -v

Étape 2 : Création d’une Application ReactJS

1. Installez Create React App :

Create React App est un outil officiellement supporté pour créer des applications React avec aucune configuration initiale.

sudo npm install -g create-react-app

2. Créez votre application React :

create-react-app mon-app-react
cd mon-app-react

3. Démarrez l’application React en mode développement pour tester :

npm start

Votre application React devrait maintenant être accessible via http://localhost:3000.

Étape 3 : Construction de votre Application pour la Production

1. Construisez votre application pour la production :

npm run build

Cette commande crée un dossier build contenant le code de votre application optimisé pour la production.

Étape 4 : Installation et Configuration de Nginx

1. Installez Nginx :

sudo apt update
sudo apt install nginx -y

2. Configurez Nginx pour servir votre application React. Créez un nouveau fichier de configuration pour votre site :

sudo nano /etc/nginx/sites-available/mon-app-react

3. Ajoutez la configuration suivante, en ajustant le chemin vers le dossier build de votre application React :

server {
    listen 80;
    server_name mon-app-react.com;

    location / {
        root /chemin/vers/mon-app-react/build;
        try_files $uri /index.html;
    }
}

4. Activez la configuration en créant un lien symbolique :

sudo ln -s /etc/nginx/sites-available/mon-app-react /etc/nginx/sites-enabled/

5. Vérifiez la configuration de Nginx et redémarrez le service :

sudo nginx -t
sudo systemctl restart nginx

Votre application React est maintenant accessible via le domaine configuré dans Nginx.

Après avoir configuré votre application ReactJS avec Nginx sur Ubuntu 22.04, vous pourriez être à la recherche d’une solution d’hébergement fiable et performante. Shape.host propose des services Cloud VPS qui offrent une plateforme optimisée pour héberger des applications web modernes, telles que les applications ReactJS. Avec Shape.host, vous bénéficiez d’une infrastructure puissante, d’une mise en œuvre rapide et d’une flexibilité pour adapter les ressources à vos besoins, assurant ainsi que votre application est toujours disponible et performante.