how to use angular and apache on same nginx with same domain

Question

TLDR: configure nginx to listen on port 80 and use

if /api, expressJS on localhost:8081
if /blog, wordpress/apache2 on localhost:8082
else angular server localhost:8080 angular and express servers working but need to configure wordpress/apache.

In detail, I have installed followings on same VPS:

angular frontend on port 8080
expressJS backend on port 8081
WordPress running on apache2 on port 8082

Currently, I'm using nginx to manipulate requests and the config is

server {
        listen 443;

        ssl      on;
        ssl_certificate         /home/user/.ssh/ssl/ssl.crt;
        ssl_certificate_key     /home/user/.ssh/ssl/ssl.key.txt;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html index.php;

        server_name _;

        location / {
                proxy_set_header        Host $host;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        X-Forwarded-Proto $scheme;
            proxy_pass          http://localhost:8080;
            proxy_read_timeout  90;
        }

        location /api {
                proxy_set_header        Host $host;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        X-Forwarded-Proto $scheme;
            proxy_pass          http://localhost:8081;
            proxy_read_timeout  90;
        }
}

Now I need to host my blog on mysite.com/blog. so I added followings to nginx config.

 location /blog {
                proxy_set_header        Host $host;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        X-Forwarded-Proto $scheme;
            proxy_pass          http://localhost:8082;
            proxy_read_timeout  90;
        }

Now when I go to example.com/blog, it redirects to example.com:8082/blog. How to configure nginx and apache together?

PS: Apache isn't required as long as wordpress works. But I like to keep nginx

PPS: I have configured nginx to forward all http requests to https://example.com/ via redirect 301

zakinster · Accepted Answer · 2019-09-26 10:14:50Z

1

You need to add an additional /at the end of the proxy_pass parameter to make it a complete URI (and not just a protocol/hostname/port combo) in order for Nginx to take care of the URL rewrite :

location /blog/ {
  ...
  proxy_pass http://localhost:8082/;
  ...
}

It will then remove the /blog prefix to the requested URL and append the remainer to the http://localhost:8082/ root URL.

From the Nginx documentation :

A request URI is passed to the server as follows:

If the proxy_pass directive is specified with a URI, then when a request is passed to the server, the part of a normalized request URI matching the location is replaced by a URI specified in the directive:

location /name/ { proxy_pass http://127.0.0.1/remote/; }

If proxy_pass is specified without a URI, the request URI is passed to the server in the same form as sent by a client when the original request is processed, or the full normalized request URI is passed when processing the changed URI:

location /some/path/ { proxy_pass http://127.0.0.1; }

Alternatively, you can force the URL rewriting manually using the rewritedirective :

location /blog/ {
  rewrite    /blog/?(.*) /$1 break;
  proxy_pass http://localhost:8082;
}

This should address your immediate issue, but if you want to get rid of Apache HTTP server and the reverse proxy directive altogether, you can take a look at PHP FastCGI to serve Wordpress/PHP directly from Nginx.

edited Sep 26, 2019 at 10:14

answered Sep 26, 2019 at 9:33

zakinster

10.7k1 gold badge45 silver badges54 bronze badges

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

6 Comments

Salitha Over a year ago

I added the / but same result. Tested on different device and incognito mode.

zakinster Over a year ago

@SalithaIndrajithPathiraja try by also adding a /at the end of the /blog location as I've done in the edited answer.

Salitha Over a year ago

No sir, still same result.

zakinster Over a year ago

@SalithaIndrajithPathiraja what is the complete URL you're trying to access ?

zakinster Over a year ago

@SalithaIndrajithPathiraja try "example.com/blog/" to see if it works at all, otherwise re-check your configuration file and ensure its correctly reloaded. If it still fails, try the manual URL rewriting alternative.

|

Collectives™ on Stack Overflow

how to use angular and apache on same nginx with same domain

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related