Självstudie: Distribuera en ASP.NET-app till Azure med Azure SQL Database

  • Artikel

Med Azure App Service får du en automatiskt uppdaterad webbvärdtjänst med hög skalbarhet. Den här självstudien visar hur du distribuerar en datadriven ASP.NET-app i App Service och ansluter den till Azure SQL Database. När du är klar har du en ASP.NET app som körs i Azure och är ansluten till SQL Database.

Published ASP.NET application in Azure App Service

I den här självstudien lär du dig att:

  • Skapa en databas i Azure SQL Database
  • Ansluta en ASP.NET-app till SQL Database
  • distribuera appen till Azure
  • uppdatera datamodellen och distribuera om appen
  • strömma loggar från Azure till terminalen

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-konto innan du börjar.

Förutsättningar

För att slutföra den här kursen behöver du:

Installera Visual Studio 2022 med arbetsbelastningarna ASP.NET och webbutveckling och Azure Development .

Om du redan har installerat Visual Studio lägger du till arbetsbelastningarna i Visual Studio genom att klicka på Tools (Verktyg)>Get Tools and Features (Skaffa verktyg och funktioner).

Hämta exemplet

  1. Ladda ned exempelprojektet.

  2. Extrahera (zippa upp) filen dotnet-sqldb-tutorial-master.zip.

Exempelprojektet innehåller en enkel ASP.NET MVC CRUD-app (create-read-update-delete) som använder Entity Framework Code First.

Kör appen

  1. Öppna filen dotnet-sqldb-kursen-master/DotNetAppSqlDb.sln i Visual Studio.

  2. Skriv F5 för att köra appen. Appen visas i din standardwebbläsare.

    Kommentar

    Om du bara har installerat Visual Studio och kraven kan du behöva installera paket som saknas via NuGet.

  3. Välj länken Skapa nytt och skapa några att-göra-objekt.

    New ASP.NET Project dialog box

  4. Testa länkarna Edit (Redigera), Details (Information) och Delete (Ta bort).

Appen använder en databaskontext för att ansluta till databasen. I det här exemplet använder databaskontexten en anslutningssträng med namnet MyDbConnection. Anslutningssträngen har angetts i filen Web.config och refereras till i filen Models/MyDatabaseContext.cs. Anslutningssträngens namn används senare under självstudien för att ansluta Azure-appen till Azure SQL Database.

Publicera ASP.NET program till Azure

  1. I Solution Explorer: Högerklicka på projektet DotNetAppSqlDb och välj Publicera.

    Publish from Solution Explorer

  2. Välj Azure som mål och klicka på Nästa.

  3. Kontrollera att Azure App Service (Windows) är markerat och klicka på Nästa.

Logga in och lägg till en app

  1. I dialogrutan Publicera klickar du på Logga in.

  2. Logga in på din Azure-prenumeration. Om du redan är inloggad på ett Microsoft-konto kontrollerar du att kontot tillhör din Azure-prenumeration. Om kontot inte tillhör din Azure-prenumeration klickar du på den för att lägga till rätt konto.

  3. I fönstret App Service-instanser klickar du på +.

    Sign in to Azure

Konfigurera webbappnamnet

Du kan behålla det genererade webbappnamnet eller ändra det till ett annat unikt namn (giltiga tecken är a-z, 0-9 och -). Webbappnamnet används som en del av standard-URL:en för din app (<app_name>.azurewebsites.net, där <app_name> är webbappnamnet). Webbappnamnet måste vara unikt inom alla appar i Azure.

Kommentar

Välj inte Skapa ännu.

Create app service dialog

Skapa en resursgrupp

En resursgrupp är en logisk container där Azure-resurser, till exempel webbappar, databaser och lagringskonton, distribueras och hanteras. Du kan exempelvis välja att ta bort hela resursgruppen i ett enkelt steg längre fram.

  1. Klicka på Ny bredvid Resursgrupp.

    Next to Resource Group, click New.

  2. Ge resursgruppen namnet myResourceGroup.

Skapa en App Service-plan

En App Service-plan anger plats, storlek och funktioner för webbservergruppen som är värd för din app. Du kan spara pengar när du är värd för flera appar genom att konfigurera webbapparna så att de delar en enda App Service-plan.

