Wordpress on nginx not loading css/js/images

Question

I have a html/jQuery website(mysite.com) with a wordpress blog(mysite.com/blog). Html site(mysite.com) is hosted on ec2 A instance(and working fine) and blog(mysite.com/blog) is hosted on ec2 B instance.

The blog(WordPress) is loading the HTML page but all the CSS/JS and images hosted on ec2 B are not loading and ending up 404. Even if I try to access the CSS in the browser, it ends up 404, although the file exists on the server.

I tried to tweak the Nginx config but couldn't able to resolve the issue. Any help would be much appreciated.

My nginx config

server {
    listen 80;
    server_name mysite.com;
    root /opt/mysite-blog;
    index index.php index.html;

    access_log      /var/log/nginx/mysite_blog-access.log;
    error_log       /var/log/nginx/mysite_blog-error.log error;

    keepalive_timeout    70;

    error_page 404 /404.html;

    error_page 500 502 503 504 /50x.html;

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

    location /blog {
        index index.php;
        try_files $uri $uri/ /index.php?q=$uri&$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass backend_php;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

     location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|svg|woff|woff2|ttf)\$ {
        expires 30d;
        proxy_cache staticcache;
        proxy_cache_valid 200 30d;
        add_header Cache-Control public;
        access_log /dev/null;
     }

     location ~* \.(?:css|js)\$ {
        expires 1d;
        add_header Cache-Control public;
        access_log /dev/null;
     }

     location ~ /\.ht {
        deny  all;
     }
}

Mansoor Kayani · Accepted Answer · 2021-02-09 09:05:01Z

1

Resolved the issue by making the following changes

    server_name mysite.com;
    root /opt/mysite;
    
    location /blog {
        index index.php;
        alias /opt/mysite-blog;
        try_files $uri $uri/ /index.php?$args;
    }

    if (!-e $request_filename) {
        rewrite ^.*$ /index.php last;
    }

answered Feb 9, 2021 at 9:05

Mansoor Kayani

214 bronze badges

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

Collectives™ on Stack Overflow

Wordpress on nginx not loading css/js/images

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related