404 未找到 static 文件 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;
}

当我从 go 到https ://example.com我看到一个空白页和控制台中的以下错误：

But when I go to http://example.com:3000 it all works without any issues, so how can I make it work on https://example.com ?

Answer 1

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

运行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