1

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),
...
  • /login != /login/ – womble May 8 at 2:48
  • @womble Thank you for pointing that out. I should have been more clear. The /login/ route does have a trailing slash. I've updated the question above. – Joe May 8 at 12:34
  • The answer, then, will be in the nginx debug logs. – womble May 8 at 22:36
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.