使用Visual Studio 2012發行網站應用程式到Windows Azure

by vivid 8. 五月 2013 17:41

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N130513601
出刊日期:2013/5/8

Windows Azure是微軟的雲端服務,可以用來裝載您的網站或服務。當你將網站或應用程式部署到微軟雲端服務上,它們就會執行在微軟管理的DataCenter伺服器上。將應用程式部署到微軟雲端服務上Windows Azure的好處是,你可以提高網站應用程式的延展性,讓網站應用程式或服務可以透過伺服器農場進行負載平衡的動作,而只需要付些許的費用。

Windows Azure可以裝載以下類型的應用程式:

  • 網站應用程式:你可以將ASP.NET、PHP或Node.js類型的網站應用程式部署到Windows Azure。微軟的Visual Studio 2012與WebMatrix開發工具,也支援將網站應用程式直接部署到Windows Azure的功能。
  • Web服務:你可以將Web服務,如WCF服務部署到Windows Azure。
  • 虛擬伺服器:你可以在Windows Azure建立虛擬伺服器,運行Windows 伺服器。
  • 資料庫:你可以使用SQL Azure來存放資料庫資料。
  • Mobile Service:用來裝載給行動裝置(如手機、平板裝置)上的程式呼叫用的服務。
  • 媒體服務:用來提供影片(video)、音樂(audio)等等多媒體格式資料,支援多種媒體檔案類型,如mp4。

在這一篇文章之中,將介紹如何使用Visual Studio 2012的網站發行功能以及Windows Cloud專案將網站部署到Windows Azure上運行。

在Visual Studio 2012之中,想要開發可部署到Windows Azure的網站或服務,需要先下載並安裝「Windows Azure SDK for .NET」,其中包含一些Windows Azure範本專案、模擬器等等工具,並會讓Visual Studio 多出一些選單,以讓你將程式發行到Windows Azure。您可以至以下網站:

https://www.windowsazure.com/en-us/develop/net/

選取網頁中的連結下載並安裝SDK,請參考下圖所示:

image

圖 1:下載並安裝SDK。

或者在Visual Studio 2012開發工具之中,選取「檔案」-「新增」- 「專案」,在「新增專案」對話盒之中,選取程式語言,如「Visual C#」,然後選取「Cloud」- 「取得 Windows Azure SDK for .NET」,再按下「確定」按鈕,請參考下圖所示:

image

圖 2:取得Windows Azure SDK for .NET。

接著可以看到跳出以下頁面,引導你從微軟網站下載必要軟體,點選其中的「下載 Windows Azure SDK for .NET」來進行下載,請參考下圖所示:

image

圖 3:下載Windows Azure SDK for .NET。

點選「Install the SDK」進行下載,請參考下圖所示:

image

圖 4:下載SDK。

選取Visual Studio的版本,例如下圖:

image

圖 5:選取適合的版本。

註冊網站

若您有一個現成的網站,想要發行到微軟的Windows Azure,您可以先使用瀏覽器連接至以下網站:

https://www.windowsazure.com/zh-tw/pricing/free-trial/

選擇付費「直接購買」Windows Azure服務,或點選「免費試用」連結進行伸請,可享有Windows Azure三個月免費試用,請參考下圖所示:

image

圖 6:申請免費試用帳號。

根據文件的說明,目前免費試用提供以下功能(請注意,請以微軟網站最新說明為準):

Windows Azure帳號伸請完成之後,接著可以使用瀏覽器登入http://manage.windowsazure.com網站來管理Windows Azure帳戶。登入網站之後,點選「網站」,連接到以下網址:

https://manage.windowsazure.com/#Workspaces/WebsiteExtension/websites,你可以透過呈現在瀏覽器的管理介面,在Windows Azure註冊一個網站。例如,參考下圖,點選其中的「創建網站」連結,請參考下圖所示。(註:筆者使用Windows 8 作業系統上的IE10瀏覽器連接到Windows Azure,很無奈的是,總是會被轉址到簡體中文的網站,這部分就先將就一下吧)

image

圖 7:創建網站。

接著,網頁下方將會出現一個黑色底色的對話盒,在「URL」指定一個唯一的識別名稱,這將是網站的網域名稱,若名稱已存在,會馬上顯示錯誤訊息。在「區域」區塊之中,選取網站所在地區,例如「East Asia」,然後選擇下方的「創建網站」連結,請參考下圖所示:

image

圖 8:創建網站。

