créer-réagir-app npm exécuter la commande de construction
J'ai construit une petite application React avec create-react-app , et elle fonctionne correctement à partir du serveur local après l'exécution de npm start. OK jusqu'ici.
Cependant, lorsque j’exécute npm run build, le processus semble s’exécuter correctement (le dossier de construction, qui contient le fichier js intégré et le fichier index.html), mais n’affiche rien lorsque j’ouvre index.html dans mon navigateur. Qu'est-ce que je rate?
A part: J'ai aussi essayé de le télécharger sur un serveur distant et quand je suis allé à l'URL, le navigateur est revenu avec ...
Interdit: vous n'êtes pas autorisé à accéder à/sur ce serveur.
... si quelqu'un a une idée de la façon de résoudre ce problème, je l'apprécierais également.
Cependant, lorsque j'exécute npm run build, le processus semble s'exécuter correctement (le dossier de construction, qui contient le fichier js fourni et le fichier html.index), mais rien n'indique si j'ouvre index.html dans mon navigateur. Qu'est-ce que je rate?
Lorsque vous exécutez npm run build, il affiche les instructions appropriées:
Vous ne pouvez pas simplement ouvrir index.html car il est supposé être servi avec un serveur de fichiers statique.
C'est parce que la plupart des applications React utilisent le routage côté client et que vous ne pouvez pas le faire avec les URL file://.
En production, vous pouvez utiliser Nginx, Apache, Node (ex. Express) ou tout autre serveur pour gérer des actifs statiques. Assurez-vous simplement que si vous utilisez le routage côté client, vous fournissez index.html pour toute demande inconnue, telle que /*, et pas seulement pour /.
En développement, vous pouvez utiliser pushstate-server pour cela. Cela fonctionne bien avec le routage côté client. C’est exactement ce que les instructions imprimées vous suggèrent de faire.
J'ai également essayé de le télécharger sur un serveur distant et lorsque je suis allé à l'URL, le navigateur est revenu avec Forbidden: vous n'avez pas la permission d'accéder/sur ce serveur.
Vous devez télécharger le contenu du dossier build, pas le dossier build lui-même. Sinon, le serveur ne peut pas trouver votre index.html car il se trouve à l'intérieur de build/index.html, et il échoue. Si votre serveur ne détecte pas de index.html de niveau supérieur, veuillez vous reporter à la documentation de votre serveur pour la configuration des fichiers servis par défaut.
Ici, vous pouvez résoudre ce problème de 2 manières possibles.
1.Changez l'historique de routage en "hashHistory" au lieu de browserHistory à la place de
<Router history={hashHistory} >
<Route path="/home" component={Home} />
<Route path="/aboutus" component={AboutUs} />
</Router>
Maintenant, construisez l'application en utilisant la commande
Sudo npm run build
Ensuite, placez le dossier de construction dans votre dossier var/www /. Maintenant, l’application fonctionne correctement avec l’ajout du tag # dans chaque URL. comme
localhost/#/home localhost/#/aboutus
Solution 2: sans balise # en utilisant browserHistory,
Définissez votre historique = {browserHistory} dans votre routeur. Générez-le maintenant en utilisant Sudo npm run build.
Vous devez créer le fichier "conf" pour résoudre la page 404 non trouvée. Le fichier conf devrait ressembler à ceci.
ouvrez votre terminal tapez les commandes ci-dessous
cd /etc/Apache2/sites-availablelsnano sample.conf Ajoutez-y le contenu ci-dessous.
<VirtualHost *:80>
ServerAdmin [email protected]
ServerName 0.0.0.0
ServerAlias 0.0.0.0
DocumentRoot /var/www/html/
ErrorLog ${Apache_LOG_DIR}/error.log
CustomLog ${Apache_LOG_DIR}/access.log combined
<Directory "/var/www/html/">
Options Indexes FollowSymLinks
AllowOverride all
Require all granted
</Directory>
</VirtualHost>
Maintenant, vous devez activer le fichier sample.conf en utilisant la commande suivante
cd /etc/Apache2/sites-available
Sudo a2ensite sample.conf
il vous demandera ensuite de recharger le serveur Apache, en utilisant Service Sudo Apache2 recharger ou redémarrer
puis ouvrez votre dossier localhost/build et ajoutez le fichier .htaccess avec le contenu de ci-dessous.
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
Maintenant, l'application fonctionne normalement.
Remarque: changez 0.0.0.0 ip en votre adresse ip locale.
J'espère que cela aidera les autres.
L'extension 'Web Server for Chrome' est extrêmement facile à utiliser. Installez-le et configurez le répertoire sur ~/my-react-app/build /
J'ai essayé d'exécuter la même commande et de faire en sorte que l'application affiche également un écran blanc . Le fichier js principal prenait le chemin relatif du fichier et indiquait une erreur lorsque j'ouvre le fichier js dans le nouveau navigateur "Votre fichier n'a pas été trouvé" .__ Je le fais sur le chemin absolu et ça fonctionne bien.
vous ne pouvez pas exécuter la version de production en cliquant sur index.html, vous devez modifier votre script comme ci-dessous.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "serve -s build"
}
après avoir exécuté npm run-script build, exécutez npm run-script deploy, vous obtiendrez quelque chose comme ceci, c’est ici que vous pourrez charger votre version de production.
npm install -g sert avant d'exécuter npm run-script deploy.
cddans votre dossier de construction,python -m SimpleHTTPServer 8080pour démarrer un serveur sur le port 8080,- allez à l'adresse
localhost:8080/index.htmldans votre navigateur.
Après avoir construit votre application avec create-react-appcreate-react-app
Exécutez la commande npm run build Après cette commande, exécutez la commande npm install -g serve & enfin serve -s build
Des informations plus détaillées peuvent être trouvées ici create-react-app-deployment