用於開發和部署的靜態資產和基於CDN的資產之間切換的最佳方式

我正在開發和ASP.NET MVC3中的應用程序。我計劃利用亞馬遜Cloudfront產品作爲CDN服務於靜態資產。用於開發和部署的靜態資產和基於CDN的資產之間切換的最佳方式

我很好奇，如果有人設計了一種簡單的方法來切換用於開發的本地資產和用於部署的基於CDN的資產？

任何提示或技巧將不勝感激。

來源

2012-02-20 stephen776

同樣保羅的回答。

在過去，我使用了UrlHelper的擴展方法，該方法根據web.config中的值創建鏈接。

這很有幫助，因此您不必在發佈後微調視圖，這與在發佈時更新web.config條目一樣簡單。需要使用CDN資源的任何資源，你乾脆說Url.CdnContent("~/site.css")

我不是在此刻我的開發PC，但是當我回家，我給你拿我的擴展方法源

這是非常簡單的，但它的工作原理爲我需要做的

public static string CdnContent(this UrlHelper helper, string relativePath) 
{ 
    var cdnRoot = ConfigurationManager.AppSettings["cygnus.cdnroot"]; 
    if (string.IsNullOrEmpty(cdnRoot)) 
     return UrlHelper.GenerateContentUrl(relativePath, helper.RequestContext.HttpContext); 

    if (relativePath.StartsWith("~")) 
     relativePath = relativePath.Substring(1); 

    if (cdnRoot.EndsWith("/")) 
     cdnRoot = cdnRoot.Substring(0, cdnRoot.Length - 1); 

    if (!relativePath.StartsWith("/")) 
     relativePath = "/" + relativePath; 

    return cdnRoot + relativePath; 
}

來源

2012-02-20 21:43:48

這將是太棒了。謝謝。 – stephen776 2012-02-21 01:11:30

@ stephen776，如果您查看源代碼，則使用擴展方法 – 2012-02-21 02:49:47

@ stephen776更新答案，它的設置也可以在沒有web.config值的情況下運行。當我在本地開發時，我忽略了cdnroot appsetting，然後讓我的web config在構建時添加它。 – 2012-02-21 19:47:05

我使用一些簡單的規則做了過去：

務必使用CSS文件中的相對路徑
始終使用標準模式來引用的內容在你的意見（我用相對應用路徑爲Url.Content，即Url.Content("~/content/file.jpg")）
請勿在JavaScript中引用文件。

然後在我的部署過程中，我可以簡單地全部靜態資產從網站到CDN複製時，CSS將只是因爲它的相對（CSS工作url()值總是相對的CSS文件，他們都在，不是請求），我將使用正則表達式替換我的視圖中的任何字符串，這些字符串的形式是我期望的CDN基本路徑。

來源

2012-02-20 17:29:25

不錯的問題。我建議你使用條件編譯變量。

如果您的項目位於調試模式，則本地資產將被鏈接。如果您的項目處於發佈模式，CDN資產將被鏈接。

這裏有一個例子：

<head runat="server"> 
    <% #if DEBUG %> 
     <link rel="stylesheet" type="text/css" href="/Assets/Styles/Default.css" /> 
    <% #else %> 
     <link rel="stylesheet" type="text/css" href="http://cdn.mysite.com/Assets/Styles/Default.css" /> 
    <% #endif %> 
</head>

但要小心，當你發佈你的項目，應該在釋放模式。有一次，我更新了其中一個項目，它處於DEBUG模式，並且一切都出錯了。

以下是有關條件編譯一些不錯的鏈接：

http://haacked.com/archive/2007/09/16/conditional-compilation-constants-and-asp.net.aspx

http://odetocode.com/blogs/scott/archive/2005/12/01/conditional-compilation-in-asp-net-2-0.aspx

http://odetocode.com/blogs/scott/archive/2007/09/24/more-on-conditional-compilation-in-asp-net.aspx

來源

2012-02-20 18:11:42

這看起來很直截了當。謝謝（你的）信息。我會檢查出所有的鏈接 – stephen776 2012-02-20 20:54:05

@ stephen776：我很高興它幫助:) – 2012-02-20 21:06:50

