Я получаю ошибку 404 на локальном хосте, хотя я уже выполнил "npm run build"

Question

Я пытаюсь отправить небольшое демо, сделанное с помощью React, в производство. Я не делал демо с помощью create-реагировать на приложение, я сделал это вручную. Я использовал express.js для обслуживания приложения.

Когда я запускаю команду «SET NODE_ENV = производственный узел server.js» (я в Windows, вот почему SET), и я иду на локальный хост, я продолжаю получать GET / 404, даже если я уже сделал команду » npm run build ".

Так как я делаю это впервые, я действительно понятия не имею, что происходит.

Это мой package.json:

{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --colors",
        "serve": "webpack-dev-server --content-base build/ --color --        
                  progress",
        "start": "npm run build && npm run serve",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Pepe",
    "license": "MIT",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-eslint": "^8.2.2",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.4.0",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "css-loader": "^0.28.9",
        "eslint": "3.15.0",
        "eslint-config-airbnb": "14.1.0",
        "eslint-loader": "^1.9.0",
        "eslint-plugin-import": "2.2.0",
        "eslint-plugin-jsx-a11y": "4.0.0",
        "eslint-plugin-react": "6.10.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "html-webpack-plugin": "^2.30.1",
        "identity-obj-proxy": "^3.0.0",
        "jshint": "^2.9.6",
        "style-loader": "^0.20.2",
        "url-loader": "^0.5.8",
        "webpack": "^3.3.0",
        "webpack-dev-server": "^2.9.7"
    },
    "dependencies": {
        "bootstrap": "^4.0.0",
        "compression": "^1.7.3",
        "express": "^4.16.4",
        "mime": "^1.4.1",
        "morgan": "^1.9.1",
        "normalize.css": "^8.0.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.1.1",
        "uuid": "^3.2.1"
    },
    "standard": {
        "ignore": [
            "/build/"
        ]
    },
    "eslintConfig": {
        "extends": [
            "standard",
            "standard-jsx"
        ]
    },
    "stylelint": {
        "extends": "stylelint-config-standard"
    },
    "optionalDependencies": {
        "win-node-env": "^0.4.0"
    }
}

А вот и мой server.js:

const { createServer } = require('http');
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');

const normalizePortprocess = port => parseInt(port, 10);
const PORT = normalizePortprocess(process.env.PORT || 3000);

const app = express();
const dev = app.get('env') !== 'production';


if (!dev) {
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

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

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


if (dev) {
    app.use(morgan('dev'));
}

const server = createServer(app);

server.listen(PORT, err => {
    if(err) throw new err;

    console.log(`Server listen in ${PORT}`); 
});

Казалось бы, все работает правильно, за исключением того, что, несмотря на многократное выполнение команды "npm run build", все равно ничего не появляется

Answer 1

Вы работаете в среде разработки и обрабатываете только этот запрос GET, если !dev.

if (!dev) { // here is the problem

    // ...

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

Вместо этого либо удалите оператор if и всегда обрабатывайте этот маршрут, либо измените его на if(dev).