在Azure Web Apps發行時進行進行程式碼異動比較

在Azure Web Apps發行時進行進行程式碼異動比較

使用版本控管(Version Control)(不論使用git、TFS、Visual Studio Online等管理系統)之後,異動的比較(Code Compare)是一個非常實用的功能,重點在於能即時與伺服器端版本控管進行程式碼比較,這絕對不是本機式比較軟體(如:http://winmerge.org/)所能比的上的。

今天無意中發現一個發行Azure Web Apps(之前稱Azure Websites)時好用的比較小技巧。可以在進行Azure的發行動作中進行比較的動作,等於是可以進行最後的確認動作。

需求:web.config的組態切換

我的需求是這樣,我的web.config針對Debug與Release有不同的組態設置,最常見的需求就是connectionString,Debug組態連接LoadDB或測試資料庫,Release組態切換至正式資料庫。原本的測試方式很笨,就是切換Debug或Release模式,然後執行網站,看看讀取對應的組態內容是否正確。

發行網頁 - 預覽

在Azure Web Apps提供發行與發行的差異預覽,之前都一直誤以為這只是個檔案更新清單

Azure web apps Publish Preview

今天突然好奇的去點擊了我那由Debug切換至Release的web.config組態檔,結果:

Azure web apps publish code compare

跑出了預覽變更視窗。這個技巧能用在所有文字類型的檔案上,例如:.cshtml / .js / .css。目前使用在像 Web.config 或重點更新的檔案幫了不小的忙,好幾次都是直接在預覽變更就發現問題,而省下不必要的浪費。例如上圖,從比較的結果就能知道組態檔的值已經替換成功,這一點反而是方案總管中的原始檔比較無法做到的

Dino的指點,這個程式碼比對更精確的說是「Web Deploy」所提供的功能,是個發怖前程式碼比對功能。

解決.svg無法在Azure websites載入顯示的問題

解決.svg無法在Azure websites載入顯示的問題

SVG稱可縮放的向量圖形,它本身有兩種格式,一種是XML格式,簡單想,它就如同一般HTML tag一樣,在網頁的中它使用<svg></svg>標籤。

SVG的XML格式

以下是使用wiki上的範例程式碼,你只要使用<svg></svg>標籤,就能在網頁上畫面你想要的任何向量圖。

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Document</title>
  </head>
  <body>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
      width="467" height="462">
     <!-- This is the red square: -->
     <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
           stroke="black" stroke-width="2px" />
     <!-- This is the blue square: -->
     <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
           stroke="black" stroke-width="2px" fill-opacity="0.7" />
  </svg>
  </body>
  </html>