我正在尝试通过 express 为我的 React 应用程序提供服务，为什么我会收到 404？
[英]I'm trying to serve my react app from express, why am I getting a 404?
问题描述
I have a react app being built to my project's /dist directory, I'm trying to serve the bundle and required files via my express server, as well as connect to mongo and provide an api for some data there.
我在项目的 /dist 目录中构建了一个 React 应用程序，我正在尝试通过我的快速服务器提供捆绑包和所需文件，并连接到 mongo 并为那里的一些数据提供 api。
Right now I'm unable to get my app to load.现在我无法加载我的应用程序。 I am getting an error GET http://localhost:5000/dist/bundle.js.net::ERR_ABORTED 404 (Not Found) at localhost:5000我在 localhost:5000 收到错误GET http://localhost:5000/dist/bundle.js.net::ERR_ABORTED 404 (Not Found)
Below is my server file and the rest of the project is here下面是我的服务器文件，项目的rest在这里
server.js:服务器.js：
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const routes = require('./routes/api');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
//connect to the database
mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })
.then(() => console.log(`Database connected successfully`))
.catch(err => console.log(err));
// overide mongoose promise (depricated) with node's promise
mongoose.Promise = global.Promise;
app.use((req, res, next) => {
// TODO: should header be set on res or req?
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(bodyParser.json());
app.use('/api', routes);
app.use((err, req, res, next) => {
console.log(err);
next();
});
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../index.html'));
});
app.use('/../dist', express.static('dist'));
app.listen(port, () => {
console.log(`Server running on port ${port}`)
});
2 个解决方案
解决方案1
1 已采纳 2019-03-20 01:47:41
Got it to work. 得到它的工作。 Although I'd suggest switching over to my fullstack-mern-kit , but that's up for you to decide. 尽管我建议切换到我的fullstack-mern-kit ，但这由您决定。
Anyway, follow these steps... 无论如何，请按照以下步骤操作...
In the package.json change scripts to: 在package.json将scripts更改为：
"scripts": {
"dev": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode=production",
"start": "node ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
In your dist folder, add an index.html (you'll also need include a <link> to your compiled css stylesheet): 在dist文件夹中，添加index.html （您还需要在已编译的css样式表中包含<link> ）：
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
In your server.js file, rework it like so: 在您的server.js文件中，如下进行修改：
const express = require("express");
const app = express();
const { resolve } = require("path");
app.get("/sampleData", (req, res) => {
res.send("sample data");
});
app.use(express.static("dist"));
app.get("*", (req, res) => res.sendFile(resolve("dist", "index.html")));
app.listen(8080);
Run npm run build , then npm start , then navigate to http://localhost:8080 . 运行npm run build ，然后npm start ，然后导航到http://localhost:8080 。
解决方案2
0 2022-11-15 20:43:28
You may need to build the app first.您可能需要先构建应用程序。 Use this command and then try serving: npm run build使用此命令，然后尝试服务： npm run build
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.