Home > database >  htaccess rewrite rule for images to be served in webp from CDN
htaccess rewrite rule for images to be served in webp from CDN

Time:09-22

Am serving my images from S3 bucket which has cname "cdn"

I uploaded webp copy of my images and trying to rewrite the path with htaccess

currently all my images are under the subdomain cdn.mydomain.com

    <IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_HOST} ^cdn.mydomain.com$/wp-content/uploads-webpc/$1.jpg.webp -f
RewriteRule wp-content/uploads/(. )\.jpg$ wp-content/uploads-webpc/$1.jpg.webp [T=image/w
ebp]
</IfModule>

CodePudding user response:

my images from S3 bucket which has cname "cdn"

If by this you mean you have a DNS CNAME cdn that is pointing directly at your Amazon S3 bucket then this method is unlikely to work since S3 is simply a static storage solution and does not provide such features as Apache/.htaccess AFAIK.

See here: Amazon S3 and .htaccess

The remainder of my answer is assuming the cdn CNAME is pointing at your application/Apache server (where the .webp images are also located/duplicated if you want to check the existence of these files before proxying the request) and you are later proxying the request to your Amazon S3 bucket, although this somewhat defeats the point in having a CDN in the first place.

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_HOST} ^cdn.mydomain.com$/wp-content/uploads-webpc/$1.jpg.webp -f
RewriteRule wp-content/uploads/(. )\.jpg$ wp-content/uploads-webpc/$1.jpg.webp [T=image/webp]

The second condition that is supposedly checking against the HTTP Host header is entirely invalid and you would expect to generate a 500 Internal Server Error response (due to "bad flag delimiters"). The Host header contains the hostname only, eg. cdn.mydomain.com, not the URL-path (although the regex would also be invalid). And to check the existence of the target file you need another/separate condition. (If the CNAME was pointing directly at the S3 bucket then this check is arguably superfluous anyway since aren't all requests received to this same hostname?)

You are also missing the start-of-string anchor (ie. ^) on the RewriteRule pattern, so this creates a many to one rewrite (potentially a duplicate content issue) as it will rewrite /wp-content/uploads/image.jpg and /foo/wp-content/uploads/image.jpg to the same target URL, namely wp-content/uploads-webpc/image.jpg.webp.

You are missing the L (last) flag on the RewriteRule. An issue if you have other directives.

You could also capture more elements of the requested URL-path to save repetition in the substitution string.

Assuming you are intending to rewrite the request from /wp-content/uploads/image.jpg to /wp-content/uploads-webpc/image.jpg.webp then try the following instead, bringing the above points together:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_HOST} ^cdn\.mydomain\.com$
RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.jpg.webp -f
RewriteRule ^(wp-content/uploads)/([^./] \.jpg)$ $1-webpc/$2.webp [T=image/webp,L]

Note that the $1 backreference simply captures the wp-content/uploads part of the requested URL-path, so save repeitition. And the $2 backreference now captures the .jpg file extension as well.

  • Related