How do I setup NGINX for both Angular and Node?

Question

I'm currently trying to host both an angular app and a reverse proxy to a node backend. Using Lets Encrypt, I've been able to set up the Angular app without any problems. However, I'm lost on how to configure Nginx to also act as a reverse proxy to my node app running on a specific port. I find examples of reverse proxies for nginx, but nothing that incorporates both.

Here is my config that is working with angular:

server {

    server_name example.com;

    root /var/www/example.com;
    index index.html index.htm;

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot

    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot

    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;
    return 404; # managed by Certbot
}

What I'm trying to add:

server{
    server_name api.example.com;

    location / {
        proxy_pass http://127.0.0.1:8080;
    }
}

I've tried several combinations of server blocks and location blocks, but I simply get a 404 when I go to api.example.com.

JLD · Accepted Answer · 2019-11-05 16:28:59Z

1

I usually solve that kind of issue like this. Endpoints of all back-end APIs are started with "v1". I serve the angular project using pm2.

location / {
   proxy_pass http://localhost:3000;
   ...
}
location ~ ^/(v1)/ {
   proxy_pass http://localhost:3001;
...
}

answered Nov 5, 2019 at 16:28

JLD

5702 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joshua Belden Over a year ago

Which server block would that go in?

JLD Over a year ago

right above listen [::]:443 ssl ipv6only=on; # managed by Certbot

JLD Over a year ago

or one of the best thing is to serve angular front-end using node js

Collectives™ on Stack Overflow

How do I setup NGINX for both Angular and Node?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related