我有一組我使用（見下文）擴展方法。您可以使用這些作爲基礎/示例來創建您自己的自定義調試/版本擴展方法。

常規調試/釋放：

public static MvcHtmlString DebugReleaseString(this System.Web.Mvc.HtmlHelper html, string debugString, string releaseString) 
{ 
    string toReturn = debugString; 
#if !DEBUG 
    if (!string.IsNullOrEmpty(releaseString)) 
     toReturn = releaseString; 
#endif 
    return MvcHtmlString.Create(toReturn); 
}

常規調試/釋放用法：

@Html.DebugReleaseString("/images/myimage.jpg", "http://mycdn.com/images/myimage.jpg")

調試/釋放CSS標籤：

public static MvcHtmlString CssTag(this System.Web.Mvc.HtmlHelper html, string fileName) 
{ 
    return html.CssTag(fileName, string.Empty); 
} 

public static MvcHtmlString CssTag(this System.Web.Mvc.HtmlHelper html, string fileName, string releaseFileName) 
{ 
    if (string.IsNullOrEmpty(fileName)) 
     throw new ArgumentNullException("fileName"); 

    string cssTag = string.Format(
     "<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\" />", 
     html.MeDebugReleaseString(fileName, releaseFileName)); 

    return MvcHtmlString.Create(cssTag); 
}

調試/釋放CSS標籤的用法：

@Html.CssTag("/styles/mystyle.css") 
@Html.CssTag("/styles/mystyle.css", "http://mycdn.com/styles/mystyle.css")

調試/釋放JS標籤：

public static MvcHtmlString JavascriptTag(this System.Web.Mvc.HtmlHelper html, string fileName) 
{ 
    return html.JavascriptTag(fileName, string.Empty); 
} 

public static MvcHtmlString JavascriptTag(this System.Web.Mvc.HtmlHelper html, string fileName, string releaseFileName) 
{ 
    if (string.IsNullOrEmpty(fileName)) 
     throw new ArgumentNullException("fileName"); 

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", 
           html.MeDebugReleaseString(fileName, releaseFileName)); 

    return MvcHtmlString.Create(jsTag); 
}

調試/釋放JS標籤的用法：

@Html.JavascriptTag("/scripts/myscript.css") 
@Html.JavascriptTag("/scripts/myscript.css", "http://mycdn.com/scripts/myscript.js")

附加調試/釋放選項：

public enum RenderModeEnum 
{ 
    Debug, 
    Release, 
    DebugAndRelease 
} 

public static MvcHtmlString CssTag(this System.Web.Mvc.HtmlHelper html, string fileName, RenderModeEnum tagRenderMode) 
{ 
    if (tagRenderMode == RenderModeEnum.DebugAndRelease) 
     return html.CssTag(fileName); 

#if DEBUG 
    if (tagRenderMode == RenderModeEnum.Debug) 
     return html.CssTag(fileName); 
#else 
    if (tagRenderMode == RenderModeEnum.Release) 
     return html.CssTag(fileName); 
#endif 

    return MvcHtmlString.Empty; 
} 

public static MvcHtmlString JavascriptTag(this System.Web.Mvc.HtmlHelper html, string fileName, RenderModeEnum tagRenderMode) 
{ 
    if (tagRenderMode == RenderModeEnum.DebugAndRelease) 
     return html.JavascriptTag(fileName); 

#if DEBUG 
    if (tagRenderMode == RenderModeEnum.Debug) 
     return html.JavascriptTag(fileName); 
#else 
    if (tagRenderMode == RenderModeEnum.Release) 
     return html.JavascriptTag(fileName); 
#endif 

    return MvcHtmlString.Empty; 
}

附加調試/釋放選項用法：

@Html.CssTag("/styles/mystyle.css", RenderModeEnum.DebugAndRelease) 
@Html.CssTag("/styles/mystyle.css", RenderModeEnum.Debug) 
@Html.CssTag("http://mycdn.com/styles/mystyle.css", RenderModeEnum.Release)

來源

2012-02-20 22:06:35 Charlino

我開發了一個庫來專門解決這個問題。

https://github.com/vincpa/mvc.resourceloader

來源

2012-02-21 03:00:07

用於開發和部署的靜態資產和基於CDN的資產之間切換的最佳方式

回答

相關問題