I'm moving over to Umbraco 9 and have come across an issue with regard to using a CDN with Azure Storage for Media and Cache. Basically image cropping no longer works.
My Set Up.
I have a single azure storage account that contains the media and cache folders for several sites. On top of this is the standard Azure CDN configured via the azure storage node. e.g. Standard set up.
So the storage path is effectively sitename/media and sitename/cache as opposed to sitename-media and sitename-cache for the existing V8 sites I host.
Found a post that suggested adding the folder name media to it. So I changed the URL to https://cdnallsitemedia.azureedge.net/sitename/media and low and behold I started to get images on my site and the back office media section worked as expected.
However on further testing I discovered that the image cropping was no longer working.
To narrow it down I removed the CDN aspect of the set up and all images worked and all cropping worked as expected.
Therefore, there is something wrong with the CDN configuration aspect combined with image cropping.
Help greatly appreciated as I'd like to go live with CDN support for all the sites I'm currently upgrading.
I should note that although the storage path is different in V8 this single storage account and single CDN approach has worked very well for several months now and would have thought V9 would still support this going forward.
I have not no - sorry. Still waiting on someone jumping in.
My gut is that you used to be able to set the Host of the blob storage in the security.config of imageprocessor.
e.g. setting key="Host" value="https://???????.blob.core.windows.net/"/>
This I think meant that you did not have to set the origin of the storage CDN to the web app service and thus the single CDN endpoint could be shared across several web app services because the CDN origin was the address https://??????.blob.core.windows.net/
Might be wrong? If I am not then not certain as to why this feature/support was removed. It was working very well and meant cost was reduced and configuration simplified. I'd like it reinstated because I really don't want to have to set up a separate CDN endpoint for every web app service. These are small sites.
But there's something off with how it's working entirely.
In the old package the user was sent to a local path /media/xxxx which then generated the image in cache and redirected to the CDN.
In this new package media url is immediately changed to xxxx.azureedge.net/xxxx/media/ and because of that the image will not be processed by the imageprocessor, cached or cropped when loading.
I've been puzzling with the CDN and media and blob storage and the way I understand it, to get the cdn and image cropping to work, you need to set the origin of your cdn to the application and not straight onto the blob storage.
The application recognises the path /media, reads the image from blob storage, crops the image, stores the image in the blob storage cache and then streams the image to the cdn
The cdn streams the image to you
The next request gets the image immediately from the cdn.
This is the equivalent of setting StreamCachedImages to true in imageprocessor. You'll no longer be redirected and get the image straight from the application.
Thanks for getting back to me on this. Great info provided.
Unfortunately this seems to suggest that for every site you host, a separate CDN with origin pointing to the sites app service would need to be set up.
This means for smaller sites we can no longer share a single CDN which keeps both the cost and set up time down.
Really wish it had not been changed - it was a great feature before this.
I'm thinking a change request to allow you to provide the origin url of the storage account so that in between your points 1 and 2 it uses the storage account url, not the applications url.
Dennis is completely right, Umbraco 9+ (actually more specifically ImageSharp) only supports a 'pull' style CDN setup.
Previously, the generated media URLs were still hitting your local application first, it then checked whether the file already exists in your storage account, created/pushed it if not and then redirected you to the final CDN endpoint. This negates a lot of the benefits of using a CDN: your application still needs to process the incoming requests and users can't directly connect to the CDN endpoint...
Most CDNs (at least Azure CDN) calculate pricing based on used bandwidth, so having a single account per site shouldn't differ much in price and would actually make the initial setup a lot easier (same for Azure Blob Storage).
Right now we have a single CDN. When deploying a site to Azure we create a media and cache container/folder on the storage account following our naming conventions, plug in the same storage and CDN config to each site and hey presto.
Having to create a separate CDN for each is not easier - it represents more work. We also have to manage the removal of any CDN's for sites that are deleted/removed from this environment. Seems overkill for small scale sites.
Anyway - doesn't sound like this support will be possible going forward so will have to change how things are done I guess.
So I am still having issues with the CDN and image cropping not working. Upgraded to version 10 Umbraco and I am using version 10 of Umbraco.StorageProviders.AzureBlob package.
Images returned in both front and back end but no cropping or resizing is happening.
When viewing the page source I can see all the image paths are in this format 'https://sitename-cdn.azureedge.net/media/s3ooj5en/night.jpg?width=300&height=220&rnd=132955395960330000'
Help Info
I've been searching on the our.umbraco help stuff for v10 and as far as I can see there are no articles anymore to describe how to set this up - I was sure there were for older versions of Umbraco - Is this no longer officially supported by Umbraco with regard to recommended Azure set up?
Have I missed a library? Are the settings correct? Umbraco Cloud still supports CDN so hopefully non cloud installations will also?
Image Crop not working with CDN
Hi,
I'm moving over to Umbraco 9 and have come across an issue with regard to using a CDN with Azure Storage for Media and Cache. Basically image cropping no longer works.
My Set Up.
I have a single azure storage account that contains the media and cache folders for several sites. On top of this is the standard Azure CDN configured via the azure storage node. e.g. Standard set up.
So the storage path is effectively sitename/media and sitename/cache as opposed to sitename-media and sitename-cache for the existing V8 sites I host.
Configuration is:
UMBRACOSTORAGEAZUREBLOBMEDIACONNECTIONSTRING = "standard storage access key"
UMBRACOSTORAGEAZUREBLOBMEDIACONTAINERNAME = "sitename"
UMBRACOSTORAGEAZUREBLOBMEDIACDN__URL = "https://cdnallsitemedia.azureedge.net/"
So the first thing to note is that the container name is not appended automatically to the CDN URL. It really should be in my opinion.
After amending the URL to https://cdnallsitemedia.azureedge.net/sitename/ it still did not work.
Found a post that suggested adding the folder name media to it. So I changed the URL to https://cdnallsitemedia.azureedge.net/sitename/media and low and behold I started to get images on my site and the back office media section worked as expected.
However on further testing I discovered that the image cropping was no longer working.
To narrow it down I removed the CDN aspect of the set up and all images worked and all cropping worked as expected.
Therefore, there is something wrong with the CDN configuration aspect combined with image cropping.
Help greatly appreciated as I'd like to go live with CDN support for all the sites I'm currently upgrading.
I should note that although the storage path is different in V8 this single storage account and single CDN approach has worked very well for several months now and would have thought V9 would still support this going forward.
Many thanks,
Rob
Did you find a solution Robert? I am having the same problem with my latest upgrade to 9.5.0 - everything works until I enable the CDN.
Hi there,
I have not no - sorry. Still waiting on someone jumping in.
My gut is that you used to be able to set the Host of the blob storage in the security.config of imageprocessor.
e.g. setting key="Host" value="https://???????.blob.core.windows.net/"/>
This I think meant that you did not have to set the origin of the storage CDN to the web app service and thus the single CDN endpoint could be shared across several web app services because the CDN origin was the address https://??????.blob.core.windows.net/
Might be wrong? If I am not then not certain as to why this feature/support was removed. It was working very well and meant cost was reduced and configuration simplified. I'd like it reinstated because I really don't want to have to set up a separate CDN endpoint for every web app service. These are small sites.
You got any further with it?
Thanks for your update.
I have not gotten any further.
But there's something off with how it's working entirely.
In the old package the user was sent to a local path /media/xxxx which then generated the image in cache and redirected to the CDN.
In this new package media url is immediately changed to xxxx.azureedge.net/xxxx/media/ and because of that the image will not be processed by the imageprocessor, cached or cropped when loading.
Hi Robert,
I've been puzzling with the CDN and media and blob storage and the way I understand it, to get the cdn and image cropping to work, you need to set the origin of your cdn to the application and not straight onto the blob storage.
Then the generated urls for media items should come out like so:
https://yourcdndomain.com/media/xxxx/my_image.jpg.Here's what happens:
This is the equivalent of setting
StreamCachedImagesto true in imageprocessor. You'll no longer be redirected and get the image straight from the application.Dennis,
Thanks for getting back to me on this. Great info provided.
Unfortunately this seems to suggest that for every site you host, a separate CDN with origin pointing to the sites app service would need to be set up.
This means for smaller sites we can no longer share a single CDN which keeps both the cost and set up time down.
Really wish it had not been changed - it was a great feature before this.
I'm thinking a change request to allow you to provide the origin url of the storage account so that in between your points 1 and 2 it uses the storage account url, not the applications url.
Thanks,
Rob
Dennis is completely right, Umbraco 9+ (actually more specifically ImageSharp) only supports a 'pull' style CDN setup.
Previously, the generated media URLs were still hitting your local application first, it then checked whether the file already exists in your storage account, created/pushed it if not and then redirected you to the final CDN endpoint. This negates a lot of the benefits of using a CDN: your application still needs to process the incoming requests and users can't directly connect to the CDN endpoint...
Most CDNs (at least Azure CDN) calculate pricing based on used bandwidth, so having a single account per site shouldn't differ much in price and would actually make the initial setup a lot easier (same for Azure Blob Storage).
Thanks for the response Ronald.
Right now we have a single CDN. When deploying a site to Azure we create a media and cache container/folder on the storage account following our naming conventions, plug in the same storage and CDN config to each site and hey presto.
Having to create a separate CDN for each is not easier - it represents more work. We also have to manage the removal of any CDN's for sites that are deleted/removed from this environment. Seems overkill for small scale sites.
Anyway - doesn't sound like this support will be possible going forward so will have to change how things are done I guess.
Cheers
Rob
Hi,
So I am still having issues with the CDN and image cropping not working. Upgraded to version 10 Umbraco and I am using version 10 of Umbraco.StorageProviders.AzureBlob package.
Settings and code.
CDN
Microsoft CDN Classic in Azure.
URL: https://sitename-CDN.azureedge.net Origin: Set to Web App and associated web application in Azure.
Code in startup.cs
Site Config Setting
UMBRACOSTORAGEAZUREBLOBMEDIACDN__URL = "https://sitename-CDN.azureedge.net/media/"
Result
Images returned in both front and back end but no cropping or resizing is happening.
When viewing the page source I can see all the image paths are in this format 'https://sitename-cdn.azureedge.net/media/s3ooj5en/night.jpg?width=300&height=220&rnd=132955395960330000'
Help Info
I've been searching on the our.umbraco help stuff for v10 and as far as I can see there are no articles anymore to describe how to set this up - I was sure there were for older versions of Umbraco - Is this no longer officially supported by Umbraco with regard to recommended Azure set up?
Have I missed a library? Are the settings correct? Umbraco Cloud still supports CDN so hopefully non cloud installations will also?
Help greatly appreciated.
Rob
Finally got this to work after stumbling across a side comment on another post.
If you follow the above set up in my previous post but make sure when you create your CDN that you set the correct cache setting on the CDN endpoint.
Cache every unique URL is the correct setting. After making this change and waiting 5 minutes, the image cropping etc started working as it should.
Hope this helps someone.
Rob
is working on a reply...