2017-04-22

如何在 debug 時使用對應組態設定的 web.config

自從 web.config transform (可以依不同的組態設定 e.g.: debug、release 設定不同的值) 的功能出現後,在不同環境間的變數處理變得容易許多,雖然有方法可以預覽及比較最後產出的 config 內容,但我們有時需要針對不同的組態設定來進行 debug,此時就會發現切換 Visual Studio 到不同組態(configuration)時,依舊使用預設的 web.config 執行,而非對應的 web.{組態}.config ,這是因為 web.config transform 原始設計就是只在執行 部署 時才會觸發 config 轉換的緣故,身為一個偷懶追求效率的工程師,你一定也不想為了 debug 不同組態的參數就手動修改 web.config,如果設定沒幾個就算了,一旦設定有幾十個,我想還是來看看可以怎麼設定吧


基本設定

  1. 使用預設 ASP.NET MVC 專案範本
  2. 在 web.config 加入一個 appsetting

    <add key="yowko" value="yowko"/>

  3. 分別修改不同組態時 web.config 的設定內容
    • Web.Debug.config
      <appSettings>
          <add key="yowko" value="Debug" xdt:Transform="Replace" xdt:Locator="Match(key)"/>
      </appSettings>
      
    • Web.Release.config
      <appSettings>
          <add key="yowko" value="Release" xdt:Transform="Replace" xdt:Locator="Match(key)"/>
      </appSettings>
      
  4. 修改 HomeController
    public ActionResult Index()
    {
        ViewBag.Message = ConfigurationManager.AppSettings["yowko"];
        return View();
    }
    
  5. 修改 Index.cshtml
    @{
    ViewBag.Title = "Home Page";
    }
    
    @ViewBag.Message
    

實際問題

-切換不同 configuration 仍顯示預設 web.config 的設定 >11default

預覽對應組態的 config 結果

  1. 在想要預覽的組態 config 上按右鍵 --> Preview Transform

    1preview

  2. 預覽結果

    分割視窗左邊是原本的 web.config,右邊是轉換後的 web.config,畫面上會用紅色表示被修改前的內容,綠色表示修改後的內容

    2previewresult

設定 build 即觸發 web.config transform

  • 修改 .csproj 檔

    1. Upload Project(卸載專案)
      • 專案 --> 右鍵 --> Upload Project

        3unloadproject

    2. Edit .csproj
      • 卸載的專案 --> 右鍵 --> Edit {projectname}.csproj

        4editcsproj

    3. 在設定結尾 </Project> 前加入下列設定
      • VS 2015
        <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(MSBuildToolsVersion)\WebApplications\Microsoft.WebApplication.targets" />
        <Target Name="BeforeBuild">
            <TransformXml Source="Web.template.config" Transform="Web.$(Configuration).config" Destination="Web.config" />
        </Target>
        
      • VS 2017
        <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(MSBuildToolsVersion)\WebApplications\Microsoft.WebApplication.targets" />
        <Target Name="BeforeBuild">
            <TransformXml Source="Web.template.config" Transform="Web.$(Configuration).config" Destination="Web.config" />
        </Target>
        
        • VS 2017 因為安裝輕量化,有些共用元件預設沒有安裝,這個功能便是其一

          7vs2017install

    4. 儲存後重新載入專案
      • 卸載的專案 --> 右鍵 --> Reload Project

        5reload

    5. 複製 web.config 命名為 web.template.config

      以後修改就 web.config 的內容就直接修改 web.template.config

    6. build project 就會更新 web.config
      • web.config 開啟狀態會要求重新載入

        6reloadfile

  • 使用套件

    • 安裝 Configuration Transform

      1. VS 主選單 Tools --> Extensions and Updates

        8installconfig

      2. 在 Online tab --> 搜尋 Configuration Transform --> 安裝

        9instlled

    • 實際使用

      • 在想要取得的組態 config 上 --> 右鍵 --> Execute transformation
        • e.g. 取得 release 的 config --> 在 web.release.config 上按右鍵執行

        10execute

    • VS 2017 暫無法使用 (2017/04/22)

實際效果

  • 可以依不同的 configuration 顯示對應設定內容

    12result

心得

  • 使用 .csproj 檔
    • 優點:
      1. 設定一次就永久有效
    • 缺點:
      1. 多了一個 template 檔案,容易造成新進人員混淆
      2. 每次 build 都會執行,會影響開發節奏
  • 使用套件
    • 優點:
      1. 有需要才執行,速度可控制
      2. 程式碼維護上比較直覺
    • 缺點:
      1. 需要安裝套件,套件目前仍無法於 vs2017 中使用

參考資訊

  1. Web.config Transformation Syntax for Web Project Deployment Using Visual Studio
  2. How to enable transformations on build with Visual Studio
  3. Configuration Transform

沒有留言:

張貼留言