Comment déployer un projet React dans Nginx

Test item React-demo

Clonez votre projet React-Demo sur le serveur (par défaut, Github est utilisé pour gérer nos projets)

Si nécessaire, veuillez installer l'environnement du projet, tel que node.js, Yarn Line etc.

Entrez le répertoire du projet, exécutez npm run build et commencez à construire le projet

Après une construction réussie, un dossier dist sera généré (en fonction de la configuration de votre projet) et les fichiers statiques de ce dossier deviendront les fichiers d'accès de notre projet.

Pour configurer Nginx, serveur Linux saisissez : /etc/nginx/sites-enabled, puis en tant qu'administrateur, créez un nouveau fichier de configuration pour votre projet React comme React-demo.conf, puis éditez le fichier :

Serveur {

Listen8080

# serveur _ nommez votre

root/home/root/react-demo/dist

indexindex.htmlindex.htm; index .html;

}

location ^ ~ / actifs / {

gzip _ staticon

expiresmax

add _ cache-control public;

}

error _ page 50050250350 4/500.

client _ max _ body _ size20M

keepalive _ timeout10

}Exécutez sudo service nginx restart pour redémarrer le service Nginx.

Projet Access, http://IP:8080/

Remarques :

1 Si vous configurez un nom de domaine, vous avez besoin de 80 ports. Après succès, il vous suffit d'accéder au nom de domaine pour accéder au projet

2 Si vous utilisez le mode histoire du navigateur du routeur React, veuillez ajouter la configuration suivante à la configuration Nginx :

location/

try _ files. Principe $ uri $ uri //index .html;

}, car notre projet n'a qu'une seule entrée racine, et vous ne pouvez pas trouver cette page si vous entrez une URL comme /home. En effet, nginx essaiera de charger index.html. Après avoir chargé index.html, React-Router fonctionnera et correspondra à la route /home que nous avons entrée, affichant ainsi la bonne page d'accueil. Si le projet en mode histoire du navigateur ne configure pas le contenu ci-dessus, un 404 se produira.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!