ASP.NET MVC: Returning CDN Images from a Controller

Question

I know how to return an image from the MVC, but I wondered if returning the image to the CDN from the MVC would lead to the use of CDN for images. Will using the following code cause the web server on which the web application is loaded to be loaded from the CDN and then make it available to the user to download from the web server? Is the image uploaded twice, once from the CDN to the web server, and then the web server to the user? If this is worse than posting images directly to a web server? Or is the image downloaded only once, directly from the CDN to the end user?

How do I get an image from an MVC and take advantage of CDN at the same time?

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 the action of your controller, you need to execute an HTTP request to retrieve 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, the image is being downloaded twice. Once in the controller from the CDN and once from the client. This completely violates the purpose of this controller action, and you can 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’s action is more than just extracting the image from the CDN and transferring it to the client, for example, extracting the image from the CDN and resizing it, you should definitely take the first approach.

Answer 2

Server.MapPath is used to map the physical path of the image; it is not going to do anything for the CDN image because it does not exist locally on the physical path. And no, you do not want to return the file.

Your HTML will simply reference the CDN image in the <img> . i.e

 <img src="http://mycdn.com/image" /> 

Answer 3

Do not return the actual image from the controller. This is worse because you download it twice (CDN -> server -> client). You don't need a Thumb action at all.

If you need to create a link to a CDN file in the controller, just add the property to the CDN link view model and set it in the controller.

Create a link in the 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 install it in your view

 <img src="@Model.CDNLink" alt=""/> 

Answer 4

I am using the Rewrite 2.0 outboundRules URL. Edit html response Img (images), link url (css), Script (js).

Module 2.0 rewrite URL. Configuration Link: Rewrite Module 2 URL: URL Rewrite Module: Microsoft IIS Official Website

Current answer

 ... <img src="/images/photo1.jpg" /> <img src="/images/photo2.jpg" /> ... 

Set urlrewrite web.config 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 the answer

 ... <img src="//cdn.local/images/photo1.jpg" /> <img src="//cdn.local/images/photo2.jpg" /> ... 

I hope for this help.

Answer 5

CDN configurations may vary, but the most common setting is that the CDN server will act as a large distributed proxy for your server ("source server").

CDN does not care about how you deliver your content. You can specify its proxy for content by URL, content type, or other factors.

Thus, your situation, assuming that the content once delivered from the controller does not change, can be configured as follows:

• CDN Server Request
• CDN server requests your controller on the source server
• Controller Method Generates Content
• CDN caches content for subsequent requests
• CDN returns content
• Subsequent requests for the same content at the URL are returned from the CDN

The most important factor in the general case of returning static content is the URL structure you use.

The CDN does (can) take care of the response headers in terms of caching and expires, but this is best avoided if you can properly refine the URL to provide unique content by URL (for example, to solve version problems).

If you are trying to protect content, this is also possible with CDNs, but usually requires CDN-specific methods.

Answer 6

Assuming you need to do some calculations to determine the resource first, for example, do a search based on some identifier to resolve the CDN URL. You absolutely should not use the web client and load the image into an array of bytes. If you need to download a file, it essentially becomes a volatile resource, and you need to decide how to deal with it using a circuit breaker, possibly without a cache, and you need to buffer it so that it doesn't use too much memory.

In this case, you best resolve the URL and use the 301/302 redirect 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); }