CRA应用经Nginx反向代理部署后白屏及资源加载异常求助

Let's break down what's causing your white screen and syntax errors, then fix this step by step:

Core Issue: Bundle Requests Are Returning HTML #

The Uncaught SyntaxError: Unexpected token '<' errors are a dead giveaway: when your browser tries to load JS bundle files like bundle.js or 0.chunk.js, it's actually receiving the index.html file instead of valid JavaScript. This happens because your Nginx proxy configuration is misrouting requests, and your CRA environment variables aren't aligned with the proxy setup.

First: Understand CRA's Bundle Locations #

Before diving into fixes, let's clarify where your bundles live:

• Development mode (npm start): CRA uses webpack-dev-server, which serves bundles directly from memory—it never writes physical files to a static directory on your server. This is why you can't find that folder right now; it doesn't exist until you build for production.
• Production mode (npm run build): Running this command generates a build folder in your project root, with a static subdirectory containing all compiled JS, CSS, and media assets. For production deployment, you'd serve these static files directly via Nginx instead of proxying to a dev server.

Step 1: Fix Your CRA Environment Variables #

Your .env settings have mismatched socket and path configurations. Update them to align with your Nginx proxy:

PUBLIC_URL="/rewired"
PORT=3120
WDS_SOCKET_PATH="/rewired/sockjs-node"
WDS_SOCKET_HOST="react.syntapse.co.uk"
WDS_SOCKET_PORT=80

• PUBLIC_URL should be the relative path prefix (not the full URL) since Nginx is handling the domain.
• WDS_SOCKET_PORT is set to 80 because socket requests are routed through Nginx, not directly to your dev server's port.

Step 2: Correct Nginx Proxy Configuration #

The critical mistake here is the trailing / in your proxy_pass directive for the /rewired location. This causes Nginx to strip the /rewired prefix from requests, so CRA's dev server can't find the resources it expects. Here's the fixed config:

server {
  listen 80;
  server_name react.syntapse.co.uk;

  # Handle hot reload socket connections
  location ^~ /rewired/sockjs-node/ {
    proxy_pass http://0.0.0.0:3120/sockjs-node/;
    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;
  }

  # Handle all other /rewired requests
  location ^~ /rewired {
    proxy_pass http://0.0.0.0:3120;  # No trailing slash here!
    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;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

• Removing the trailing / from proxy_pass ensures that the full request path (including /rewired) is sent to your CRA dev server, so it can match the routes and resources it's configured to serve.

Step 3: Apply Changes & Test #

1. Reload Nginx to apply the new config:

   sudo nginx -s reload
   

2. Restart your CRA dev server to pick up the updated .env variables.
3. Clear your browser's cache (or use incognito mode) and revisit https://react.syntapse.co.uk/rewired.

Your bundles should now load correctly, and the white screen should be resolved.

内容的提问来源于stack exchange，提问作者Laurence Fass