为什么我的 React-Django 应用程序没有检测到静态文件？

Question

我创建了一个可用的 React + Django REST 项目，它在我的开发机器上运行良好。我已使用以下方法使其在我的 CentOS 7 服务器上运行。

1. 我使用 npm run build 创建了构建目录并将其复制到 Django 项目根文件夹。

2. 我在 Django 设置的 TEMPLATES 列表中添加了build 目录，以识别index.html 文件。

3. 我在STATICFILES_DIRS中添加了build/static文件夹。

4. 我在根 URLS 文件中添加了 url(r'^.*', TemplateView.as_view(template_name='index.html')), 行以捕获所有 url 模式并将索引文件加载到包含 React 应用程序的构建文件夹中。

5. 我运行manage.py collectstatic 来创建一个包含所有静态文件的staticfiles 文件夹。

6. 我将staticfiles 文件夹添加到 Nginx conf 文件中，如下所示：

   location /static/ { root /home/michel/project/staticfiles; }

7. 我已经重启了nginx服务器。

我正在使用 Django 服务器加载 index.html 文件，我希望 staticfiles 文件夹将包含加载我的 React 应用程序所需的静态文件。

但是，当我访问 www.mydomain.com 时，它会加载 index.html 文件，但不会在 <div id='root'></div> 上加载 React 应用程序。我知道这一点是因为显示了索引的页脚，但用于设置该页脚样式的 css 也不起作用。

我猜我在检测静态文件时遇到了问题。有什么解决办法吗？

编辑 这是将我的 React 应用程序链接到 index.html 文件的代码。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

附：由create-react-app 命令自动生成。

Answer 1

这可能是因为你不了解 Nginx 的 root 指令。

这个：

location /static/ {
    root /home/michel/project/staticfiles;
}

意味着如果我请求www.yourwebsite.com/static/style.css，那么 Nginx 将期望该文件位置为

/home/michel/project/staticfiles/static/style.css 不是

/home/michel/project/staticfiles/style.css