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?

P.S 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.

P.S 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.

score 1 · Accepted Answer · answered Sep 17 '14 at 22:47

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;
}

answered Sep 17 '14 at 22:47

Peter Lyons

142,938
30
279
274

Thanks, I am going to try this. I just setup a subdomain, but I think even with a subdomain to serve it with HTTPS I need a new certificate. With the config above would one certificate work for an app and static site? either way thanks, ill post back after trying it out. – Michael Joseph Aubry Sep 17 '14 at 23:46
Yes, you just need one certificate per hostname (unless you have a wildcard cert which you probably don't) and one IP address per certificate, but from there you can use nginx to serve static files plus however many apps you want to deploy at different URL paths. – Peter Lyons Sep 18 '14 at 00:08
Thanks, so do I just create an https block similar to the one I have for the default server? I am going with the subdomain but it looks like your answer helped the server config correctly, so I am going to go with this answer, and post my virtual host block in my question. – Michael Joseph Aubry Sep 18 '14 at 00:16
When I try it without a subdomain using mysite.com/myApp i get Cannot GET /myApp any idea why? – Michael Joseph Aubry Sep 18 '14 at 00:33
1

Because in your express code you haven't define a route for `/myApp`. If you want the express app to be unaware of the prefix, your nginx config would change to rewrite the URL to omit the prefix before proxying the request upstream to express. – Peter Lyons Sep 18 '14 at 04:45
Ah okay I did not know that. Does the route need to return anything? – Michael Joseph Aubry Sep 18 '14 at 19:09
1

Yeah, it needs to render whatever content you want to be at that URL, which in this case is probably your app's home page. – Peter Lyons Sep 18 '14 at 19:13
Ah okay of course makes sense. Thanks, currently working on some google oauth2 stuff, but I am going to try it later tonight, I bet it works well. Again thanks for all the help. – Michael Joseph Aubry Sep 18 '14 at 19:49

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

1 Answers1