Je construis séparément deux applications: une application de réaction côté client et API reste avec node et express
Après avoir suivi de nombreux tutoriels, je trouve toujours un problème. Il semble que je n'ai pas de connexion entre les deux applications, cela ne semble pas être un fichier index.html dans mon code.
J'ai ceci dans mon package.json
Failed to load resource: the server responded with a status of 404 (Not Found)
{
message: "Not Found"
}
J'ai exécuté npm build et j'ai copié ces fichiers dans le dossier public / de mon API (côté serveur)
J'ai déjà changé cette ligne dans app.js comme:
2019-08-31T09:02:04.410915+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.410916+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.413683+00:00 app[web.1]: GET / 404 3.094 ms - 23
2019-08-31T09:02:04.250521+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ee83af00-4c66-4a52-a5e7-2966876625c1 fwd="89.128.30.48" dyno=web.1 connect=1ms service=6ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.413054+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=378720ba-9c05-464e-930e-74690578d64b fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.594472+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ad2abe4a-722b-497c-b97d-6e52e0fb7775 fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.593770+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.593788+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.593790+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593792+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593793+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593795+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593796+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593798+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.593802+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.593803+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.593804+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.593806+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593807+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593808+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593810+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593811+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593812+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.596042+00:00 app[web.1]: GET / 404 3.656 ms - 23
2019-08-31T09:02:04.711085+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.711089+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.711091+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711092+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711094+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711095+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711097+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711098+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.711099+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.711101+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.711102+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.711103+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711104+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711106+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711107+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711108+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711110+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.734709+00:00 app[web.1]: GET / 404 4.202 ms - 23
2019-08-31T09:02:04.861445+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.861467+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.861469+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861470+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861472+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861473+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861475+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861476+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.861477+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.861479+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.861480+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.861481+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861482+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861484+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861485+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861487+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861488+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.864485+00:00 app[web.1]: GET / 404 7.108 ms - 23
2019-08-31T09:02:05.052743+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:05.052746+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:05.052748+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052750+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052751+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052753+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052754+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052755+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:05.052757+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:05.052758+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:05.052759+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:05.052761+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052762+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052763+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052764+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052766+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052767+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:05.055590+00:00 app[web.1]: GET / 404 3.642 ms - 23
Dans mon api (côté serveur), dans un dossier public, j'ai collé tout ce qui se trouve à partir de npm run build (application côté cliend), même l'index.html. Le contenu complet de ce fichier est:
<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>"addEventListener"in document&&document.addEventListener("DOMContentLoaded",function(){FastClick.attach(document.body)},!1),window.Promise||document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"><\/script>')</script><title>A-Web</title><link href="/static/css/2.393a28fb.chunk.css" rel="stylesheet"><link href="/static/css/main.969b3049.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.7b0a8543.chunk.js"></script><script src="/static/js/main.c4eaec6f.chunk.js"></script></body></html>
J'ai obtenu ces journaux d'heroku :
app.use(express.static(path.join(__dirname, 'public/index.html')));
Quand je rends heroku ouvert, la console me montre:
"scripts": {
"start": "react-app-rewired start",
"build-dev": "dotenv -e .env.development react-app-rewired build",
"build-prod": "dotenv -e .env.production react-app-rewired build",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
}
J'ai juste besoin de télécharger sur heroku pour avoir un environnement de production. Il semble que tout est correct, j'essaie beaucoup de tutoriels et rien ne fonctionne pour moi.
mon github:
PD: J'utilise AntDesign.
3 Réponses :
enfin, j'ai fait ceci:
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
et l'application heroku est, heureusement en ligne ...
cependant, j'obtiens plusieurs problèmes pour y naviguer.
Merci Chirs G.!
Cette deuxième partie ne devrait pas être nécessaire, elle pourrait en fait tuer les requêtes pour le fichier JS et CSS puisque express envoie toujours le fichier index.html?
Pas du tout, l'index.html est ce que j'ai généré à partir de npm run build in react application
Oui, je sais, mais le dossier de construction contient également des fichiers JS et CSS, et lorsque ceux-ci sont demandés, la route * ci-dessus renverra index.html place, pour autant que je sache.
Alors, que voulez-vous faire au lieu de *?
Supprimez simplement l' app.get('*', ...); itinéraire entièrement; la première ligne de cet extrait de code devrait couvrir tout ce dont vous avez besoin, car l'application React intégrée est constituée de fichiers statiques.
Je l'ai débogué avec ce code dans server.js
app.use(express.static(path.join(__dirname, '/client/build')))
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '/client/build', 'index.html'))
})
et j'ai supprimé le dossier de construction de .gitignore dans le dossier client. Lorsque vous utilisez create react app dans le dossier de construction par défaut est dans .gitignore. N'oubliez pas de créer une nouvelle version avant le déploiement.
J'ai obtenu le même "404 Le chemin demandé n'a pas pu être trouvé" et je l'ai résolu en supprimant la construction de .gitignore
Vous devez créer l'application React localement, puis ajouter les fichiers du dossier de
builddossierpublicde votre projet express. Le dossier public est actuellement vide, c'est-à-dire qu'il n'a pas de fichier d'index, et votre application express n'a pas de/route configuré. Cela conduit à une erreur 404 pour/. Edit: Je viens de vous voir dire que vous avez fait ça, mais le dossier est vide.Salut Chris, dans github je n'ai pas encore chargé ce que j'ai chargé sur heroku, désolé pour ça. Mais, oui, le dossier public est comme vous le dites. En fait, si je travaille chez localhost, ça marche ... c'est juste heroku mon très gros problème fou, pourquoi ça ne marche pas !?
Bon, alors qu'est-ce qu'il y a exactement là-dedans? Aussi,
app.use(express.static(path.join(__dirname, 'public/index.html')));semble bizarre; ne devrait-il pas êtreapp.use(express.static(path.join(__dirname, 'public')));?tu avais raison Chris, merci!