J'ai fait un projet React avec create-react-app avec Node.js comme backend. Im servant les fichiers statiques avec Node.js.

J'ai essayé de le comprendre quelques heures. Lorsque je lance dans le docker et que je pousse l'application sur Heroku, j'obtiens parfois cette erreur: Erreur: ENOENT: aucun fichier ou répertoire de ce type, stat '/usr/src/app/server/build/index.html'

C'est étrange ? Si je clique, tout fonctionne. Soudain, ça ne marche pas et ça me dit qu'il ne trouve pas le index.html?

Et si je reviens sur la page et que je clique à nouveau, tout fonctionne. Pourquoi cela arrive-t-il?

Mon code pour servir les fichiers statiques dans le fichier node.js server.js:

// Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use("/", express.static("build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "build", "index.html"));
  });
}

Ma structure de dossiers:

Folder structure

Et mes routeurs de réaction:

import Homepage from "./pages/Homepage";
import Dashboard from "./pages/Dashboard";
import Leaderboard from "./pages/Leaderboard";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import About from "./pages/About";
import Quiz from "./pages/Quiz";
import Locked from "./containers/Locked";

import WebSocketService from "./services/WebSocketService";

// Add the redux.dispatch function to WebSocketService
WebSocketService.setDispatch(store.dispatch);

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/signup" component={Signup} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/about" component={About} />
        {/* Locked */}
        <Locked>
          <Route exact path="/leaderboard" component={Leaderboard} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/play/:quizId" component={Quiz} />
        </Locked>
        {/* 404 */}
        <Redirect to="/" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

En mode développement, tout fonctionne correctement, mais en production, je reçois ces problèmes. Lorsque j'actualise la page en mode développement, je suis toujours sur la page. Si je rafraîchis en mode production, j'obtiens également la même erreur: Erreur: ENOENT: aucun fichier ou répertoire de ce type, stat '/usr/src/app/server/build/index.html'

Puis-je faire quelques ajustements pour l'éviter? Merci pour l'aide!

0
user9883549 20 nov. 2018 à 12:08

3 réponses

Meilleure réponse

J'ai résolu le problème.

Nouveau code pour servir les fichiers statiques.

// Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use(express.static(path.join(__dirname, '../build')));

  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build', 'index.html'));
  });
}
0
user9883549user9883549 20 nov. 2018 à 15:07

Ma supposition sauvage est que app.use("/", express.static("build")); ne fonctionne pas comme prévu. Essayez plutôt de faire cela:

const clientDir = path.resolve(__dirname, 'build')
app.use(express.static(clientDir))

Mais c'est difficile à deviner. J'utilise ce qui précède sans aucun problème. Cela peut ne pas s'appliquer à votre cas d'utilisation. Bonne chance.

0
marhaupe 20 nov. 2018 à 13:21

Je ne l'ai pas testé mais vous diffusez des fichiers statiques à partir du dossier build et le app.get sert le index.html à partir de ce dossier. Alors essayez:

if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use("/", express.static("build"));
}

C'est au moins la partie expresse. Mais im usure comment le routeur de réaction s'inscrit dans l'image.

0
Otard95 20 nov. 2018 à 10:00