App Service-planer definierar följande:

  • Region (till exempel: Europa, norra; USA, östra; Asien, sydöstra m.m.)
  • Instansstorlek (liten, medel eller stor)
  • Skalningsantal (1 till 20 instanser)
  • SKU (Kostnadsfri, Delad, Basic, Standard eller Premium)

  1. Bredvid Värdplan klickar du på Ny.

  2. I dialogrutan Konfigurera App Service-plan konfigurerar du den nya App Service-planen med följande inställningar och klickar på OK:

    Inställning Föreslaget värde Mer information
    App Service-plan myAppServicePlan App Service-planer
    Location Europa, västra Azure-regioner
    Storlek Kostnadsfritt Prisnivåer

    Create App Service plan

  3. Klicka på Skapa och vänta tills Azure-resurserna har skapats.

  4. Dialogrutan Publicera visar de resurser som du har konfigurerat. Klicka på Finish.

    the resources you've created

Skapa en server och en databas

Innan du skapar en databas behöver du en logisk SQL-server. En logisk SQL-server är en logisk konstruktion som innehåller en grupp databaser som hanteras som en grupp.

  1. I dialogrutan Publicera rullar du ned till avsnittet Tjänstberoenden. Bredvid SQL Server Database klickar du på Konfigurera.

    Kommentar

    Se till att konfigurera SQL Database från sidan Publicera i stället för sidan Anslut ed Services.

    Configure SQL Database dependency

  2. Välj Azure SQL Database och klicka på Nästa.

  3. I dialogrutan Konfigurera Azure SQL Database klickar du på +.

  4. Bredvid Databasservern klickar du på Ny.

    Servernamnet används som en del av standard-URL:en för servern, <server_name>.database.windows.net. Den måste vara unik för alla servrar i Azure SQL. Ändra servernamnet till ett värde som du vill ha.

  5. Lägg till ett användarnamn och lösenord med administratörsbehörighet. För krav på lösenordskomplexitet, se Lösenordsprincip.

    Kom ihåg det här användarnamnet och lösenordet. Du behöver dem för att hantera servern senare.

    Create server

    Viktigt!

    Även om ditt lösenord maskeras i anslutningssträngar (i Visual Studio och i App Service) så ökar din apps riskexponering eftersom lösenordet är sparat någonstans. App Service kan använda hanterade tjänstidentiteter till att eliminera den här risken, eftersom du inte behöver ha med några hemligheter alls i koden eller appkonfigurationen. Mer information finns under Nästa steg.

  6. Klicka på OK.

  7. Behåll det standardgenererade databasnamnet i dialogrutan Azure SQL Database. Välj Skapa och vänta tills databasresurserna har skapats.

    Configure database

Konfigurera databasanslutning

  1. När guiden har skapat databasresurserna klickar du på Nästa.

  2. Skriv MyDb Anslut ion i Namnet på databasen anslutningssträng. Det här namnet måste överensstämma med den anslutningssträng som refereras till i Models/MyDatabaseContext.cs.

  3. I Databasanslutningsanvändarnamn och Lösenord för databasanslutning skriver du administratörens användarnamn och lösenord som du använde i Skapa en server.

  4. Kontrollera att Azure App Inställningar är markerat och klicka på Slutför.

    Kommentar

    Om du ser filer med lokala användarhemligheter i stället måste du ha konfigurerat SQL Database från sidan Anslut ed Services i stället för sidan Publicera.

    Configure database connection string

  5. Vänta tills konfigurationsguiden är klar och klicka på Stäng.

Distribuera din ASP.NET-app

  1. På fliken Publicera rullar du tillbaka upp till toppen och klickar på Publicera. När din ASP.NET app har distribuerats till Azure. Din standardwebbläsare startas med URL:en till den distribuerade appen.

  2. Lägg till några att-göra-uppgifter.

    Published ASP.NET application in Azure app

    Gratulerar! Din datadrivna ASP.NET-app körs live i Azure App Service.

Få åtkomst till databasen lokalt

Med Visual Studio kan du enkelt utforska och hantera din nya databas i Azure i SQL Server Object Explorer. Den nya databasen har redan öppnat brandväggen för App Service-appen som du skapade. Men för att komma åt den från din lokala dator (till exempel från Visual Studio) måste du öppna en brandvägg för den lokala datorns offentliga IP-adress. Om internetleverantören ändrar din offentliga IP-adress måste du konfigurera om brandväggen för att få åtkomst till Azure-databasen igen.

Skapa en databasanslutning

  1. Gå till Visa-menyn och välj SQL Server Object Explorer.

  2. Klicka högst upp i SQL Server Object Explorer på knappen Add SQL Server (Lägg till SQL Server).

