Having trouble getting image styles to work with nginx

Posted by phreestilr on December 15, 2012 at 7:49pm

Hi guys. I'm getting my first nginx server up and running and am running into one issue. I know this question has been asked a thousand times, but I just can't get Drupal image styles to work. Following is my conf file, which I've pieced together the best I can using various advice from the interwebs. Any tips would be greatly appreciated!

server {
    server_name  mydomain.com;
    rewrite ^(.) http://www.mydomain.com$1 permanent;
}

server {
        listen 80;
        server_name www.mydomain.com;
        root /var/www/mydomain.com/html;
         include /etc/nginx/security;

        # Logging --
        access_log  /var/log/nginx/mydomain.com.access.log;
        error_log  /var/log/nginx/mydomain.com.error.log notice;

        # This matters if you use drush
        location = /backup {
                deny all;
        }

        # Very rarely should these ever be accessed outside of your lan
        location ~ .(txt|log)$ {
                allow 192.168.0.0/16;
                deny all;
        }

        location ~ ../..php$ {
                return 403;
        }

        location / {
                # This is cool because no php is touched for static content
                try_files $uri @rewrite;
        }

        location @rewrite {
                # Some modules enforce no slash (/) at the end of the URL
                # Else this rewrite block wouldn't be needed (GlobalRedirect)
                rewrite ^/(.)$ /index.php?q=$1;
        }

        location ~ .php$ {
                try_files $uri =404;
                fastcgi_pass unix:/var/run/php5-fpm/mydomain.com.socket;
                fastcgi_index index.php;
                include /etc/nginx/fastcgi_params;
                fastcgi_intercept_errors on;
        }

        # Fighting with ImageCache? This little gem is amazing.
        location ~ ^/sites/./files/imagecache/ {
                try_files $uri @rewrite;
        }
        # Catch image styles for D7 too.
        location ~ ^/sites/./files/styles/ {
                try_files $uri @rewrite;
        }

        location ~ .(?:js|css|png|jpe?g|gif|ico)$ {
                expires max;
                add_header Pragma public;
                add_header Cache-Control "public, must-revalidate, proxy-revalidate";
                log_not_found off;
        }

        include drop.conf;
}

and my drop.conf lookes like...

location = /robots.txt  { allow all; access_log off; log_not_found off; }
location = /favicon.ico { access_log off; log_not_found off; }
location ~ /.          { access_log off; log_not_found off; deny all; }
location ~ ~$           { access_log off; log_not_found off; deny all; }

Thanks!

Comments

Your config has several problems

Posted by perusio on December 19, 2012 at 10:47am

starting with the server level rewrite. But that's another battle. I suspect that your
regex for the imagecache is less specific than the generic image handling location at the end.

