NGINX代理无法正常工作求助：DigitalOcean Droplet多容器配置异常

Hey there, let's break down why your Nginx proxy might be failing and walk through fixes step by step. Based on what you've shared, here are the most common areas to check:

1. Verify Your React Container's Nginx Configuration #

This is usually the first culprit. If your Nginx inside the React container is supposed to proxy API requests to your REST API container, it can't use localhost:9090—that points to the React container itself, not your API container.

Instead, you need to use the Docker service name of your API container (from your docker-compose.yml) as the hostname. For example, if your API service is named ubgrillapi in docker-compose, your Nginx default.conf should look something like this:

server {
    listen 80;
    server_name localhost;

    # Serve React static files
    root /usr/share/nginx/html;
    index index.html;

    # Proxy API requests to the API container
    location /api/ {
        proxy_pass http://ubgrillapi:9090/;
        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;
    }

    # Catch-all for React routing
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Make sure you're using the correct service name (not the container name) and that the proxy_pass path ends with a slash if your API expects trailing slashes.

2. Check Docker Compose Service Definitions & Networking #

Your shared docker-compose.yml only includes the MySQL service—we need to confirm your API and React services are configured correctly:

• Ensure both your API and React services are in the same Docker network (Docker Compose creates a default bridge network for all services in the file, so this should be true unless you've customized networks).
• For your API service, you don't need to expose port 9090 to the host (via ports:) unless you want to test it directly from outside the Droplet. The React container can reach it via the service name without host port mapping.
• For your React service, confirm your port mapping is correct. If Nginx inside the container listens on port 80, your ports should look like:

  ports:
    - "4500:80"
  

  This maps Droplet port 4500 to the container's Nginx port 80.

3. Validate Droplet & Container Firewall Rules #

• DigitalOcean Cloud Firewall: Make sure port 4500 is allowed for incoming HTTP traffic (if you're using HTTPS, add 443 too).
• Droplet UFW Firewall: Run sudo ufw status to check if port 4500 is open. If not, add it with sudo ufw allow 4500/tcp.
• Container Internal Ports: Confirm your Nginx container is actually listening on the expected port. Run docker exec -it <react-container-name> netstat -tulpn to verify Nginx is bound to port 80 (or whatever port you're using).

4. Test Container-to-Container Communication #

To rule out network issues between containers, run this command from your Droplet to test if the React container can reach the API:

docker exec -it <react-container-name> curl http://<api-service-name>:9090/<api-health-endpoint>

If this returns an error, check:

• Is your API container running? Run docker-compose ps to confirm.
• Did you spell the API service name correctly in the curl command and Nginx config?
• Is your API listening on all interfaces inside its container (0.0.0.0:9090) instead of just localhost?

5. Check React App's API Base URL #

If your React code is hardcoding http://localhost:9090 as the API endpoint, this will fail when accessed from a browser—because localhost in the browser refers to the user's local machine, not your Droplet.

Fix this by:

• Using relative paths (e.g., /api/) for API calls, so Nginx can proxy them.
• Or setting an environment variable in your React build (e.g., REACT_APP_API_URL=/api/) that your app uses to construct API requests.

To get a more precise fix, could you share:

• The full docker-compose.yml (including your API and React services)
• The Nginx configuration file from your React container

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