Konfigurera databasanslutningen

  1. Visa noden Azure i dialogrutan Connect (Anslut). Alla dina SQL Database-instanser i Azure visas här.

  2. Välj den databas som du skapade tidigare. Den anslutning som du skapade tidigare fylls i automatiskt längst ned.

  3. Ange databasadministratörens lösenord som du skapade tidigare och klicka på Connect (Anslut).

    Configure database connection from Visual Studio

Tillåta klientanslutning från datorn

Dialogrutan Create a new firewall rule (Skapa en ny brandväggsregel) öppnas. Som standard tillåter en server endast anslutningar till sina databaser från Azure-tjänster, till exempel din Azure-app. Om du vill ansluta till databasen utanför Azure skapar du en brandväggsregel på servernivå. Brandväggsregeln tillåter din lokala dators offentliga IP-adress.

Dialogrutan är redan ifylld med datorns offentliga IP-adress.

  1. Se till att Add my client IP (Lägg till min klient-IP) är markerat och klicka på OK.

    Create firewall rule

    När Visual Studio har skapat brandväggsinställningen för SQL Database-instansen visas anslutningen i SQL Server Object Explorer.

    Här kan du utföra de vanligaste databasåtgärderna, till exempel köra frågor, skapa vyer och lagrade procedurer och mycket mer.

  2. Expandera din anslutning >Databaser databastabeller>><>. Högerklicka på tabellen Todoes och välj Visa data.

    Explore SQL Database objects

Uppdatera app med Code First Migrations

Du kan använda välbekanta verktyg i Visual Studio för att uppdatera din databas och app i Azure. I det här steget använder du Code First Migrations i Entity Framework för att göra en ändring i databasschemat och publicera det i Azure.

Mer information om att använda Entity Framework Code First Migrations finns i artikeln om att komma igång med Entity Framework 6 Code First med MVC 5.

Uppdatera datamodellen

Öppna Models\Todo.cs i kodredigeraren. Lägg till följande egenskap i klassen ToDo:

public bool Done { get; set; }

Kör Code First Migrations lokalt

Kör några kommandon och gör uppdateringar i den lokala databasen.

  1. Gå till Verktyg-menyn och klicka på NuGet Package Manager>Package Manager-konsolen.

  2. Aktivera Code First Migrations i fönstret Package Manager-konsolen:

    Enable-Migrations

  3. Lägg till en migrering:

    Add-Migration AddProperty

  4. Uppdatera den lokala databasen:

    Update-Database

  5. Skriv Ctrl+F5 för att köra appen. Testa länkarna Edit (Redigera), Details (Information) och Create (Skapa).

Om programmet läses in utan fel har Code First Migrations slutförts. Sidan ser dock fortfarande likadan ut eftersom programlogik inte använder den här nya egenskapen ännu.

Använda den nya egenskapen

Gör några ändringar i koden så att du använder egenskapen Done. För att göra självstudien enklare ska du bara ändra vyerna Index och Create så att du ser hur egenskapen fungerar.

  1. Öppna Controllers\TodosController.cs.

  2. Leta upp metoden Create() på rad 52 och lägg till Done i egenskapslistan i attributet Bind. När du är klar ser signaturen för metoden Create() ut som följande kod:

    public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)

  3. Öppna Views\Todos\Create.cshtml.

  4. I Razor-koden bör du se ett <div class="form-group">-element som använder model.Description och sedan ett annat <div class="form-group">-element som använder model.CreatedDate. Direkt efter dessa två element ska du lägga till ett annat <div class="form-group">-element som använder model.Done:

    <div class="form-group">
    @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkbox">
            @Html.EditorFor(model => model.Done)
            @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

  5. Öppna Views\Todos\Index.cshtml.

  6. Sök efter det tomma <th></th>-elementet. Lägg till följande Razor-kod direkt ovanför det här elementet:

    <th>
    @Html.DisplayNameFor(model => model.Done)
</th>

  7. Leta upp <td>-elementet som innehåller hjälpmetoderna Html.ActionLink(). Ovanför detta <td> ska du lägga till ett <td>-element med följande Razor-kod:

    <td>
    @Html.DisplayFor(modelItem => item.Done)
</td>

    Det är allt som krävs för att du ska se ändringarna i vyerna Index och Create.

  8. Skriv Ctrl+F5 för att köra appen.

Du kan nu lägga till en att-göra-uppgift och markera Klart. Den ska sedan visas på din startsida som en slutförd uppgift. Kom ihåg att vyn Edit inte innehåller fältet Done eftersom du inte ändrade vyn Edit.

