Configure Nginx to serve Wordpress or Angular app depending on route on the same EC2 under same domain name

Question

My goal is to serve a Wordpress site for my static pages for routes such as /about-us and /contact and then serve my bundled Angular application for the /login/, /signup/, and the user auth guarded routes.

I've configured nginx to serve my Wordpress site, however, when I try to access the /login/ page, where the user will be served the Angular app, I'm not able to correctly re-write the web root folder and the server response is always a default nginx 404.

How do I properly overwrite the web root folder to point to the index.html of the Angular code base? I know I've misused the root directive in the last location block below.

• Wordpress index.php location = /var/www/wordpress
• Angular index.html location = /var/www/dist/my-app

My nginx configuration:

server { listen 80 default_server; listen [::]:80 default_server; root /var/www/wordpress; index index.html index.php; server_name www.example.com example.com; if ($http_x_forwarded_proto = 'http'){ return 301 https://$host$request_uri; } ### STATIC PAGE ROUTES ### location = / { # Wordpress site log files error_log /var/log/nginx/wordpress-error.log; access_log /var/log/nginx/wordpress-access.log; try_files $uri $uri/ /index.php?$args; } # following by a bunch of other Wordpress routes ... location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; include fastcgi_params; include snippets/fastcgi-php.conf; fastcgi_pass unix:/var/run/php/php7.2-fpm.sock; } ### PORTAL ROUTES ### location = /login/ { # Portal error logs error_log /var/log/nginx/portal-error.log; access_log /var/log/nginx/portal-access.log; root /var/www/dist/my-app; try_files $uri $uri/ /index.html } # would be other Angular routes ... } 

When navigating to www.example.com/login/ with the configuration above I will get the following error in my nginx logs:

... 2019/05/07 20:42:14 [error] 3311#3311: *1280 open() "/var/www/wordpress/index.html" failed (2: No such file or directory), ... 

Answer 1

I came to the answer with the help of the following:

• The error/access logs of nginx - @wombie
• This stack overflow answer which explains the difference between the root and alias very well
• official nginx documentation

I was able to achieve my goal by updating the last location block to serve the Angular application from the /app/ route and directed nginx to index.html via alias instead of the root directive.

Updated Angular location block:

location ^~/app/ { # Portal log files error_log /var/log/nginx/portal-error.log; access_log /var/log/nginx/portal-access.log; alias /var/www/dist/may-app/; try_files $uri$args $uri$args/ /index.html =404; }