ASP.NET MVC: returning a CDN images from controller - asp.net-mvc

Question

I know how to return an image from the MVC controller but was wondering if returning an image in the CDN from the MVC controller will defeat the purpose of using CDN for images. Will using the following code result in the web server hosting the web application downloading from the CDN and then making it available to the user for download from the web server? Is the image downloaded twice, once from CDN to webserver and then webserver to user? If so that's worse than hosting the images directly on the webserver? Or is the image downloaded only once, directly from CDN to the end user?
How do I get to return an image from an MVC controller and at the same time take advantages of the CDN?
public ActionResult Thumb(int id)
{
//process
var file = Server.MapPath(" path to image in the CDN ");
//do your stuff
return File(file, "image/jpg", Path.GetFileName(file));
}

Answer 1

In your controller action you need to perform an HTTP request to fetch the image from the remote server:
public ActionResult Thumb(int id)
{
using (var client = new WebClient())
{
byte[] image = client.DownloadData("http://cdn.foo.com/myimage.jpg");
return File(image, "image/jpg");
}
}
and then:
<img src="#Url.Action("Thumb")" alt="" />
Obviously now the image is downloaded twice. Once in the controller from the CDN and once from the client. This completely defeats the purpose of this controller action and you could directly reference the image from the CDN:
<img src="http://cdn.foo.com/myimage.jpg" alt="" />
This obviously assumes that the client has access to the CDN.
Of course if your controller action does more than just fetching an image from a CDN and streaming it to the client like for example fetching the image from a CDN and resizing it, then you should definitely take the first approach.

Answer 2

Server.MapPath is used to map the physical path of an image, it's not going to do anything for a CDN image, because it doesn't exist locally at a physical path. And no, you don't want to return a file.
Your HTML would simply reference the CDN image in an <img> tag. ie
<img src="http://mycdn.com/image" />

Answer 3

Assuming you need to do some computing to figure out the resource first, like do a lookup based on some ID, to resolve the CDN url. You should absolutely not use a web client and download the image to a byte array. If you have to download the file, it essentially becomes a volatile resource and you need to decide how to deal with it, using a circuit breaker, probably with no cache, and you need to buffer it through so that it doesn't use too much memory.
In this case, you're best resolving the url and using a redirect 301/302 depending on the use case.
public ActionResult Thumb(int id)
{
//resolve url
var file = " path to image in the CDN ";
//redirect permanent
return RedirectPermanent(file);
//OR redirect
return Redirect(file);
}

Answer 4

Don't return the the actual image from the controller. That is worse because then you download it twice (CDN -> server -> client). You don't need a Thumb action at all.
If you need to generate the link to the file on the CDN in the controller, then just add a property to the view's model for the CDN link(s) and set it in the controller.
Create the link in your controller:
public ActionController SomeAction(int id){
var model = new SomeActionViewModel();
model.CDNLink = // do some stuff to generate CDN Link and set them on the model;
return View(model);
}
Then finally set it in your view
<img src="#Model.CDNLink" alt=""/>

Answer 5

I use URL Rewrite module 2.0 outboundRules.
Change response html Img(images),Link(css),Script(js) tags url.
URL Rewrite Module 2.0 Configuration Reference : URL Rewrite Module 2 : URL Rewrite Module : The Official Microsoft IIS Site
Current response
...
<img src="/images/photo1.jpg" />
<img src="/images/photo2.jpg" />
...
Set web.config urlrewrite configuration.
<rewrite>
<outboundRules>
<rule name="cdn" preCondition="html" enabled="true">
<match filterByTags="Img, Link, Script"
pattern="^/(images|csc|js)/(.*)" />
<action type="Rewrite" value="//cdn.local/{R:1}/{R:2}" />
</rule>
<preConditions>
<preCondition name="html">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
Rewrite response
...
<img src="//cdn.local/images/photo1.jpg" />
<img src="//cdn.local/images/photo2.jpg" />
...
Hope this help.

Answer 6

CDN configurations can vary, but the most common setup is that the CDN server will act as a large distributed proxy for your server (the "origin server").
The CDN doesn't care how you deliver your content. You can tell it to proxy for content by URL, by content type, or other factors.
So your situation, assuming the content, once delivered from a controller, won't change, can be set up as follows:
Request to CDN server
CDN server requests to your controller method on the origin server
Controller method generates content
CDN caches content for subsequent requests
CDN returns content
Subsequent requests for the same content by URL are returned from CDN
The most important factor in general when returning static content is the URL structure you use.
CDN does (can) care about the response headers in terms of caching and expires, but that is best avoided if you can finesse the URL correctly to provide unique content by URL (to solve versioning issues, for example).
If you are trying to secure the content, that is also possible with CDN but generally requires CDN-specific techniques.