React App 在主 js 和 css 上给出 404

Question

我使用 "react-scripts" 构建了一个 React 应用程序。应用程序运行在我的本地开发服务器上完美运行，但是当我部署到我的实际服务器时，应用程序似乎找不到正在编译的主要 JS 和 CSS 文件。我在两者上都得到 404。

以下是可能有用的信息。服务器上的文件位于

ads/build/static/js and ads/build/static/css || respectively

我收到的 404s 在以下文件中：

https://www.example.com/ads/build/static/css/main.41938fe2.css https://www.example.com/ads/build/static/js/main.74995495.js

这是我的服务器配置方式：

const express = require('express');
const path = require('path');
const app = express();
const favicon = require('serve-favicon');

//favicon
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

app.get('/ads', function (req, res) {
app.use(express.static(path.join(__dirname, 'build/static')));
console.log(path.join(__dirname, 'build'));
res.sendFile(path.join(__dirname, '/build/index.html'));
});

app.listen(9000);

在我的 package.json 中，我还将主页参数包含为： "homepage" : "https://www.example.com/ads

更新当我运行服务器本身上的应用程序具有以下路径时： dedicated-server-host:9000/static/js/main.74995495.js 正确呈现 JS 文件

我是否缺少某些配置，路由似乎不起作用。请指教。

Answer 1

使用一些缩进，这样你会看到这样的错误：

app.get('/ads', function (req, res) {
  app.use(express.static(path.join(__dirname, 'build/static')));
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});

您正在 /ads 处理程序中设置静态路由，将在每个 GET /ads 请求上添加一个新的 express.static 路由处理程序。

这将在服务器启动时设置静态路由：

app.use(express.static(path.join(__dirname, 'build/static')));
app.get('/ads', function (req, res) {
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});

或：

app.get('/ads', function (req, res) {
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});
app.use(express.static(path.join(__dirname, 'build/static')));

但请确保路径正确 - 例如，您可能需要：

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

如果您希望问题中的 URL 起作用。

为了使它更简单，您可以只使用一个处理程序来使 express.static 同时处理 css/js 和 index.html：

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

并将您的 index.html 更改为使用：

而不是：

有时，首先正确设置路径结构可以使您的路由处理程序更容易。

React App 在主 js 和 css 上给出 404

React App giving 404 on main js and css

routing

node.js

express

reactjs

react-scripts