Activer ‘browserHistory’ de react-router pour fonctionner sur le serveur en direct
J’ai construit une application React que je peux déployer sur mon serveur de développement et tout fonctionne correctement. Je veux maintenant le télécharger sur un serveur distant, mais c’est là que je rencontre des problèmes.
J’ai fait quelques lectures à ce sujet, et je trouve la terminologie un peu dense et impénétrable, alors j’apprécierais vraiment que quelqu’un puisse m’aider à le dire.
Si je comprends bien, si vous utilisez hashHistory , vous avez des URL “laides”, mais l’avantage est qu’elles peuvent être déployées sur un serveur live.
En revanche, l’utilisation de browserHistory (comme je le suis) vous donne de jolies URL, mais crée des problèmes lorsque vous souhaitez télécharger sur un serveur, en particulier lorsque vous actualisez la page à une URL nestede, car le serveur ne le comprend pas. Le routeur crée de fausses URL qui sont utilisées pour générer le javascript correct pour charger les composants où nécessaire.
- Heroku: Comment déployer une application de noeud avec le client et le serveur s’exécutant sur des ports différents?
- Possibilité de contourner le plan gratuit de Heroku “Dormir après 30 minutes d’inactivité” avec console.logs?
- Erreur R13 (Joindre une erreur) -> Echec de la connexion au processus lors de l’exécution de la console sur heroku
- Tous mes fichiers Ruby dans mon projet Rails sont-ils stockés sur le serveur que je spécifie? (par exemple, Puma, Webrick)
- sqlite3 ne disparaîtra pas … rbuy sur rails
Ce que je comprends beaucoup (ou corrigez-moi si je ne semble pas).
Sans me pencher sur les serveurs JS, je veux savoir comment résoudre ce problème spécifique .
J’ai lu à propos de Heroku – mais après l’installation, il n’a pas semblé donner beaucoup de conseils sur la façon de tout faire fonctionner. J’ai vu des configurations qui incluaient un fichier server.js qui server.js l’application à un serveur express, mais cela me perd aussi un peu.
J’apprécierais vraiment que quelqu’un puisse me diriger dans la bonne direction, sachant que c’est un territoire totalement nouveau pour moi! J’apprécierais vraiment des explications de terminologie et autant de détails que possible.
Merci d’avance.
- CodeIgniter sur Heroku renvoie 404
- Temps de réponse élevé inexpliqué dans l’environnement Heroku
- Heroku échoue à cause du conflit entre Yarn et npm
- Problème de déploiement après le déploiement de l’application Go sur Heroku
- Heroku, programme nouveau Dyno Sleeptime
Attention: c’est juste une réponse de niveau début. Lisez avec vos propres risques.
Ok .. Commençons par croire une chose.
Every Web App Serve By Server;
Maintenant, comment ça marche?
Cas 1: Vous demandez un fichier par URL sous la forme http://mart71.com/index.html ou http://mart71.com et il vous sert index.html
Cas 2: Votre demande pour http://mart71.com/products/2 et sa réponse avec la page produit (dynamic) qui comme Id: 2
Ok .. Maintenant, comment l’ Single Page Application fonctionne?
Dans le cas de SPA , chaque demande doit être traitée par index.html conséquent, vous demandez http://mart71.com , serveur sert “index.html” avec tous ses fichiers javascript et votre exécution Javascript et montre ce qui doit être affiché sur la page de prêt.
Vous demandez un autre URI en tant que http://mart71.com/products/2 , d’abord son index index.html avec tous ses javascript et Javascript et poussez l’état de l’historique du navigateur vers les products/2 (changement de l’URL) et la page d’affichage. Dans ce cas, votre serveur n’a aucune idée de ce qui est réellement affiché sur cette page.
Qu’est-ce que tout cela signifie?
Simply, setup your server to serve all request by `index.html`
Comment faire ça?
Nginx: sur nginx.conf
location / { try_files $uri /index.html =404; // means what ever the url is, serve index.html }
Apache: sur .htaccess ou .conf
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
node.js express.js
don't try this at production.. considered as bad practice. Use Nginx or Apache as proxy server.