Question

我正在制作一个简单的电话簿应用程序作为课程的练习。我有一个后端和一个前端，并且在分别运行时都可以工作。我的意思是说POST，GET和PUT可以按预期工作，并且我的前端将这些请求发送到服务器。

在我的课程中，我应该构建前端，将“ build”文件夹移动到后端文件夹的根文件夹，并使用expressjs将它们用作静态文件。我收到此消息“ GET / {} 404 139-0.212毫秒”或“ GET /index.html {} 404 149-0.231毫秒”。

似乎找不到前端。我已经将我的应用程序部署到了Heroku，后端也在那里工作，当我在开发模式下运行前端时，它可以与Heroku后端一起工作。

此外，当我尝试在Chrome中打开位于“ build / index.html”中的index.html文件时，我在控制台中收到这些错误（尽管不知道是什么意思）：

无法加载资源：net :: ERR_FILE_NOT_FOUND /P:/static/css/main.e503f880.chunk.css

无法加载资源：net :: ERR_FILE_NOT_FOUND /P:/static/js/1.17677b60.chunk.js

无法加载资源：net :: ERR_FILE_NOT_FOUND /P:/static/js/main.1cb95994.chunk.js

无法加载资源：net :: ERR_FILE_NOT_FOUND /P:/favicon.ico

任何帮助将不胜感激。

我的整个课程内容都在同一个仓库中，因此我创建了一个新的仓库，其中只有该项目的前端和后端。 https://github.com/porrasm/phonebook-repo

EDIT1：尝试以此向根文件夹添加“ static.json” { "root": "build", "routes": { "/**": "index.html" } }

Answer 1

要让Express提供构建的React静态文件（例如JavaScript和CSS），您需要在基本级别上使用static()。除此之外，您将需要设置一个“包罗万象”的路由来服务通过使用sendFile()之类的构建React应用程序而生成的index.html。如果最终在React应用程序中使用带有react-router-dom之类的库的路由，这将变得异常必要。

首先在您的app.use(morganSettings)之后放置以下行，以告诉您应该从中提供静态文件（Images / CSS / JS）的后端应用程序中的哪个目录。您的情况是build文件夹：

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

然后您的REST路由，当未命中/执行这些路由时，添加以下行以服务index.html：

app.use('*', (req, res) => res.sendFile(path.join(__dirname 'build', 'index.html')));

据我了解，只有在部署独立的React应用程序/ SPA时才真正需要static.json文件。情况并非如此，因为您实际上是在部署为静态资产提供服务的Express应用程序。

希望有帮助！

Answer 2

刚要发布Alexander撰写的内容，但此外，您的应用程序结构也很奇怪。

像这样简化结构：

├── client
|   ├── build
|   |   ├── css
|   |   |   ├── main.[contenthash:8].css
|   |   |   └── main.[contenthash:8].css.map
|   |   ├── js
|   |   |   ├── main.[hash].js
|   |   |   └── main.[hash].js.map
|   |   ├── media
|   |   |   └── [hash].[ext]
|   |   ├── favicon.ico
|   |   └── index.html
|   |
|   ├── public
|   |   ├── favicon.ico
|   |   └── index.html
|   |
|   └── src
|       ├── components
|       ├── containers
|       ├── images
|       ├── reducers
|       ├── root
|       ├── routes
|       ├── store
|       ├── styles
|       ├── tests
|       ├── types
|       ├── index.js
|       └── setupTests.js
|    
|
├── controllers
├── database
├── env
├── middlewares
├── models
├── routes
├── server
├── services
├── shared
└── app.js (index.js)

然后，您可以通过编辑服务器的server来运行client和package.json（npm run dev –用于开发|| npm start –用于生产）：

...
"scripts": {
  "start": "NODE_ENV=production node app.js",
  "server": "NODE_ENV=development nodemon app.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
},
...

然后在app.js（index.js）：

 ...required imports
 ...middlewares
 ...database
 ...shared
 ...services
 ...controllers
 ...routes


 //============================================================//
 /* PRODUCTION CONFIG */
 //============================================================//
 if (process.env.NODE_ENV === "production") {
   // Express will serve up production assets
   app.use(express.static("client/build"));

   // Express will serve up the front-end index.html file if it doesn't recognize the route
   app.get("*", (req, res) => res.sendFile(path.resolve("client", "build", "index.html")));
 }

 //============================================================//
 /* CREATE EXPRESS SERVER */
 //============================================================//
 const PORT = process.env.PORT || 3001
 app.listen(PORT);

REACT＆Expressjs：后端无法“提供”静态前端

2 个答案: