nginx reverse proxy all path to an express angular nodejs app

Question

I'm developing an app using express nodjs as backend for an API and developing the frontend with angular7.

I am ready to deploy (copy) all *js, *html from the angular app build to a public/path in the express app

I use nginx as a reverse proxy to my backend app with a basic configuration

#default.conf
server {
    listen       80;
    server_name  localhost;
location / {
    proxy_pass http://localhost:3000;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

This configuration works fine when the user hits the URL directly. The angular app is running fine all the ratings works
http://example.com/

But when the user try to reach a URL directly from the browser, it fails. I get the 404 not found page from nginx is not proxying pass to the backend server
http://example.com/my/direct/url

I understand nginx is trying to reach a file or path but it does not exist because an SPA angular app inside of nodejs express app.

My architecture looks like this

user        ——>         nginx          ————>                 express app* 
(http://example.com) -> (proxy_pass http:localhost:3000/) -> (“/public/(angular app)“ and  “/api/”)

How can I tell to nginx all path should be pass to my nodejs express app?

Sorry for my bad English

score 0 · Answer 1 · answered Aug 19 '19 at 02:36

There is some confusion in your question between http://localhost and http://example. Can you try this configuration ? should work without issues.

server {
        listen                  80 default_server;
        server_name             _;
        location / {
            proxy_pass http://localhost:3000;
            proxy_redirect          off;
            proxy_set_header        Host            $host;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

You can hit url of this form:

http://localhost/my/direct/url
http://<SERVER_IP>/my/direct/url

nginx reverse proxy all path to an express angular nodejs app

1 Answers1