WordPress + Nginx on non-standard port behind AWS ELB results in broken links

Question

We have a Nginx listening on ports 80 and 443 and serving our main website. Let's say its name is demosite.com.

It is running on AWS EC2 instance, and traffic is coming through an ELB.

I need to deploy WordPress on the same machine so it would be part of the main site and accessible via demosite.com/blog.

There is a reason we decided to configure WordPress to serve as a Vhost on a separate port 8088 (HTTP, non-SSL).

On the ELB I've created a rule:

IF Path is /blog/
THEN
Forward to Demosite-WP-blog

The Demosite-WP-blog is target group pointing to my machine port 8088.

The WordPress Nginx vhost config:

server {
  listen 8088 default_server;
  access_log  /var/log/nginx/blog.access.log;
  error_log  /var/log/nginx/blog.error.log;
  server_name demosite.com www.demosite.com;
  root /var/www/wordpress;
  include /etc/nginx/nginx-wp-common.conf;
}

/etc/nginx/nginx-wp-common.conf :

    charset utf-8;

    location / {
      index index.php index.html;
      try_files $uri $uri/ /index.php?$args;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
      root /usr/share/nginx/html;
    }

    location ~* /(?:uploads|files)/.*\.php$ {
      deny all;
    }

    location ~ /\. {
      access_log off;
      log_not_found off;
      deny all;
    }

    location ~ \.php$ {
      try_files $uri =404;
      include /etc/nginx/fastcgi_params;
      fastcgi_read_timeout 3600s;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_pass    unix:/run/php/php7.2-fpm.sock;
      fastcgi_split_path_info ^(/blog)(/.*)$;
      fastcgi_index index.php;
    }

   # this was added later   
    location  /blog {
         root /var/www/wordpress;
         index index.php index.html index.htm;
         rewrite /wp-admin$ $scheme://$host$uri/index.php?q=$1 permanent;
         try_files $uri $uri/ @blog;
         }

    location @blog {
            rewrite ^/blog(.*) /blog/index.php?q=$1;
    }

The WordPress was initially set up as a separate site, went through the web GUI setup process, to make sure it is working, etc. I.e. I've configured a temporary subdomain name wpblog.demosite.com, set it up - it was working fine. Then I've re-configured it to be a part of the main site.
Here is a relevant part of /var/www/wordpress/wp-config.php which I've added at its top for this purpose:

define( 'WP_SITEURL', 'https://demosite.com' );
define( 'WP_HOME', 'https://demosite.com/blog' );

if ($_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https')
    $_SERVER['HTTPS'] = 'on';

if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
    $_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
}

The content path is:

/var/www/wordpress
total 204
drwxr-xr-x  5 root www-data  4096 Sep 26 23:15 .
drwxr-xr-x  8 root root      4096 Sep 26 00:47 ..
-rw-r--r--  1 root www-data   418 Sep 25  2013 index.php
-rw-r--r--  1 root www-data 19935 Jan  6  2018 license.txt
-rw-r--r--  1 root www-data  7415 Mar 18  2018 readme.html
-rw-r--r--  1 root www-data  5458 May  1 22:10 wp-activate.php
drwxr-xr-x  9 root www-data  4096 Sep 18 22:00 wp-admin
-rw-r--r--  1 root www-data   364 Dec 19  2015 wp-blog-header.php
-rw-r--r--  1 root www-data  1889 May  2 22:11 wp-comments-post.php
-rw-r-----  1 root www-data  3633 Sep 26 23:01 wp-config.php
-rw-r--r--  1 root www-data  2853 Dec 16  2015 wp-config-sample.php
drwxr-xr-x  5 root www-data  4096 Sep 26 00:26 wp-content
-rw-r--r--  1 root www-data  3669 Aug 20  2017 wp-cron.php
drwxr-xr-x 18 root www-data 12288 Sep 18 22:00 wp-includes
-rw-r--r--  1 root www-data  2422 Nov 21  2016 wp-links-opml.php
-rw-r--r--  1 root www-data  3306 Aug 22  2017 wp-load.php
-rw-r--r--  1 root www-data 37794 Jul 16 14:14 wp-login.php
-rw-r--r--  1 root www-data  8048 Jan 11  2017 wp-mail.php
-rw-r--r--  1 root www-data 16246 Oct  4  2017 wp-settings.php
-rw-r--r--  1 root www-data 30091 Apr 29 23:10 wp-signup.php
-rw-r--r--  1 root www-data  4620 Oct 23  2017 wp-trackback.php
-rw-r--r--  1 root www-data  3065 Aug 31  2016 xmlrpc.php 

Now when I try to open https://demosite.com/blog/, I get the main WordPress page is broken: no CSS, no images, default font, links are broken.

What I'm doing wrong and how can set up it working correctly?

Answer 1

Hi, I had some issues and nowhere I had found the solution, so I tried my on for like https://demosite.com/blog/ Your /var/www/wordpress/wp-config.php is good. I am sharing my NGINX config as per below

    server {
        listen 8088 default_server;

        root /var/www/html;
        index index.php;
        include /etc/nginx/mime.types;
        client_max_body_size 64M;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
               try_files $uri $uri/ =404;
       }
        location /blog {
            try_files $uri $uri/ /blog/index.php?$args;
            rewrite ^/blog/wp-json/(.*?)$ /blog/index.php?rest_route=/$1 last;
                proxy_set_header X-Real-IP  $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header Host $host;
}
        location ~ \.php$ {
            try_files $uri $uri/ /blog/index.php$is_args$args;

            fastcgi_split_path_info ^(/blog/.+\.php)(.*)$;
            fastcgi_param   SCRIPT_FILENAME         $document_root$fastcgi_script_name;
            fastcgi_param   PATH_INFO               $fastcgi_path_info;

            fastcgi_read_timeout 3600s;
            fastcgi_buffer_size 128k;
            fastcgi_buffers 4 128k;
            fastcgi_index  index.php;

            include        /etc/nginx/fastcgi_params;
            fastcgi_pass   unix:/run/php/php7.4-fpm.sock;
        }

        location ~* \.(eot|otf|ttf|woff|woff2)$ {
            add_header Access-Control-Allow-Origin *;
            }
    
    }

Also, Point the Target group in ELB to port 8088 and set CloudFront and ALB redirection from port 80 to 443 ie HTTPS. here is the target group screenshot as well attached below.

hope it will solve your issues. don't run anything on the same port else it will mess with WordPress.