V8-archive: Thumbnail base URLs missing

Created on 23 Dec 2019  Â·  9Comments  Â·  Source: directus/v8-archive

Related: #636

I thought my thumbnails were broken in v8, but I think this is because I'm behind a load balancer and URL gets routed without the prefix to the server. Thumbnail URLs are "detected" and it's not possible to set them as storage.thumb_url as it doesn't exists like root and root_url. Can we please implement the prefix handling if storage.thumb_url gets set in config? Otherwise we fallback to the default behavior.

To illustrate the problem:

storage.root: /uploads/_/originals
storage.root_url: https://domain/<directus_subdir>/uploads/_/originals
storage.thumb_root: public/uploads/_/generated

This doesn't exists: storage.thumb_root_url

Upload a file x.png, this is what gets generated:

File url: https://domain/<directus_subdir>/uploads/_/originals/x.png
Thumbnail url: https://<domain>/_/assets/o5rjqv84x4gokgs0?key=directus-medium-crop

This is very important in scenarios where load balancers are used.

question api

Most helpful comment

a more detailed explanation of why this happens:

as we have load balancers as intermediate servers sitting between the user and directus, for example:

client -> load balancer -> directus

lets make some assumptions:

  • assume we have a load balancer listening to any requests made to http://mywebsite
  • assume we have a website frontend listening on machine frontend, port 80
  • assume we have directus listening on machine directus, port 80

in this setup we can set load balancer rules to forward request to different backends (frontend and directus), for example I can configure that any requests that hit the load balancer with path starting with /directus to be forwarded to http://directus/, and any other requests that doesn't fullfill that rule, to be forwarded to http://frontend/

this makes requests to http://mywebsite/directus/server/ping forward the request to http://directus/server/ping and http://mywebsite/mypage forward the request to http://frontend/mypage

in both cases the host header is carried to the target destination, so both frontend and directus understands it's part of mywebsite but in case of directus, as the path prefix rule is stripped out (/directus), it understands it's on the website root, not under /directus, thus making directus assume wrong paths as where it's serving everything from...

we can take for example wordpress or any other forum/cms, most of them all have a "public address" or "base address" that targets the public facing installation url - which is used to generate asset urls

to avoid breaking changes we can fallback to other behaviors in case those settings are persent or not

All 9 comments

@rijkvanzanten @bjgajjar — thoughts on this one?

This doesn't exists: storage.thumb_root_url

Yes, the config doesn't contain thumb_root_url as it's not a location of file. Thumbnail is returning from an endpoint.

assets is a endpoint that serves the thumbnail of given id.

The point is: the generation isn't reliable since it doesn't know about load balancer rules. Having a base_url/public_url or thumb_root_url would override the auto-detection and solve these problems.

a more detailed explanation of why this happens:

as we have load balancers as intermediate servers sitting between the user and directus, for example:

client -> load balancer -> directus

lets make some assumptions:

  • assume we have a load balancer listening to any requests made to http://mywebsite
  • assume we have a website frontend listening on machine frontend, port 80
  • assume we have directus listening on machine directus, port 80

in this setup we can set load balancer rules to forward request to different backends (frontend and directus), for example I can configure that any requests that hit the load balancer with path starting with /directus to be forwarded to http://directus/, and any other requests that doesn't fullfill that rule, to be forwarded to http://frontend/

this makes requests to http://mywebsite/directus/server/ping forward the request to http://directus/server/ping and http://mywebsite/mypage forward the request to http://frontend/mypage

in both cases the host header is carried to the target destination, so both frontend and directus understands it's part of mywebsite but in case of directus, as the path prefix rule is stripped out (/directus), it understands it's on the website root, not under /directus, thus making directus assume wrong paths as where it's serving everything from...

we can take for example wordpress or any other forum/cms, most of them all have a "public address" or "base address" that targets the public facing installation url - which is used to generate asset urls

to avoid breaking changes we can fallback to other behaviors in case those settings are persent or not

We already have root_url for this for the normal file URLs. Adding a asset_root_url for the /assets endpoint sounds like a good idea to me

Hi! I'm facing the same problem running directus (v8.6.2) on a kubernetes cluster, is this feature planned for a future release?

Also facing this issue here. Do you have plans to implement this feature?

@ni-binada. Yes, though I can't promise any timeline. If you want it sooner, feel free to open a PR!

If you're using Apache ( mine was 2.4+ ), consider adding the following re-direct rules at the end of your virtual host file(/etc/httpd/conf.d/.conf)) file, or .htaccess ( normaly /var/www/directus/.htaccess (OR .../publicublic/.htaccess) ;

ProxyPreserveHost On
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT} !-f

#So that we append /directus/ to any URL with the Directus project name - my-frontend
#RewriteRule "^/my-frontend/(.*)" "-" [R,L]
RewriteRule ^/directus$ /directus/ [R,L]
RewriteRule "^/directus/(.*)" "-" [R,L]
RewriteRule "^(.*)/(my-frontend)/(.*)" "/directus$1/$2/$3" [R,L]

In the solution above, represents what you have configured in your directus as in the config file, remember to ammend to suit your situation,

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gitlabisbetterthangithub picture gitlabisbetterthangithub  Â·  3Comments

binary-koan picture binary-koan  Â·  3Comments

Nitwel picture Nitwel  Â·  3Comments

vuhrmeister picture vuhrmeister  Â·  3Comments

chintohere picture chintohere  Â·  3Comments