Nginx - Wordpress blog on Rails loads styles and scripts with mime type text/html

Question

I just installed a Wordpress blog under a /blog directory within a Rails app, running on Unicorn and Nginx, and my stylesheets and scripts aren't being loaded properly in the browser when I go to my domain.com/blog pages. Chrome console's giving me the following error:

• Resource interpreted as Stylesheet but transferred with MIME type text/html
• Resource interpreted as Script but transferred with MIME type text/html

Have been trying to figure this out and tried out lots of solutions here on SO, but still can't get through... seems like there needs to be something changed on my Nginx config, particularly for the blog/php location. Here's my config:

upstream unicorn {
  server unix:/tmp/unicorn.domain.sock fail_timeout=0;
}

server {
  server_name www.domain.com;
  return 301 $scheme://domain.com$request_uri;
}

server {
  listen 80 default deferred;
  server_name domain.com;
  root /home/dcs/htdocs/domain/current/public;

  access_log /home/dcs/htdocs/domain/log/access.log;
  error_log  /home/dcs/htdocs/domain/log/error.log;


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

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php-fpm.sock;

    fastcgi_index index.php;
    fastcgi_param  SCRIPT_FILENAME home/dcs/htdocs/domain/$fastcgi_script_name;
    include /etc/nginx/fastcgi_params;
  }


  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  try_files $uri/index.html $uri @unicorn;
  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://unicorn;
  }

  error_page 500 502 503 504 /500.html;
  keepalive_timeout 10;
}

Answer 1

After a ton of searching around, I finally found this solution.

Seems like the issue was that I needed to add a root to the app within "location /blog" and nest the "location ~ .php$" within /blog. Here's my Nginx config that's working now for a Wordpress blog in a Rails app using Unicorn, in case anyone else needs it:

upstream unicorn {
  server unix:/tmp/unicorn.domain.sock fail_timeout=0;
}

server {
  server_name www.domain.com;
  return 301 $scheme://domain.com$request_uri;
}

server {
  listen 80 default deferred;
  server_name domain.com;
  root /home/dcs/htdocs/domain/current/public;

  access_log /home/dcs/htdocs/domain/log/access.log;
  error_log  /home/dcs/htdocs/domain/log/error.log;

  location /blog {
    root /home/dcs/htdocs/domain;
    index index.php;

    location ~ \.php$ {
      fastcgi_split_path_info ^(.+\.php)(/.+)$;
      fastcgi_pass unix:/var/run/php-fpm.sock;

      fastcgi_index index.php;
      fastcgi_param  SCRIPT_FILENAME home/dcs/htdocs/domain/$fastcgi_script_name;
      include /etc/nginx/fastcgi_params;
    }
  }

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  try_files $uri/index.html $uri @unicorn;
  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://unicorn;
  }

  error_page 500 502 503 504 /500.html;
  keepalive_timeout 10;
}

Answer 2

Ensure you have a types directive defined in your nginx config.

Syntax:     types { ... }
Default:    

types {
    text/html  html;
    image/gif  gif;
    image/jpeg jpg;
}

Context:    http, server, location

Maps file name extensions to MIME types of responses. Extensions are case-insensitive. Several extensions can be mapped to one type, for example:

types {
    text/css                     css;
    application/javascript       js;
    application/json             json;
}

Source: http://nginx.org/en/docs/http/ngx_http_core_module.html#types