使用 Visual Studio 將 ASP.NET Core 應用程式發行到 Azure

重要

ASP.NET Core 預覽版本與 Azure App Service

根據預設,ASP.NET Core 預覽版本不會部署至 Azure App Service。 若要裝載使用 ASP.NET Core 預覽版本的應用程式,請參閱將 ASP.NET Core 預覽版本部署至 Azure App Service

若要針對應用程式服務部署問題進行疑難排解,請參閱針對 Azure App Service 和 IIS 上的 ASP.NET Core 進行疑難排解

設定

如果您沒有帳戶,請開啟免費的 Azure 帳戶

建立 Web 應用程式

啟動 Visual Studio 2022 並選取 [建立新專案]

Create a new project from the start window

在 [建立新專案] 對話方塊中,選取 [ASP.NET Core Web 應用程式],然後選取 [下一步]

Create an ASP.NET Core Web App

在 [設定新專案] 對話方塊中,為專案命名,然後選取 [下一步]

在 [其他資訊] 對話方塊中:

  • Framework 輸入中,選取 [.NET 7.0 (標準期限支援)]
  • 在 [驗證類型] 輸入中,選取 [個人帳戶],然後選取 [建立]

Additional information

Visual Studio 會建立解決方案。

執行應用程式

  • 按 F5 執行專案。

Web application open in Microsoft Edge on localhost

註冊使用者

  • 選取 [註冊] 並註冊新的使用者。 您可以使用虛構的電子郵件地址。 提交時,頁面會顯示下列錯誤:

    「處理要求時資料庫作業失敗。 套用現有的移轉可能會解決此問題」

  • 選取 [套用移轉],並在頁面更新後重新整理頁面。

A database operation failed while processing the request

  • [註冊確認] 頁面隨即顯示。 選取 [按一下這裡以確認您的帳戶]
  • [確認電子郵件] 頁面隨即顯示。
  • 以新使用者身分登入。

應用程式會顯示用來註冊新使用者的電子郵件和 [登出] 連結。

Web application open in Microsoft Edge. The Register link is replaced by the text Hello user@example.com!

  • 關閉瀏覽器來停止應用程式,或在 Visual Studio 中選取 [偵錯]>[停止偵錯]
  • 在 Visual Studio 中,選取 [建置]>[清除解決方案] 來清除專案項目和避免檔案爭用。

將應用程式部署至 Azure

在 [方案總管] 中,以滑鼠右鍵按一下專案,然後選取 [發佈]

Contextual menu open with Publish link highlighted

在 [發行] 對話方塊中:

  • 選取 [Azure]
  • 選取 [下一步] 。

Publish dialog

在 [發行] 對話方塊中:

  • 選取 [Azure App Service (Windows)]
  • 選取 [下一步] 。

Publish Dialog: select Azure Service

在 [發佈] 對話方塊中,於 [App Service] 索引標籤中選取 [新建]

Publish dialog: select Azure Service instance

出現 [建立應用程式服務] 對話方塊:

  • 系統會填入 [名稱]、[資源群組] 和 [主控方案] 輸入欄位。 您可以保留這些名稱,或變更它們。
  • 選取建立

Create App Service dialog

建立完成後,對話方塊會自動關閉,且 [發佈] 對話方塊會再次取得焦點:

  • 系統會自動選取剛建立的新執行個體。
  • 選取完成

Publish dialog: select App Service instance

[發佈設定檔建立進度] 對話方塊確認已建立發行設定檔。 選取 [關閉]

接下來,您會看到 [發行設定檔摘要] 頁面。 Visual Studio 偵測到此應用程式需要 SQL Server 資料庫,其已列在 [服務相依性] 窗格中。 選取省略符號 (...),然後選取 [連線]

Publish Profile summary page: configure SQL Server dependency

[連線到相依性] 對話方塊隨即出現:

  • 選取 [Azure SQL Database]
  • 選取 [下一步] 。

Configure SQL Server Dependency dialog

在 [連線至 Azure SQL Database] 對話方塊中,選取 [新建]

Select Create a SQL DB

[建立 Azure SQL Database] 隨即出現:

  • 系統會填入 [資料庫名稱]、[資源群組]、[資料庫伺服器] 和 [App Service 方案] 輸入欄位。 您可以保留或變更這些值。
  • 輸入所選 [資料庫伺服器] 的 [資料庫管理員使用者名稱] 和 [資料庫管理員密碼] (請注意,您使用的帳戶必須具有建立新 Azure SQL 資料庫所需的權限)
  • 選取建立

New Azure SQL Database dialog

建立完成後,此對話方塊會自動關閉,而 [連線至 Azure SQL Database] 對話方塊會再次取得焦點:

  • 系統會自動選取剛建立的新執行個體。
  • 選取 [下一步] 。

Select Next

在 [連線至 Azure SQL Database] 對話方塊的下一個步驟中:

  • 輸入 [資料庫連線使用者名稱] 和 [資料庫連線密碼] 欄位。 這些是應用程式在執行階段用來連線到資料庫的詳細資料。 最佳做法是避免使用與上一個步驟中使用的管理員使用者名稱和密碼相同的詳細資料。
  • 選取完成

Configure Azure SQL Database dialog, connection string details

[相依性設定進度] 對話方塊確認已設定 Azure SQL Database。 選取 [關閉]

在 [發佈設定檔摘要] 頁面中,選取 [更多動作]>[編輯]

Publish profile summary page: edit settings

在 [發佈] 對話方塊的 [設定] 索引標籤上:

  • 展開 [資料庫] 並選取 [在執行階段使用此連接字串]

  • 展開 [Entity Framework 移轉] 並選取 [在發佈時套用此移轉]

  • 選取 [儲存]。 Visual Studio 會回到 [發行] 對話方塊。

Publish dialog: Settings panel:Save

按一下發行。 Visual Studio 會將您的應用程式發佈至 Azure。 部署完成時。

Last step

應用程式會在瀏覽器中開啟。 註冊新的使用者並以新使用者身分登入,以驗證資料庫部署和執行階段連線。

更新應用程式

  • 編輯 Pages/Index.cshtmlRazor 頁面並變更其內容,然後儲存變更。 例如,您可以修改段落使其說出 "Hello ASP.NET Core!":

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>Hello ASP.NET Core!</p>
    </div>
    
  • 再次從 [發佈設定檔摘要] 頁面選取 [發佈]

Publish profile summary page

  • 發佈應用程式之後,請重新整理頁面,並驗證您進行的變更在 Azure 上有效。

Verify task is complete

清除

當您完成測試應用程式時,請移至 Azure 入口網站並刪除應用程式。

  • 選取 [資源群組],然後選取您建立的資源群組。

Azure Portal: Resource Groups in sidebar menu

  • 在 [資源群組] 頁面中,選取 [刪除資源群組]

Azure Portal: Resource Groups page

  • 輸入資源群組的名稱,並選取 [刪除]。 您在本教學課程中建立的應用程式和其他所有資源都會立即從 Azure 中刪除。

其他資源