Je ne peux pas comprendre comment obtenir mon application de réaction (créée avec Create-React-APP) pour fonctionner lors du déploiement de Heroku.
sans Heroku Tout fonctionne bien. J'utilise La structure de mon serveur ressemble à ceci: p> Voici mon fichier Server.js: p> p> npm start code> qui utilise
réacteur-scripts démarrez code> pour démarrer l'application réactive et tout fonctionne localement comme prévu.
Maintenant que je veux que l'application fonctionne sur Heroku, je dois utiliser Express pour servir son contenu au client. J'ai essayé cela mais malheureusement mon navigateur reste vide. Juste un écran blanc, rien d'autre. Pas même des messages d'erreur ?! Ni dans la console ni dans la console du navigateur. P>
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'src')));
app.get('/', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Server is running on port ' + port);
});
3 Réponses :
mon serveur.js mon procfile selon HEROKU: p> Veuillez noter que vous devriez avoir mon paquet.json p> construire < / Code> Dossier où la production serait ramassée par Heroku. En plus paquet.json. p>
Merci pour vos idées! Je ne savais pas que j'étais censé exécuter NPM Run Build CODE> et Servez le ./build Directory au lieu de ./public et ./src. Changer cela a fonctionné pour moi!
Heroku exécutera Cela signifie que votre middleware express devrait servir des fichiers statiques de votre devrait être: p> (Remarque: Je suggère d'utiliser une variable d'environnement pour ce Vos états de procfile que commandez Heroku devrait exécuter après le déploiement de votre code. Sachant que Heroku exécute Vous pouvez le faire en modifiant votre procfile comme ceci: P> NPM Exécuter Build code> Par défaut lors du déploiement. Dans votre cas, c'est
réacteur-scripts Construire code>. Ce script va regrouper votre code dans un dossier code> Build code>.
express h1>
Build Code> dossier au lieu de votre dossier
src code>. p>
processus.env.static_dir code> ou quelque chose de similaire. De cette façon, vous pouvez facilement basculer entre
src code> pour le développement local et
Construire code> pour le code de production et le déploiement.) em> p>
procfile h1>
NPM Run Build code> Vous devez servir votre paquet au lieu de votre code source. P>
web:node server.js
Merci beaucoup! Je comprends maintenant comment toutes ces pièces conviennent ensemble et je l'ai eu du travail!
@Tayfe génial d'entendre! Si cette réponse résolvait votre problème, veuillez la marquer comme réponse acceptée code> pour référence future. Donc, d'autres qui ont des problèmes similaires pourraient trouver votre question et être aidés comme l'accoupler.
Ouais, Un exemple de flux de travail prélevé de Heroku's DOCS : P> Créer-réact-app code> ne joue pas bien avec le nœud.
C'est ce que j'ai fait pour résoudre mon déploiement.
tl; dr code>:
Puisque vous avez créé l'application réagissante avec
Créer-réact-app code> Vous devez utiliser un autre buildpack tel que: github.com/mars/create-react-app-buildpack.git p>
heroku ps:scale web=1:free
Avez-vous un script code> code> dans votre
package.json code>? Si oui, pouvez-vous fournir celui-là s'il vous plaît? Heroku gère
NPM Run Catégorie code> Par défaut et sert à ce quefle au lieu du code source réel. Le problème pourrait être là-bas. Peut-être fournir votre
procfile code> également, cela pourrait éclairer ce que Heroku essaie de faire.
Oui j'ai un script de construction dans mon package.json:
"build": "réact-scripts construire" code>. Et mon procfile ne contient que:
Web: NPM Démarrer code>. Mais jusqu'à présent, j'essaie juste de préparer mon projet pour Heroku. Donc, je veux l'exécuter localement d'abord, deuxièmement, en utilisant
Heroku local Web code> et si les deux vont bien, je veux à nouveau le pousser à Heroku.