Azure&Visual Studio 2015簡單部屬Web個人網站
相信大家都有用自己的學生身分開通Microsoft DreamSpark學生夢想火花計畫。在開通後的軟體目錄下，除了有大家可以免費下載使用的開發人員與設計人員工具之外，應該也有人發現在伺服器與應用下也有Microsoft Azure雲端的產品。
沒錯！透過Microsoft DreamSpark學生夢想火花計畫開通後，你(妳)除了擁有免費的開發人員與設計人員工具之外，還有微軟的Microsoft Azure雲端可以使用。透過Microsoft Azure，除了可以輕鬆建置部屬自己的Web網站之外，還能與你(妳)在Visual Studio上所開發的網站架構做結合，進一步地將你(妳)的Web網站發佈上去，成為您的專屬網站。
那要怎麼去完成剛剛我所說的這些部屬與建置？現在就帶大家從Microsoft Azure上快速部屬自己的Web網站，再與Visual Studio上自己所建置的網站架構作結合，創造出自己獨一無二的專屬網站。
一、 Azure部屬
首先，開啟自己的Azure雲端，可以看見螢幕右上方是使用者名稱，左方則是使用者可以建置部屬在自己Azure上的各個應用與功能。點開左上方的新增，可以瀏覽Azure上各個建置的功能，點開Web+行動可以看見我們所需要的Web應用程式，點選後右方會出現Web應用程式上使用者所必須填寫的資料，分別為Web應用程式名稱(網址的連結)、Azure的訂戶、資源群組、建置方案的位置。四項必填資料如下圖所示：
在Web應用程式這裡，填入我們自己所想要的網址抬頭(範例填寫：EducationWeb)。Azure訂用帳戶的部分因為我們是DreamSpark學生夢想火花計畫開通的免費服務，所以只有DreamSpark選項可以選。資源群組的部分可以選擇你(妳)有建置過的群組。若沒有可以點選建立新選項輸入一個新的自訂名稱，方便我們未來在Azure上部屬各個應用時，可以快速選取自己早已創好所需的資源，而不需要再重新配置資源群組來增快效率完成部屬(範例填寫：Web)，最後建置位置的部分，則是可以選擇Azure上目前有的伺服器位置與你(妳)創建的伺服器名稱和費用的部分(範例填寫：Web(方案名稱)、East Asia(東亞)、F1免費)，最後完成以上設定後按下建立按鈕，三到五分鐘即可快速部屬完成(如下圖)。
在部屬完你(妳)的個人Web應用程式後Azure畫面會導入到部屬成功的頁面。上方會顯示你(妳)的Web應用程式名稱，名稱下方可以做各項設定、預覽、停止、重新啟動、刪除、取得發行等多項功能，來讓使用者方便管理自己的Web網站。中間的部分則是會顯示使用者剛剛在部屬時所有的設定資訊與URL(網址)和FTP資訊。在最下方的監視部分則是可以在使用者的網址運行時，及時掌控自己的Web應用程式狀況。
此時記得點選第一欄位右方的取得發行權，將網站的發行權檔載下來，好讓等等可以快速的與Visual Studio 2015進行串聯發佈(取得位置如下圖所示)。
二、 Visual Studio 2015開發
打開你(妳)的Visual Studio 2015來開始建置專案與撰寫個人網站的架構。首先先點選檔案→新增→專案。
選擇Web範本→ASP.NET Web應用程式，上方.NET Framework請選擇4.5版本，下方可以輸入您的方案資料夾名稱、位置與方案名稱(範例：EducationWeb)設定完後請點選確認。
確認後會在跳出ASP.NET專案範本，此選項是針對你(妳)所要建置的Web網站所需的功能創建所需的ASP.NET(範例：ASP.NET 4.5範本、Web API)，在這頁面選擇的同時，請注意右下角的雲端中的主機，是否有被勾選起來，若有勾選起來請將打勾取消。因為這部分是Visual Studio為了方便開發者可以快速在Azure上選擇自己所建置的Web應用程式，可以與自己所創建的Web專案快速部屬所設計的，但由於本教學選擇的是DreamSpark免費使用的功能，因此沒有Azure的訂閱權，若有打勾將會沒辦法建置，因此需要將打勾給取消掉，以便後續的部屬與創建撰寫。確認完請點選確認鈕。
PS：Visual Studio在選項上可以針對個人所需的部分去做選擇，是一個很好的功能。
在確認完成後Visual Studio便會開始照你(妳)剛剛所設定的部分，創建出你(妳)的第一個Web專案(如下圖所示)，這裡可以分為四個部分來說明。中間的部分是我們選擇的腳本撰寫區，下方的部分則是可以看見輸出後錯誤的部分與套件管理主控台，右方第一個則是我們專案內所有的資訊包含各個腳本與資料夾和圖片，右下方則是我們點選的每個物件腳本等等的專案屬性。
簡單的了解完各區的功能後，我們便可以將剛剛在Azure上快速部屬好的Web應用程式與Visual Studio上自己所創建的Web專案做第一次串聯。
先點選專案資料夾右鍵→選擇發行。
此時畫面會跳出另一個發行Web視窗(如下圖所示)，請點選匯入，選擇將剛剛在Azure上所下載取得的發行檔路徑位置後點下確認鈕，在點下發行鈕。
此時畫面會再轉跳到連線部分，你(妳)可以在上頭確認所有資訊，如：伺服器、網站名稱、使用者、密碼與URL(網址)的部分(如下圖所示)，確認完後點選發行按鈕。
此刻Visual Studio便會開始與Azure做串聯發佈，大約等候五分鐘左右便會轉跳到網站，出現您的網站啦(如下圖所示)！
當你(妳)看見了網站出現後，可以回到Visual Studio的Web專案裡，到右方專案找尋Views資料夾下，選擇Home資料夾下的@Index.cshtml腳本點開來撰寫你(妳)主網頁的畫面，使用的語言是HTML5(如下圖所示)
在HTML5語言中<div>跟</div>的型成是一個小框架，<h1>跟</h1>則是屬於大標題，<p>跟</p>則是顯示你(妳)要打的文字，<a>跟</a>則是文字超連結的部分(如下圖所示)。
所以我們可以在上頭的<h1>跟</h1>中間的ASP.NET改成您自己的名字(範例：EducationWeb)，在<p>跟</p>的部分打上你(妳)的自我介紹(範例：我是微軟學生大使_技術組李明陽，請大家多多指教。下方按鈕是Microsoft Student Partners微軟學生大使的FB連結，歡迎大家來關注最新消息。)，在<a>跟</a>的部分則是將href=””裡的網址改成你(妳)的FB連結(範例：Microsoft Student Partners微軟學生大使的FB連結https://www.facebook.com/MSPTaiwan )，後方”Learn more”則是將你(妳)要在按鈕上顯示的文字給顯示出來，這部份我們可以改成”歡迎點擊”，完成基本的改寫後按下Ctrl+S儲存下來(如下圖所示)。
完成上方基本的改寫後，點擊上方執行按鈕或按下F5直接執行，便可以看見你(妳)剛剛所改寫的部分會呈現在你(妳)自己的網頁上面(如下圖所示)
下方是運行後，在網頁上顯示剛剛我們所改寫的部分結果
你(妳)會發現，在網站上你(妳)剛剛所改寫的自我介紹部分，文在被串在一起排版很難看，這時我們可以再回到Visual Studio裡，在剛剛所改寫HTML5裡的腳本裡，去將<p>跟</p>中間的地方，你(妳)所要斷行的地方多打個</p>，在你要換到下一行呈現的文字前頭多打個<p>(如下圖所示)
修改完成後，你在按下執行按鈕或F5來看看運行後，你剛剛所改的部分在網頁上排版呈現是否是有被修正過變好看了些(如下圖所示)。
你(妳)在執行後網頁上，可以看見剛剛所改的斷行部分，當你(妳)修正後感覺滿意，便可以再回到Visual Studio裡的右方專案，點選右鍵發行，此次發行不需要在匯入發行檔，只需要點選發行按鈕後即可將你(妳)剛剛所改寫完成的部分，與第一次發行的部分作替換，是不是很快速呀!!
透過Azure Web應用程式，能快速簡單地部屬個人網站的Web應用程式，再透過Visual Studio 2015建置Web專案，簡易的修改HTML5的部分。透過兩個步驟的方法可以快速又簡單的完成自己的個人網站部屬與發行，縮短了網站架設時所需要的後端建置時間，更運用了Web API將開發語言變得更容易使用易懂，使開發者能透過簡單的開發流程，完成自己個人網站的架設。
撰寫人：MSP技術組李明陽