How do I Run React App on Nginx with a node.js backend on AWS EC2?

Question

I am trying to run a react app with Node.js backend on the Nginx server.

Here's my server block in the nginx.conf file:

include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/folder-name/frontend/build;
        index index.html index.htm;

        location / {
                proxy_pass http://localhost:5000;
        }
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;



        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

The build folder contains the compiled react js code(using npm run build) Node.js backend is running on port 5000 using pm2/forever.

After restarting the Nginx Server, the react UI appears on the server IP but the UI is distorted. Also, I am not able to access my backend APIs on MyIP/api/endpoint.

What am i doing wrong.? This nginx configuration was built from SO and other online resources so there's a huge probabilty that it could be wrong. Please help!

Thanks in advance!

score 4 · Answer 1 · edited Oct 25 '21 at 03:56

Yes, you can host both API and static files (build files of your front-end) on the same domain or host. Below, you can find a server block for a sample API hosted on port 3000 and static HTML files at a root location being served on port 80.

server {
    listen 80;
    server_name localhost;
    location / {    
        root /var/www/html;
        index index.html;
        error_page 404 index.html;
    }
    location /api/ {    
        proxy_pass http://localhost:3000/;
    }
}

You can access the front-end at http://localhost/<blah...> and the API at http://localhost/api/<blah...> (please note how /api is handled in the URL here and the server block above). Replace localhost with your domain name.

score 4 · Answer 2 · answered May 06 '21 at 08:43

The issue is you are setting the API proxy for the root (/). The correct one should look like this:

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/folder-name/frontend/build;
        index index.html index.htm;

        location /api {
            proxy_pass http://localhost:5000;
        }

        location / {
            try_files $uri $uri/ =404;
        }
    }

If you don't have /api path in your Node.js, you will need a rewrite rule for it like this:

        location /api {
            rewrite ^/api/?(.*) /$1 break;
            proxy_pass http://localhost:5000;
            proxy_redirect     off;
            proxy_set_header   Host $host; 
        }

GlistenSTAR · Answer 3 · 2021-05-09T12:19:27.837

2

I had experience that.Please check my image file

This configuration is running successfully on aws. Your mistakes is proxy area. Please change like that.

location /api/ {
   proxy_pass http://127.0.0.1:5000/api/
}

If you want, I can HELP you.

edited May 09 '21 at 12:19

answered May 08 '21 at 21:53

GlistenSTAR

167
2
15

score 0 · Answer 4 · answered May 02 '21 at 05:38

0

What am i doing wrong.?

One issue is with your proxy_pass directive. You are missing trailing slash /

...
location / {
                proxy_pass http://localhost:5000/;
        }
...

First, try this and share your result.

answered May 02 '21 at 05:38

Gupta

8,882
4
49
59

How do I Run React App on Nginx with a node.js backend on AWS EC2?

4 Answers4