反应与Express.js:后端无法“提供"静态前端 [英] REACT & Expressjs: Backend can't 'serve' static frontend
问题描述
我正在制作一个简单的电话簿应用程序作为课程的练习.我有一个后端和一个前端，并且当分别运行时，它们都可以工作.我的意思是说POST，GET和PUT可以按预期工作，并且我的前端将这些请求发送到服务器.
I am making a simple phonebook app as an excercise for a course. I have a backend and a frontend and both work when run separately. By this I mean that POST, GET and PUT work as intended and my frontend sends these requests to the server.
在我的课程中，我应该构建前端，将"build"文件夹移动到后端文件夹的根文件夹，并使用expressjs将它们用作静态文件.我收到此消息"GET/{} 404 139-0.212毫秒"或"GET/index.html {} 404 149-0.231毫秒".
In my course I'm supposed to build the frontends, move the 'build' folder to the root folder of the backend folder and use expressjs to serve them as static files. I get this message 'GET / {} 404 139 - 0.212 ms' or 'GET /index.html {} 404 149 - 0.231 ms'.
似乎找不到前端.我已经将我的应用程序部署到了Heroku，后端也在那里工作，当我以开发人员模式运行前端时，它就可以与Heroku后端一起工作.
It seems that it can't find the frontend. I've deployed my app to Heroku and the backend works there as well and when I run my frontend in dev mode it works with the Heroku backend.
此外，当我尝试在Chrome中打开位于"build/index.html"中的index.html文件时，也会在控制台中收到这些错误(虽然不知道是什么意思):
Also when I try to open the index.html file located in 'build/index.html' in Chrome I get these errors in the console (dont't know if means anything though):
无法加载资源:net :: ERR_FILE_NOT_FOUND/P:/static/css/main.e503f880.chunk.css
Failed to load resource: net::ERR_FILE_NOT_FOUND /P:/static/css/main.e503f880.chunk.css
无法加载资源:net :: ERR_FILE_NOT_FOUND/P:/static/js/1.17677b60.chunk.js
Failed to load resource: net::ERR_FILE_NOT_FOUND /P:/static/js/1.17677b60.chunk.js
无法加载资源:net :: ERR_FILE_NOT_FOUND/P:/static/js/main.1cb95994.chunk.js
Failed to load resource: net::ERR_FILE_NOT_FOUND /P:/static/js/main.1cb95994.chunk.js
无法加载资源:net :: ERR_FILE_NOT_FOUND/P:/favicon.ico
Failed to load resource: net::ERR_FILE_NOT_FOUND /P:/favicon.ico
任何帮助将不胜感激.
我的整个课程内容都在同一个仓库中，所以我创建了一个新仓库，其中只有该项目的前端和后端. https://github.com/porrasm/phonebook-repo
My entire course content is in the same repo so I created a new repo which only has the frontend and the backend for this project. https://github.com/porrasm/phonebook-repo
尝试使用此命令将"static.json"添加到根文件夹
{
"root": "build",
"routes": {
"/**": "index.html"
}
}
Tried adding 'static.json' to root folder with this
{
"root": "build",
"routes": {
"/**": "index.html"
}
}
推荐答案
要让Express提供构建的React静态文件(例如JavaScript和CSS)，您需要在基本级别上使用
To have Express serve your built React static files such as the JavaScript and CSS, you need to at a basic level use static(). In addition to that you will want to set up a "catch-all" route to serve the index.html generated by building the React application using something like sendFile(). This will become exceptionally necessary if you end up using routing within your React application with a library such as react-router-dom.
首先在您的app.use(morganSettings)之后放置以下行，以告诉表达应该从中提供静态文件(Images/CSS/JS)的后端应用程序中的哪个目录.您的情况是build文件夹:
First put the following line after your app.use(morganSettings) to tell express which directory in your backend application the static files (Images/CSS/JS) should be served from. In your case it is the build folder:
app.use(express.static(path.join(__dirname, 'build')));
然后 您的REST路由，当未命中/执行这些路由时，添加以下行以服务index.html:
Then after you REST routes, add the following line to serve index.html when those routes are not hit/executed:
app.use('*', (req, res) => res.sendFile(path.join(__dirname 'build', 'index.html')));
据我了解，只有在部署独立的React应用程序/SPA时才真正需要static.json文件.情况并非如此，因为您实际上是在部署为静态资产提供服务的Express应用程序.
From what I understand, the static.json file is only really needed if you were deploying a standalone React application/SPA. This is not the case as you are really deploying an Express application that is serving the static assets.
希望有帮助！
这篇关于反应与Express.js:后端无法“提供"静态前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
