Serve static site and node app on port 80 with nginx?

Question

So now I am serving my backend app on mysite:4300 and my static site on mysite:80. This is okay but causes a few problems, one being SSL I would have to get two signed certificates, at least I think.

Another problem which is CORS, it's not a big issue my express app is configured to allow CORS, but I would like to serve it all under one origin.

Here is how my nginx config looks.

I created inside /etc/nginx/conf.d/mysite.com.conf

server {
    listen 80;

    server_name mysite.com;

    location / {
        proxy_pass http://localhost:3100;  //node js port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

So basically the above allows me to serve my nodejs app (running with forever.js) for port :3100 on port :80.

This hijacks my static site, obviously but I was wondering how I could possibly configure it to serve on mysite.com/myApp

My Question

How do I configure nginx to serve as a proxy not to mysite.com:80 but mysite.com:80/myApp so I can serve my static website on mysite.com:80?

Do I need to rethink how I am using the proxy, or is there a configuration method I can use?

PS Following this tut https://www.digitalocean.com/community/tutorials/how-to-host-multiple-node-js-applications-on-a-single-vps-with-nginx-forever-and-crontab

Maybe I need to configure DNS records, or create a subdomain?

Solution: I ended up using a subdomain, but I think it's pretty much the same concpet.

Thanks to @Peter Lyons I have this server block

server {
    listen 80;

    server_name app.mysite.com;

    location / {
        root /var/www/mySite/public_html;
        proxy_pass http://localhost:3100;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location @app {
       proxy_pass http://localhost:3100;
    }
}

It wasn't working until I added a root and location @app so now it works fine on port:80 so no more having a port number exposed in the url. Hopefully I can setup SSL for this now!

I think I am going to try and serve it like this mysite.com/myApp to test it, might be handy in the future.

PS I may also avoid using the subdomain, because it still is considered Cross origin Are AJAX calls to a sub-domain considered Cross Site Scripting?

I may want to allow my app to communicate with my site, and avoiding CORS might make it easier. That is if mysite.com/myAPP is not considered CORS either. We will see.

Answer 1

Try: proxy_pass http://localhost:3100/myApp$uri; , which I think should do what you want.

When I want nginx to serve static files, I use try_files like this:

location / {
  root /path/to/my/app/wwwroot;
  try_files $uri $uri.html $uri/index.html @app;
}

location @app {
  proxy_pass http://localhost:3100;
}