回到https://manage.windowsazure.com網站管理畫面,顯示你的網站正在運行中,請參考下圖所示:

image

圖 9:網站正在運行中。

你可以啟用瀏覽器,連接到這個網站,本文使用網址為「http://vividdemo.azurewebsites.net/」,連接到網站後,預設有一個範例頁面,呈現的畫面參考如下:

image

圖 10:Windows Azure範例網站。

回到manage.windowsazure.com網站,點選「網站」,再點選前面步驟建立的網站名稱,例如本文的「vividdemo」,連接到以下網頁,選取「發布應用程序」->「下載發布配置文件」,請參考下圖所示:

image

圖 11:下載發布配置文件。

瀏覽器會下載一個PublishSettings檔案記錄發行網站的相關設定資訊,本例的檔案名稱為「vividdemo.azurewebsites.net.PublishSettings」,檔案的內容為XML格式的發行資訊,參考如下所示(註:帳號與密碼部分以X字串表示之):

<publishData>
<publishProfile profileName = "vividdemo - Web Deploy" publishMethod = "MSDeploy" publishUr l ="waws-prod-hk1-001.publish.azurewebsites.windows.net:443" msdeploySite = "vividdemo" username = "XXXXXXX" userPWD = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" destinationAppUrl = "http://vividdemo.azurewebsites.net" SQLServerDBConnectionString = "" mySQLDBConnectionString = "" hostingProviderForumLink = "" controlPanelLink = "">
<databases/>
</publishProfile>


<publishProfile profileName = "vividdemo - FTP" publishMethod = "FTP" publishUrl = "ftp://waws-prod-hk1-001.ftp.azurewebsites.windows.net/site/wwwroot" ftpPassiveMode = "True" username = "XXXXXXX" userPWD = "XXXXXXXXXXXXXXXXXXXXXXXXXXX" destinationAppUrl = "http://vividdemo.azurewebsites.net" SQLServerDBConnectionString = "" mySQLDBConnectionString = "" hostingProviderForumLink = "" controlPanelLink = "">
<databases/>
</publishProfile>
</publishData>

 

使用Visual Studio 發行功能部署網站

下載完PublishSettings設定檔案之後,便可以從Visual Studio 2012來發行網站。舉例來說,以下以Visual Studio 2012的ASP.NET建立一個範本網站為例,說明發行步驟。從Visual Studio 2012開發工具的「檔案」->「新增」->「專案」,從「Cloud」範本之中,選取「Windows Azure雲端服務」,建立一個專案,設定一個名稱,並按下「確定」按鈕,請參考下圖所示:

image

圖 12:建立Windows Azure雲端服務專案。

在「新增Windows Azure雲端服務」對話盒中選取「ASP.NET Web角色」,按下向右箭頭加到右方的清單,並按下「確定」按鈕,請參考下圖所示:

image

圖 13:建立ASP.NET網站專案。

從「方案總管」->「WebRole1」,按一下滑鼠右鍵,選取「發行」按鈕,請參考下圖所示:

image

圖 14:發行ASP.NET網站專案到Windows Azure。

在「發行Web」對話盒中,選取其中的「匯入」按鈕,載入從manage.windowsazure.com網站下載下來的發行設定檔案,請參考下圖所示:

image

圖 15:匯入發行設定檔案。

匯入設定檔案之後,檔案的設定,如帳號、密碼等相關資料就會出現在「連線」頁上,請參考下圖所示:

image

圖 16:匯入發行Web相關資訊。

在「預覽」頁可以檢視發行的相關統計資訊,最後只要按下「發行」鈕即可,請參考下圖所示:

image

圖 17:預覽發行資訊。

當發行成功時,會自動啟動瀏覽器,連接到你的網站,參考下圖所示:

image

圖 18:發行到雲端的網站。

使用Windows Azure專案部署與管理

當你利用Visual Studio 2012建立Cloud類型的ASP.NET網站專案時,會額外新增一個WindowsAzure專案以便於讓您將網站部署到Windows Azure偵錯環境進行測試。若想要使用到Windows Azure偵錯環境進行測試,你必需使用管理者權限來執行Visual Studio 2012,參考下圖,從「開始」->使用滑鼠右鍵點選「Visual Studio」,從下方的選單選取「以系統管理者身份執行」,請參考下圖所示:

image

圖 19:以系統管理者身份執行Visual Studio 2012。

