CODEWITHSUNDEEP
node.jsangularnginx
Joshua Belden
Joshua Belden

Reputation: 10503

How do I setup NGINX for both Angular and Node?

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.

Upvotes: 0

Views: 199

Answers (1)

JLD
JLD

Reputation: 570

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

Upvotes: 1

Related Questions