404 未找到静态文件 React JS | NGINX

Question

我想让我的网站在没有端口 3000 的域上可用，我知道 React JS 和 Nginx 不能使用相同的端口，所以下面你可以看到我的 Nginx 文件的配置：

location / {
   # try_files $uri $uri.html $uri/ @extensionless-php;
     proxy_set_header Accept-Encoding "";
     proxy_pass http://localhost:3000;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
}

location /static/ {
     proxy_set_header Accept-Encoding "";
     proxy_pass http://localhost:3000;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
}

当我转到 https://example.com 时，我在控制台中看到一个空白页和以下错误： Image

但是当我转到 http://example.com:3000 时，一切正常，没有任何问题，那么我怎样才能让它在 https://example.com 上运行？

Answer 1

根据您的描述，我假设您正在使用 npm run start/yarn start 运行 react 应用程序，该应用程序适用于您的开发环境。但是，在您的服务器上运行应用程序会将其投入“生产”。

运行npm run build/yarn build 以编译和优化的格式为您提供所有源文件。您可以将它们放在您的服务器上并让它们立即由 nginx 提供服务（例如使用 try_files），而无需运行单独的服务器或将请求作为代理传递。

如果您只想将您的应用程序仅作为代理运行（例如，它是您的开发环境），您必须修复您的 nginx 配置中的路径，因为您的 /static/ 位置不会转发到代理 /static/小路。您可以通过添加proxy_pass 的路径或删除完整的第二个位置块来实现这一点——它将等同于第一个。

供您参考：

• https://create-react-app.dev/docs/production-build/
• https://blog.devgenius.io/using-nginx-to-serve-react-application-static-vs-proxy-69b85f368e6c