然後再利用上文描述的方式,從Visual Studio 2012開發工具的「檔案」->「新增」->「專案」,從「Cloud」範本之中,選取「Windows Azure雲端服務」,在「新增Windows Azure雲端服務」對話盒中選取「ASP.NET Web角色」,按下向右箭頭加到右方的清單,並按下「確定」按鈕來建立專案。

若直接按F5執行這個ASP.NET網站應用程式,Visual Studio 2012會啟動「Windows Azure偵錯環境」將ASP.NET網站部署到Windows Azure偵錯環境上執行。Windows上的防火牆可能會跳出Windows 安全性警告資訊,若跳出資訊,則選擇「允許存取」按鈕,請參考下圖所示:

image

圖 20:開啟防火牆。

接著Visual Studio 2012便會自動啟動Windows Azure偵錯環境,來執行你的網站應用程式,請參考下圖所示:

image

圖 21:Visual Studio 2012會自動啟動Windows Azure偵錯環境。

WindowsAzure專案是用來部署到雲端用的。專案之中包含一個名為「角色」的資料夾,以及三個檔案:ServiceConfiguration.Cloud.cscfg、ServiceConfiguration.Local.cscfg與ServiceDefinition.csdef。分別說明用途如下:

  • ServiceConfiguration.Cloud.cscfg:此檔案包含組態資訊,以便讓你將網站應用程式部署到Windows Azure。,預設組態檔案的內容參考如下:

<?xml version = "1.0" encoding = "utf-8"?>
<ServiceConfiguration serviceName = "WindowsAzure1" xmlns = "http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration" osFamily = "3" osVersion = "*" schemaVersion = "2012-10.1.8">
<Role name = "WebRole1">
<Instances count = "1" />
<ConfigurationSettings>
<Setting name = "Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value = "UseDevelopmentStorage=true" />
</ConfigurationSettings>
</Role>
</ServiceConfiguration>

  • ServiceConfiguration.Local.cscfg:此檔案包含組態資訊,以便讓你將網站應用程式部署到Windows Azure偵錯環境上執行。,預設組態檔案的內容參考如下:
<?xml version = "1.0" encoding = "utf-8"?>
<ServiceConfiguration serviceName = "WindowsAzure1" xmlns = "http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration" osFamily = "3" osVersion = "*" schemaVersion = "2012-10.1.8">
<Role name = "WebRole1">
<Instances count = "1" />
<ConfigurationSettings>
<Setting name = "Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value = "UseDevelopmentStorage=true" />
</ConfigurationSettings>
</Role>
</ServiceConfiguration>
  • ServiceDefinition.csdef:包含服務相關資訊,例如服務端點(Endpoint)、使用的繫結(Binding)等等,預設組態檔案的內容參考如下:
<?xml version = "1.0" encoding = "utf-8"?>
<ServiceDefinition name = "WindowsAzure1" xmlns = "http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition" schemaVersion = "2012-10.1.8">
<WebRole name = "WebRole1" vmsize = "Small">
<Sites>
<Site name = "Web">
<Bindings>
<Binding name = "Endpoint1" endpointName = "Endpoint1" />
</Bindings>
</Site>
</Sites>
<Endpoints>
<InputEndpoint name = "Endpoint1" protocol = "http" port="80" />
</Endpoints>
<Imports>
<Import moduleName = "Diagnostics" />
</Imports>
</WebRole>
</ServiceDefinition>

為了防止組態檔定義錯誤,您可以利用Visual Studio 2012提供的視覺化畫面來設定組態,只要使用滑鼠雙擊「方案總管」-「Windows Azure」專案->「角色」資料夾內的「WebRole1」項目,就會啟動組態設定畫面,參考下圖所示,您可以設定VM執行個體個數,或VM大小、啟動動作、連接字串…等等:

image

圖 22:設定發行資訊。

接下來,從Visual Studio 2012開發工具的「方案總管」->「WindowsAzure專案」,按滑鼠右鍵,從快捷選單中選取「封裝」,請參考下圖所示:

image

圖 23:封裝Windows Azure應用程式。

接著出現「封裝Windows Azure應用程式」對話盒,預設服務組態設定為「Cloud」、組建組態設定為「Release」,在此保留預設設定,按「封裝」按鈕,請參考下圖所示:

image

圖 24:封裝應用程式。

封裝動作完成後,會啟動檔案總管,跳出封裝檔案所在目錄,預設目錄為:

專案名稱\bin\Release\app.publish

其中包含兩個檔案:

  • WindowsAzure1.cspkg
  • ServiceConfiguration.Cloud.cscfg

