iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Software Development

C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式系列 第 21

(DAY 21)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-網站佈署(一): Azure雲端帳號建立

  • 分享至 

  • xImage
  •  

當我們將網站專案製作完成後,如果沒有放到網路讓其他人可以看見的話,不是太可惜了嗎?所以今天就來將網站部署上線吧~我們會使用Azure平台來將網站以及資料庫發佈上去,那麼就開始囉!

● Azure是什麼?

Microsoft Azure 是微軟的公用雲端服務 (Public Cloud Service) 平台,是微軟線上服務 (Microsoft Online Services) 的一部份。Azure 提供的服務非常多樣,包含運算、儲存、分析、管理、應用程式、身分識別等等,目前 Azure 上的服務與功能仍然在增加中。

詳細可以參考維基百科說明:https://zh.wikipedia.org/zh-tw/Microsoft_Azure

● 建立Azure帳戶

要建立Azure帳戶前,首先要先註冊一個Microsoft的帳號,畢竟是自家平台嘛!點選以下連結進入Azure首頁,畫面如下:
https://azure.microsoft.com/zh-tw/

第一次使用時我們點選右上角「免費帳戶」綠色按鈕,點擊後進入畫面如下:

按下「開始免費使用」,如果沒有登入Microsoft帳戶會先提示登入,這時如果沒有微軟帳戶的話就要先建立一個哦~註冊的步驟就不詳述,總之註冊資料填完會發送驗證碼到email,驗證通過就可以進行登入Azure了。

登入後應該就會要求填一些個人基本資料,包含姓名、住址、手機驗證等,這邊重點在於Azure新的使用者雖然可以免費使用一些服務,但仍然需要輸入信用卡號內容,這邊微軟可能會試扣一筆金額約40元,不過會馬上退刷不用擔心會付到錢。

上述完成後就會跳轉到Azure歡迎頁面了。

如果還不太懂如何註冊建立帳戶的話,可以再參考看看以下邦友的文章,可能畫面稍微不太一樣但寫的也很詳細~
https://ithelp.ithome.com.tw/articles/10201833

● App Service建立

要將網站專案發佈首先必須先建立新的「應用程式服務」(App Service),應該可以在首頁的畫面或側邊工具列找到,如下圖所示:

點擊後畫面如下,點選「建立」。

接著依照下圖紅框標示選擇或輸入相關資訊,包含:

  1. 新建資源群組,群組名稱可自訂。

  2. 輸入執行個體名稱,名稱可自訂但會比對是否已被使用,當網站發布後預設網址就會是{名稱}.azurewebsites.net

  3. 執行階段堆疊選擇「ASP. NET V4.8」,以符合當初網站專案建立時的版本。

  4. 選擇伺服器地區,可以自由選擇喜歡的,這裡範例選擇「East Asia」。

  5. 完成後點選「檢閱+建立」,確認建立內容無誤點擊「建立」,即開始初始化部署資源。

  6. 等待部署......

  7. 部署完成後顯示以下畫面,至此就算完成App Service建立了,可以點擊「前往資源」查看概況。

● 從Visual Studio上發佈專案

Azure服務建置完成後,再來就可以將網站專案發佈了,步驟如下:

  1. 在方案總管的專案名稱上按滑鼠右鍵,點擊「發佈」。

  2. 發佈目標選擇「Azure」,並按「下一步」。

  3. 特定目標選擇「App Service(Windows)」,並按「下一步」。

  4. 這邊先確認是否已經登入Microsoft帳戶了,登入後選擇剛才在Azure上建立的App Service名稱,並按下完成。

  5. 建立發行設定檔後,點選「關閉」。

  6. 點選「發佈」後,網站就會開始部署到Azure上了。

  7. 發佈成功!點選網站URL就可以看看自己的作品囉~

  8. 開啟後發現事與願違,雖然導覽列成功顯示了,但內容出現下圖錯誤......這是因為我們原本使用的是本地資料庫(Local DB)檔案,但資料庫也要發佈到Azure才行呀~人生好難QQ

  9. 要了解錯誤發生詳細的原因,可以到專案的Web.config檔裡面,在<system.web>標籤內加入下面這行,重新發佈專案與執行就可以看到詳細錯誤。

<customErrors mode="Off"/>


● 小結

今天完成了Azure資源建立,並嘗試了將網站專案發佈,正常到此就算告一段落,但我們的專案內容是有包含資料庫的部分,還有最後一段路要走,那我們就留到明天來說明吧!See U Tomorrow~


上一篇
(DAY 20)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(八)
下一篇
(DAY 22)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-網站佈署(二): Azure資料庫使用
系列文
C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kamito1412
iT邦新手 5 級 ‧ 2024-04-20 12:00:42

Coding小僧你好,
我在Azure部署網站的時候出現https://ithelp.ithome.com.tw/upload/images/20240420/201666876sHj8fC1T0.jpg
然後提示訊息如下
請問我該如何解決?
謝謝
{
"status": "Failed",
"error": {
"code": "Forbidden",
"message": "The subscription 'acd34b78-0ad4-428a-944f-85b18d79c57f' is not allowed to create or update the serverfarm.",
"details": [
{
"message": "The subscription 'acd34b78-0ad4-428a-944f-85b18d79c57f' is not allowed to create or update the serverfarm."
},
{
"code": "Forbidden"
},
{}
]
}
}

我要留言

立即登入留言