try a simple location ~* /imagecache/ { and see how it goes.

Also, as the user who owns

Posted by phreestilr on December 21, 2012 at 4:28am

Also, as the user who owns the sites, I tried doing a "curl [url of image to be generated with a style.jpg] > test.jpg" and it generated the correct jpg.

I've tried setting the directory permissions of everything under sites/default/files to 777 just to make sure it wasn't a permissions issue, and image styles still didn't work from a browser.

Any other ideas?

Hm, that makes sense, but

Posted by phreestilr on December 20, 2012 at 1:02am

Hm, that makes sense, but it's actually a Drupal 7 site, so I think the second location block is the one that is applicable. I tried this with no better results...

# Catch image styles for D7 too.
        location ~* /files/styles/ {
                try_files $uri @rewrite;
        }

Have you try this rule too

Posted by flocondetoile on December 21, 2012 at 5:28am

Have you try this rule too ?

# Catch image styles for D7 too.
        location ~* /files/public/styles/ {
                try_files $uri @rewrite;
        }

In my case, images were located in this folder (with module image responsive style).

Thanks, but that doesn't work

Posted by phreestilr on December 21, 2012 at 9:20pm

Thanks, but that doesn't work for me either. My image-styled images are all under sites/default/files/styles/...

It's your rule @rewrite wich

Posted by flocondetoile on December 21, 2012 at 9:51pm

It's your rule @rewrite wich have a mistake (miss the *)
Try with this

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

instead of

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

Thanks for that, but that

Posted by phreestilr on December 21, 2012 at 10:08pm

Thanks for that, but that causes a 404 not found error.

Then look at your rules

Posted by flocondetoile on December 21, 2012 at 10:23pm

Then look at your rules location ~ .php$

What's this line ?
try_files $uri =404;

You could try with this

# If a PHP file is served, this block will handle the request. This block
# works on the assumption you are using php-cgi listening on /tmp/phpcgi.socket.
# Please see the php example (usr/share/doc/nginx/exmaples/php) for more
# information about setting up PHP.
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
        location ~ .php$ {
                fastcgi_split_path_info ^(.+.php)(/.+)$;
                include fastcgi_params;
                # Intercepting errors will cause PHP errors to appear in Nginx logs
                # fastcgi_intercept_errors on;
                fastcgi_pass unix:/var/run/php-fpm.sock;
}

Adapt with your php-fpm.sock 's path, of course

Please

Posted by perusio on December 21, 2012 at 11:23pm

don't spread bad config practices. Drupal does not use PATH_INFO and besides introducing potential security holes you're overcomplicating.

As per @phreestilr the best thing is to get a debug log and track the execution:
http://nginx.org/en/docs/debugging_log.html

Perusio, I'll try that and

Posted by phreestilr on December 21, 2012 at 11:39pm

Perusio, I'll try that and let you know how it goes...

I've generated a debug log,

Posted by phreestilr on December 21, 2012 at 11:59pm

I've generated a debug log, but I have no idea what I should be looking for. Any tips?

The debug log is here: http://pastebin.com/iHzG4xAs

Thanks! Appreciate the help!

thank you for the advice. and

Posted by flocondetoile on December 22, 2012 at 8:40am

thank you for the advice. and sorry for the bad conf. At least now I (and we) know that i should not use this parameter. Learning progress.

Just posted a much shorter

Posted by phreestilr on December 23, 2012 at 4:29am

Just posted a much shorter debug log generated when trying to load just one styled image.

http://pastebin.com/iHzG4xAs

Tracing execution

Posted by perusio on December 24, 2012 at 2:22am

The find config phase finds the correct location (line 22):

2012/12/22 22:17:50 [debug] 30543#0: *1 using configuration "/files/styles/"
The try_files phase returns with a @rewrite (lines 37-38):

2012/12/22 22:17:50 [debug] 30543#0: *1 trying to use file: "/sites/default/files/styles/client_logo_thumb/public/client-logos/ford/ford.jpg" "/var/www/domain.com/html/sites/default/files/styles/client_logo_thumb/public/client-logos/ford/ford.jpg" 2012/12/22 22:17:50 [debug] 30543#0: *1 trying to use file: "@rewrite"
Fast forward to the upstream request line 167:

2012/12/22 22:18:04 [debug] 30543#0: *1 http upstream request: "/index.php?q=sites/default/files/styles/client_logo_thumb/public/client-logos/ford/ford.jpg"
A problem on line 167:

2012/12/22 22:18:04 [debug] 30543#0: *1 http fastcgi parser: 0 2012/12/22 22:18:04 [debug] 30543#0: *1 http fastcgi header: "Status: 500 Internal Server Error"

Something is broken in your PHP FCGI configuration or in the Nginx - FCGI interface. The imagecache location is well selected the problem is in your PHP FCGI config.

Wow. I figured out the

Posted by phreestilr on December 26, 2012 at 6:26am

Wow. I figured out the problem. It was so simple that I overlooked it. Since it was a new server and my first time using nginx, I figured the problem had to be something with my configuration, but that wasn't the case.

I used git to clone my project from my old server to the new one. I have .gitignore set up to ignore sites/*/files, so the files in there didn't get copied, and when Drupal tried to manipulate an image within there, the image didn't exist. It's odd to me that Drupal doesn't log a more specific error for this situation, but oh well, I finally figured it out. A quick scp of the files from my old server to the new one and everything is looking good. And uploading a new image to test styles shows that they're working.

Thanks for the help!

Hmm

Posted by perusio on December 26, 2012 at 1:37pm

If I understand correctly the problem is that imagecache (image module on D7) doesn't find an image and it generates a 500 server error. If that's it's not clear from the drupal log, then indeed there's a problem.

Of course there's always the status page: admin/reports/status with a red line concerning the file system. I agree that it should be handled more severely if the image module is used, or even when aggregation CSS/JS is enabled.

Happy New Year

Yeah, the only thing the

Posted by phreestilr on December 26, 2012 at 5:14pm

Yeah, the only thing the Drupal log shows is "Unable to generate the derived image located at ..." Very non-specific.

In my case, because the file system was perfectly writable, admin/reports/status showed no problems and CSS/JS aggregation was functioning fine. The fact that the aggregation was working was what made me dig down into Drupal's PHP functions that generate the styled images and debug exactly where it was going wrong.

Happy New Year to you too

Thanks again, but I tried

Posted by phreestilr on December 21, 2012 at 11:38pm

Thanks again, but I tried that and it still does not work.

The try_files $uri =404; line is for security. It's to prevent uploaded files with php in them from being parsed. If you're curious, there's more info here: http://library.linode.com/web-servers/nginx/php-fastcgi/ubuntu-10.04-luc...

This is really frustrating!

Try this...

Posted by jenlampton on December 24, 2013 at 6:51am

Move your carat before your tilde, like this:

    # To override the above rule, match more specifically against the image styles directory.
    location ^~ /files/styles/ {
        try_files $uri @rewrite;
    }

I was having the same problem, but it looks like nginx has rules about specificity that make the tilde before the carrot not work, but this does.

http://www.jenlampton.com | http://twitter.com/jenlampton | http://jenerationweb.com

It works in Drupal 8.4 with Media browser.

location ~* files/styles/ {
    try_files $uri /index.php?$query_string;
}

Regards,

Solution

Posted by matas.k on February 14, 2018 at 4:40pm

In my case on Drupal 7 this solves the problem:

location ~* /sites/default/files/.*.(?:css|js|ico|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|eot)$ {
    expires 1w;
    add_header ETag "";
    add_header Cache-Control "max-age=2628000, no-transform, public";
    try_files $uri $uri/ @rewrite;
}

The actual problem was the missing try_files $uri $uri/ @rewrite

Used with AdvAgg module.

I have the same problem with

Posted by yuseferi on March 2, 2018 at 6:38pm

I have the same problem with drupal 8.4 , non of the solutions worked .

I've found the official

Posted by yuseferi on March 2, 2018 at 6:45pm

I've found the official config of Nginx for Drupal. it's resolved my problem,
https://www.zhilevan.com/en/blog/nginx-config-drupal-8