Javascript 反应&；Expressjs：后端can'；t'；服务'；静态前端

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

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

它似乎找不到前端。我已经将我的应用部署到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\u FILE\u NOT\u FOUND/p:/favicon.ico

任何帮助都将不胜感激

我的整个课程内容都在同一个repo中，所以我创建了一个新的repo，它只有这个项目的前端和后端

EDIT1:尝试使用以下命令将“static.json”添加到根文件夹

{
“根”：“构建”，
“路线”：{
“/**”：“index.html”
}
}

要让Express为您构建的静态文件（如JavaScript和CSS）提供服务，您需要在基本级别使用。除此之外，您还需要设置一个“一网打尽”的路由，为通过使用以下内容构建React应用程序而生成的

index.html

提供服务。如果您最终在React应用程序中使用带有库（如

React router dom

）的路由，这将非常必要

首先在你的

应用程序后面放一行。使用（morganSettings）

告诉express应该从后端应用程序的哪个目录提供静态文件（Images/CSS/JS）。在您的情况下，它是

build

文件夹：

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

然后，在您停止路由之后，添加以下行，以便在未命中/执行这些路由时提供

index.html

：

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

据我所知，只有在部署独立的React应用程序/SPA时才真正需要

static.json

文件。事实并非如此，因为您实际上是在部署一个为静态资产提供服务的Express应用程序

---

希望这有帮助

要让Express为您构建的静态文件（如JavaScript和CSS）提供服务，您需要在基本级别使用。除此之外，您还需要设置一个“一网打尽”的路由，为通过使用以下内容构建React应用程序而生成的

index.html

提供服务。如果您最终在React应用程序中使用带有库（如

React router dom

）的路由，这将非常必要

首先在你的

应用程序后面放一行。使用（morganSettings）

告诉express应该从后端应用程序的哪个目录提供静态文件（Images/CSS/JS）。在您的情况下，它是

build

文件夹：

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

然后，在您停止路由之后，添加以下行，以便在未命中/执行这些路由时提供

index.html

：

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

据我所知，只有在部署独立的React应用程序/SPA时才真正需要

static.json

文件。事实并非如此，因为您实际上是在部署一个为静态资产提供服务的Express应用程序

---

希望这有帮助

刚要发布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)

然后，通过编辑服务器的

包.json

（

npm-run-dev

——用于开发|

npm-start

——用于生产），您可以同时运行

server

和

client

）：

然后在

app.js

（index.js）中：

---

我正要发布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)

然后，通过编辑服务器的

包.json

（

npm-run-dev

——用于开发|

npm-start

——用于生产），您可以同时运行

server

和

client

）：

然后在

app.js

（index.js）中：

---

您应该发布一个代码尝试的最小示例。这可能就是您声明静态目录的文件。我怀疑是否有人想深入研究你的整个项目。这是一个大问题。@zfrisch确实是：/。我在根文件夹“static.json”中添加了一个文件，其中包含此内容。{“root”：“build”，“routes”：“{”/**”：“index.html”}}不起作用。我希望其他人也会遇到类似的问题，并且可以在不查看代码的情况下提供解决方案。您应该发布一个代码尝试的最小示例。这可能就是您声明静态目录的文件。我怀疑是否有人想深入研究你的整个项目。这是一个大问题。@zfrisch确实是：/。我在根文件夹“static.json”中添加了一个文件，其中包含此内容。{“root”：“build”，“routes”：“{”/**”：“index.html”}}不起作用。我希望其他人也会遇到类似的问题，并且可以提供一个解决方案，而无需查看代码。您能否将第二个代码片段修复为

__目录名，“构建”

？（添加逗号）。它不允许我编辑，因为它不超过六个字符。@Abhijit将您修复第二个代码段的命令添加到

__目录名，“构建”

？（添加逗号）。它不允许我编辑，因为它不超过六个字符@