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我在控制台中看到一个空白页面和以下错误：图像

但当我去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/位置不会转发到proxys/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