Aktivera Code First Migrations i Azure

Nu när kodändringen fungerar, inklusive databasmigreringen, publicerar du den i din Azure-app och uppdaterar även din SQL Database med Code First Migrations.

  1. Precis som tidigare högerklickar du på projektet och väljer Publish (Publicera).

  2. Klicka på Fler åtgärder>Redigera för att öppna publiceringsinställningarna.

    Open publish settings

  3. I listrutan MyDatabaseContext väljer du databasanslutningen för din Azure SQL Database.

  4. Välj Execute Code First Migrations (runs on application start) (Utför Code First Migrations (körs när programmet startar)) och klicka på Save (Spara).

    Enable Code First Migrations in Azure app

Publicera dina ändringar

Nu när du har aktiverat Code First Migrations i Azure-appen kan du publicera kodändringarna.

  1. Klicka på Publicera på publiceringssidan.

  2. Försök att lägga till uppgifter att göra igen och välj Done (Klar). De ska då visas på din startsida som en slutförd punkt.

    Azure app after Code First Migration

Alla befintliga att-göra-uppgifter visas fortfarande. När du publicerar om ditt ASP.NET program går inte befintliga data i SQL Database förlorade. Code First Migrations ändrar dessutom endast dataschemat, så att befintliga data lämnas intakta.

Strömma programloggar

Du kan strömma spårningsmeddelanden direkt från din Azure-app till Visual Studio.

Öppna Controllers\TodosController.cs.

Varje åtgärd börjar med en Trace.WriteLine()-metod. Den här koden har lagts till för att visa hur du lägger till spårningsmeddelanden i din Azure-app.

Aktivera loggströmning

  1. Rulla ned till avsnittet Värd på publiceringssidan.

  2. I det högra hörnet klickar du på ...>Visa direktuppspelningsloggar.

    Enable log streaming

    Loggarna strömmas nu till fönstret Output (Utdata).

    Log streaming in Output window

    Men än ser du inga spårningsmeddelanden. Det beror på att när du väljer View Streaming Logs (Visa strömningsloggar) anges spårningsnivån i Azure-appen till Error, då endast felhändelser loggas (med Trace.TraceError()-metoden).

Ändra spårningsnivåer

  1. Om du vill ändra spårningsnivåer för att mata ut andra spårningsmeddelanden går du tillbaka till publiceringssidan.

  2. I avsnittet Värd klickar du på ...>Öppna i Azure-portalen.

  3. På sidan för portalhantering för din app går du till den vänstra menyn och väljer App Service-loggar.

  4. Under Programloggning (filsystem) väljer du Utförlig i Nivå. Klicka på Spara.

    Dricks

    Du kan experimentera med olika spårningsnivåer och se vilka typer av meddelanden som visas för varje nivå. Till exempel omfattar nivån Information alla loggar som skapats av Trace.TraceInformation(), Trace.TraceWarning() och Trace.TraceError(), men inte loggar som skapats av Trace.WriteLine().

  5. I webbläsaren navigerar du till din app igen på http://< din appnamn.azurewebsites.net> och försöker sedan klicka runt att göra-listprogrammet i Azure. Spårningsmeddelanden strömmas nu till fönstret Output (Utdata) i Visual Studio.

    Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index

Stoppa loggströmning

Om du vill avsluta loggströmningstjänsten klickar du på knappen Stop monitoring (Stoppa övervakning) i fönstret Output (Utdata).

Stop log streaming

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden, kan du ta bort dem genom att ta bort resursgruppen.

  1. Från ditt webbprograms Översiktsida i Azure portal väljer du länken myResourceGroup under resursgruppen.
  2. Kontrollera att resurser på resursgruppsidan är de som du vill ta bort.
  3. Välj Ta bort, skriv myResourceGroup i textrutan och välj sedan Ta bort.

Nästa steg

I den här självstudiekursen lärde du dig att:

  • Skapa en databas i Azure SQL Database
  • Ansluta en ASP.NET-app till SQL Database
  • distribuera appen till Azure
  • uppdatera datamodellen och distribuera om appen
  • strömma loggar från Azure till terminalen

Gå vidare till nästa självstudie där du får lära dig hur du enkelt kan förbättra säkerheten för din Azure SQL Database-anslutning.

Självstudie: Anslut till SQL Database från App Service utan hemligheter med hjälp av en hanterad identitet

Fler resurser:

Konfigurera ASP.NET app

Vill du optimera och spara på dina molnutgifter?

Börja analysera kostnader med Cost Management