ReactDOM 没有从单独的 js 文件中渲染任何东西

Question

我使用“npx create-react-app testreact”来创建一个反应项目。在我的电脑上通过浏览器进行测试时，服务器返回一个空白页面，而不是预期的单词——“Learn React”。

这里发生了什么？如何解决？

命令顺序

1. npx create-react-app testreact
2. npm 安装
3. npm 开始

环境信息
nodejs：v13.2.0
npm：6.13.1
系统：18.04.1-Ubuntu
反向代理服务器：nginx

代码信息
回购：https://github.com/nautilusshell/testreact.git
有一个名为node_modules的文件夹是由“npm install”创建的，我没有放入上面的repo，因为它太大了，不需要上传。

顺便说一句，其实我什么都没做。

错误信息
访问http://52.130.83.55/image_editing
从浏览器我得到：

status等于404的.js文件都位于http://52.130.83.55/static/js/xxx.js。这条路径是由我的 chrome 浏览器告诉的，但我通过命令搜索了我的服务器 find / -name "0.chunk.js" 2>/dev/null，才发现没有这样的文件。

例如，http://52.130.83.55/static/js/0.chunk.js 在我的服务器上的任何地方都找不到。

Nginx 配置
回购：https://github.com/nautilusshell/nginx_config.git

Answer 1

你的 nginx 配置有以下块：

location /image_editing {
   proxy_set_header Host $host;
   proxy_set_header  x-forwarded-for $remote_addr;
   proxy_set_header  X-Real-IP       $remote_addr;
   client_max_body_size 1000M;
   proxy_pass http://image_editing;
} 

这个块大概指向任何访问[hostname]/image_editing 的人都会显示你的 React 应用程序，但它不会重写路径。这意味着如果你访问localhost/image_editing，在浏览器中路径仍然是/image_editing。

任何指向资产的路径，例如 CRA 默认使用的 /static/js/bundle.js（注意前导斜杠），都不会转到 Create React App 托管的网络服务器，而是会访问 Nginx 本身。您没有配置将向/static 的请求转发到与/image_editing 相同的服务器，因此所有这些请求都会失败。

换句话说，当您访问 yourdomain/image_editing 时，您的 React 应用程序的 index.html 会被发回，声明所有资产都位于 http://yourdomain/static。这个请求命中 Nginx 并且 Nginx 正确地服务于 404，因为它不知道这些资产。您需要配置您的 React 应用程序，使其“认为”资产实际上位于 http://yourdomain/image_editing/static/。

要解决这个问题，你需要修改你项目的 webpack 配置的publicPath 属性。不幸的是，这将需要使用npm eject弹出您的 Create React App 配置。

您也可以使用子域在 Nginx 端解决此问题。例如，您可以在 image-editing.yourdomain.com 托管您的图像编辑应用程序，并且所有带有前导斜杠的 URL 都会正确解析。