ELB transferring to wordpress with Nginx on EC2 shows 404 - amazon-web-services

Question

※ I'm using example.com as example
I'm developing an app with ELB and EC2.
The structure is as followed.
When an user access to /manage/*, ELB will transfer to wordpress hosted instance.
Here is the ELB setting.
About ELB it works, but after transfered to wordpress side, CSS and JS files' response show 404.
When I access to /magazine/* URL, loading animation of wordpress theme starts to work but get stuck because of not loaded css and js.
I'm guessing it's because of nginx configuration but can't solve it.
This is the content of configuration file. I just add /etc/nginx/conf.d/vhosts.conf and write some settings. I don't touch other files.
# vhosts.conf
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
server {
listen 443;
server_name example.com;
root /var/www/html;
location /magazine {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
}
}
below /var/www/html, project's structure is as followed.
/wp-content
/wp-admin
/wp-include
index.php
wp-config.php
for other information,
I installed php-fpm.
SSL certification is set up with ACM and Route53
Additional Info
Both siteurl and home in DB table wp_options are set to https://example.com/magazine.
Result
made /var/www/html/magazine directory and move all files into it.
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
server {
listen 443;
server_name example.com;
location ~* /(wp-config|xmlrpc)\.php {
deny all;
}
location #magazine {
rewrite ^/magazine(.*) /magazine/index.php?$args;
}
location ^~ /magazine {
root /var/www/html;
index index.php index.html index.htm;
try_files $uri $uri/ #magazine;
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
include fastcgi_params;
}
}
}

Answer 1

Since you are not serving wordpress from the root of your url, you must tell wordpress to load the assets from the subdirectory. How you can do this, is described in a wordpress support article. [1]
Did you check whether the WP_HOME and WP_SITEURL variables are set correctly?
Could you edit your question and include the URL your browser tries to load for the css and js files since it is not fully visible in the screenshot?
Edit:
Thanks to the additional information we know that wordpress constructs the path as expected. So, now I share your opinion that nginx is causing the issue.
I looked around and noticed two possible issues with the nginx configuration:
The root statement should probably be inside the location block. I do not know if this is really necessary, but many people do it. [2]
The location block does a prefix match and includes the prefix magazine into the $uri variable as stated in a serverfault thread. [3]
You could strip away the prefix by using a regex as follows:
location ~ ^/magazine(.*) {
root /var/www/html;
try_files $1 $1/ /index.php?$args;
}
Note: I do not know if the directory redirect $1 and default redirect to /index.php?$args make sense for serving js/css assets. You should probably remove them if they are not necessary.
References
[1] https://wordpress.org/support/article/changing-the-site-url/#changing-the-site-url
[2] https://serverfault.com/a/258540/531099
[3] https://serverfault.com/a/455853/531099