Express ENOENT: нет такого файла или каталога, stat '/index.html'

Question

У меня проблемы с отладкой этой проблемы. В основном у меня есть Node.js, который обслуживает приложение React, а также действует как REST API. По умолчанию сервер работает на порте 8080.

import express, {Request, Response} from 'express';
import path from 'path';
import helmet from 'helmet';
import morgan from 'morgan';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import {ENVIRONMENT, PORT} from '../util/secrets';
// Import API Routes
import * as home from './controllers/home';

// Create express server
const app = express();

// Add middleware
app.use(helmet());
app.use(morgan('combined'));

// Define API routes
app.get('/api/', home.get);

// Configure environment settings
if (ENVIRONMENT === 'development') {
    // ...
} else {
    // Configure Static Files (Production)
    app.use(express.static("./"));

    // Serve React Static Files (Production)
    app.get('*', (req: Request, res: Response) => {
        res.sendFile(path.resolve(__dirname, "/index.html"));
    });
}

// Start server
app.listen(PORT, () => {
    console.log(`Express started on http://localhost:${PORT}/ in ${ENVIRONMENT} mode.`);
});

export default app;
module.exports = app;

В основном я go для localhost: 8080, и мое приложение отображается нормально. Однако , когда я go на localhost: 8080 / login Я получаю следующий ответ от сервера:

Error: ENOENT: no such file or directory, stat '/index.html'
/index.html

Вот журналы Моргана:

::ffff:172.17.0.1 - - [19/Feb/2020:03:01:18 +0000] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Windows NT 10.0; Win64
; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
::ffff:172.17.0.1 - - [19/Feb/2020:03:01:18 +0000] "GET /app.bundle.js HTTP/1.1" 304 - "http://localhost:8080/" "M
ozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
"
Error: ENOENT: no such file or directory, stat '/index.html'
/index.html
::ffff:172.17.0.1 - - [19/Feb/2020:03:01:20 +0000] "GET /login HTTP/1.1" 404 195 "-" "Mozilla/5.0 (Windows NT 10.0
; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"

Почему он отображает мое приложение на localhost:8080, а не localhost:8080/login

Dist Папка:

dist
  img
  app.bundle.js
  index.html
  server.bundle.js

Answer 1

Создайте папку сборки и скопируйте файлы сборки в эту папку

Установите папку сборки на stati c

app.use(express.static(path.join(__dirname, 'build')));

Затем

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Answer 2

webPack заменяет __dirname чем-то другим. Sine webpack предназначен для упаковки вещей, отличных от вашей типовой структуры файловой системы. Я не совсем понимаю, почему вы даже запускаете веб-пакет на серверном коде и ресурсах.

в вашем webpack.config.js добавьте следующее:

{
  target: 'node',
  node: {
    __dirname: false // disables webpack from changing what __dirname does
  },
}

Также, path.resolve() не делает то, что вы думаете, что делает. Это не совсем правильный выбор, path.join() лучше подходит.

Измените это:

path.resolve(__dirname, "/index.html")

на это:

path.join(__dirname, "/index.html")

Возможно, вы могли бы сделать он работает с path.resolve(__dirname, "index.html"), но я думаю, что path.join() является более подходящим выбором.

---

К вашему сведению, path.resolve(__dirname, "/index.html") приводит к "/index.html", что не то, что вы хотите.