React新手部署Nginx站点遇404：客户端无法访问远程服务器localhost服务

Let's break down why you're hitting that 404 and fix it step by step—this is a super common setup hiccup when combining React, Express, and Nginx, so you’re not alone!

1. Fix Your React Fetch Request First #

Your current fetch URL has two critical issues:

• It’s missing the protocol (http:// or https://), which browsers require to know how to handle the request.
• You’ve placed the port number in the path instead of after the IP (it should be 104.248.28.88:1234, not 104.248.28.88/1234).

But here’s the key: since you’re using Nginx to serve your React app and proxy API requests, you shouldn’t include the port in the fetch URL at all. Use a relative path (so it uses the same domain/port as your React app):

fetch('/api/play/rock')

Or if you want to be explicit for testing:

fetch('http://104.248.28.88/api/play/rock')

This sends the request to Nginx first, which will handle forwarding it to your Express server.

2. Configure Nginx to Proxy API Requests #

The main cause of your 404 is that Nginx doesn’t know to forward /api/* requests to your Express server running on port 1234. Here’s how to set that up:

Step 2.1: Edit Your Nginx Configuration #

Open your Nginx site config file (usually located at /etc/nginx/sites-available/your-domain.conf or /etc/nginx/nginx.conf). If you don’t have a site config yet, create one.

Add or update a server block like this:

server {
    listen 80;
    server_name 104.248.28.88 your-domain.com; # Replace with your actual domain/IP

    # Serve your React static files (from the build folder)
    root /var/www/your-react-app/build; # Replace with the path to your React build directory
    index index.html;

    # Handle React client-side routing (so page refreshes don't break)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy all /api requests to your Express server
    location /api/ {
        proxy_pass http://localhost:1234;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Step 2.2: Verify and Restart Nginx #

• First, check for syntax errors in your config:

  sudo nginx -t
  

• If you see "test is successful", restart Nginx to apply changes:

  sudo systemctl restart nginx
  

3. Confirm Your Express Server is Working #

Before testing the client, make sure your Express service is actually responding on the server. On your remote server, run:

curl http://localhost:1234/api/play/rock

If this returns the expected data from your Python script, your Express server is good to go. If not, double-check:

• The Express server is running (use a process manager like pm2 or a systemd service to keep it alive—don’t just run node server.js in a terminal).
• The script.py file is in the same directory as your Express server, and the server has permission to execute it.
• The cors middleware is correctly applied (though with Nginx proxying, you might not even need it anymore, but it won’t hurt to keep it).

4. Test the Client Request #

Reload your React app and try the fetch request again. It should no longer return a 404—Nginx will forward the /api/play/rock request to your Express server on port 1234, which runs the Python script and sends back the response.

Quick Troubleshooting Tips if It Still Fails #

• Check Nginx logs for proxy errors: sudo tail -f /var/log/nginx/error.log
• Ensure your server’s firewall allows incoming traffic on port 80 (for HTTP). You can block port 1234 from public access for extra security now that Nginx is proxying requests.
• Double-check the path to your React build folder in Nginx—if Nginx can’t find the static files, it might return a 404 for the app itself too.

内容的提问来源于stack exchange，提问作者Jonas Grønbek