WindowsAzure1.cspkg檔案實際上是個壓縮檔案,你可以將其副檔名改為zip,不過為了安全性起見,預設其中的內容是加密的,請參考下圖所示:

image

圖 25:WindowsAzure1.cspkg檔案內容。

部署封裝檔案

回到manage.windowsazure.com網站,點選「雲服務」,再點選「創建雲服務」連結,請參考下圖所示(註:您也可以直接利用Visual Studio 2012,在Web專案選取部署到Windows Azure,順便建立雲服務,此部分稍後再介紹):

image

圖 26:創建雲服務。

從網頁下方跳出的黑色底色的對話盒中,URL部分指定一個唯一的識別名稱,這將是網站的網域名稱,若名稱已存在,會馬上顯示錯誤訊息。在「區域」區塊之中,選取網站所在地區,請參考下圖所示:

image

圖 27:設定網域名稱與所在地區。

建立完成之後,從「雲服務」頁點選剛建立的網站名稱,請參考下圖所示:

image

圖 28:點選剛建立的網站名稱。

可以看到參考頁面如下,顯示雲服務已建立的訊息,其中有許多連結可以進一步設定與管理網站。點選「部署設置」下的「新建生產部署」項目,請參考下圖所示:

image

圖 29:點選「部署設置」下的「新建生產部署」項目。

在「上載包」頁面上,設定部署資訊,例如本文範例將「部署名稱」設定為「vcloudtest」;程序包部分選取Visual Studio 2012封裝步驟建立的「WindowsAzure1.cspkg」;配置部分設定為Visual Studio 2012封裝步驟建立的「ServiceConfiguration.Cloud.cscfg」檔案,請參考下圖所示:

image

圖 30:上載應用程式。

這個動作將會部署網站,並啟動VM,需要花費較多的時間將VM啟動,您要稍為等一下下,參考頁面中間部分,會顯示網站目前的啟動狀態,請參考下圖所示:

image

圖 31:顯示網站目前的啟動狀態。

待VM狀態為「正在運行」時,您便可以使用瀏覽器連接至此網站:

http://vclouddemo.cloudapp.net/

執行結果如下,這表示網站已經正確地部署到Windows Azure了,請參考下圖所示:

image

圖 32:使用瀏覽器驗證網站正確地部署到Windows Azure。

點選manage.windowsazure.com網站的「儀表板」可以檢視網站運作情形,請參考下圖所示:

image

圖 33:儀表板。

後續網站若有更新,可以直接使用Visual Studio 2012的「發佈到Windows Azure」選單進行部署,從Visual Studio 2012開發工具的「方案總管」->網站專案,按滑鼠右鍵,從快捷選單中選取「發佈到Windows Azure」,請參考下圖所示:

image

圖 34:發佈到Windows Azure。

您需要提供驗證資訊來登入Windows Azure,點選「發行Windows Azure應用程式」對話盒上方的「登入以下載認證」連結,請參考下圖所示:

image

此時會自動啟動瀏覽器,以登入網站,登入後會跳出以下訊息,讓您下載設定檔案,請參考下圖所示:

image

圖 35:下載設定檔案。

接著點選「發行Windows Azure應用程式」對話盒上方的「匯入」按鈕匯入下載下來的設定檔案,對話盒會顯示匯入的資訊,請參考下圖所示:

image

圖 36:匯入設定檔案。

預設建立的範本專案需要SQL Azure,因此你可能會看到一個要求建立儲存體服務的對話盒,本文暫不討論資料庫的部分,在此步驟先定義一個儲存體服務名稱,以跳過檢查,請參考下圖所示:

image

圖 37:建立儲存體服務。

檢視發行摘要,請參考下圖所示,若無問題,便可按下「發行」按鈕,請參考下圖所示:

image

圖 38:發行網站應用程式。

若欲部署的網站正在運作,Visual Studio 2012開發工具會提示是否進行取代的動作,請參考下圖所示:

image

圖 39:取代正在運作的網站作。

Visual Studio 2012工具中的「Windows Azure活動記錄檔」視窗則會顯示部署相關狀態,請參考下圖所示:

image

圖 40:顯示部署狀態。

部署成功後,Visual Studio 2012工具中的「Windows Azure活動記錄檔」視窗則會顯示成功的訊息,請參考下圖所示:

image

圖 41:成功部署網站到Windows Azure。

Tags:

WindowsAzure

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List