NGINX issue : In response of API, getting index.html file data instead of API response from nginx

proxy_pass

An api needs a different settings compared with static web. You need to use proxy_pass. Check:

• https://stackoverflow.com/a/64250681/3957754
• https://gist.github.com/jerhon/827bd0a7d33784f0de90088f0536a373

tips

• Try locally before to implement in aws
• Use different config files instead just one file. Check:
  • https://serverfault.com/a/707963
  • https://stackoverflow.com/a/71131749/3957754
  • https://www.baeldung.com/linux/nginx-split-configuration-file#adding-files-to-the-confd-directory
• Try to use a prefix in your api real urls. Something like /api/auth. This will help you to have an easy nginx config

change your NGINX config to following:

server {
    listen 443 default_server;
    listen [::]:443 default_server;
    ssl on;

    server_name abc.global;
    root /var/www/html/build;

    # Handle API requests separately
    location /api/ {
        proxy_pass http://localhost:3000;  # Adjust this to your API server's address and port
        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;
    }

    # Serve static files and fallback to index.html for single-page apps
    location / {
        try_files $uri $uri/ /index.html;
    }

    location = /50x.html {
        alias /var/www/html/build;
    }

    error_page  404     /404.html;
    error_page  403     /403.html;

    # To allow POST on static pages
    error_page  405     =200 $uri;

    ssl_certificate /Path/abc.crt;
    ssl_certificate_key /Path/abc.key;
}

explanation:

1. The location /api/ block is designed to forward any API requests (e.g., /api/users) to your backend API server running on http://localhost:3000 (you can change this based on where your API is hosted).
2. The location / block will continue serving static files (like index.html) for non-API requests, making it suitable for single-page applications (SPAs).
3. Ensure that your API path correctly starts with /api/ or adjust the location block accordingly.If your API path is different (e.g., /v1/api or something else), you will need to adjust the location directive to match your API routes.