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