How should my Nginx 'default' file in sites-available be configured for a MERN app?

Question

I'm deploying a MERN app and wondering how the 'default' configuration file in etc/nginx/sites-available should be setup for the server, client, and Mongo database to work?

I am using a Ubuntu machine on Digital Ocean. I have the server.js running with Pm2 setup and working fine. Nginx and Mongo status checks come back fine. I am just having trouble with the configuration.

Here is one configuration of default I tried.

server {
    listen 80;
    server_name 138.197.173.139;
    root /var/www/MERN_App/client/build;

    error_page 404 /index.html;

    location / {
            add_header Cache-Control no-cache;
            try_files $uri $uri/ /index.html;
    }

    location /api/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Forwarded-Host $remote_addr;
            proxy_pass http://138.197.173.139:5002;
    }
}

Of course this doesn't show any data from the Mongo database because the address localhost:27017 is nowhere in this file. Though this gives the least errors and app flashes on screen with the above configuration, but in the console of course I get errors to the effect of 'cannot read ____ of undefined.'

The other thing I tried was 'stream'. I obviously don't know where this file even goes because it doesn't seem to belong in sites-available.

stream {
        upstream stream_mongo_backend {
                server 138.197.173.139:27017;
                }

        server {
                listen 80;
                server_name 138.197.173.139;
                root /var/www/MERN_App/client/build;

                error_page 404 /index.html;

                location / {
                        add_header Cache-Control no-cache;
                        try_files $uri $uri/ /index.html;
                }

                location /api/ {
                        proxy_set_header Host $host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-Proto $scheme;
                        proxy_set_header X-Forwarded-For $remote_addr;
                        proxy_set_header X-Forwarded-Host $remote_addr;
                        proxy_pass http://138.197.173.139:5002;
                }
        }
}

This configuration will not allow me to restart nginx and the error in the log is 'stream can't go here'.
I don't know if there is some combination of a file in a new directory I have to create called 'stream' and a configuration in sites-available or something completely different.
If you have a good guide or video to setting up these files I would appreciate it because I find all of this opaque and I must be too thick for the Nginx docs.

Thank you for reading!

Answer 1

You should not edit the default server block at all. You should instead create your own server block, in a separate configuration file in sites-available.

The default shipped with nginx is meant in part as an example, and in part to catch requests which are not directed to your web site's hostname.

Speaking of which, you should be using a hostname instead of an IP address to serve your web site, for a lengthy variety of reasons.

You are not streaming audio or video, so you should not be using stream at all.

From your description it sounds like your app is having problems. You should go back to debugging your application rather than doing things with nginx that at best will have no effect at all and at worst will break your site.