자습서: Azure SQL Database를 사용하여 Azure에 ASP.NET 앱 배포

Azure App Service는 확장성 높은 자체 패치 웹 호스팅 서비스를 제공합니다. 이 자습서에서는 App Service에서 데이터 기반 ASP.NET 앱을 개발하고 Azure SQL Database에 연결하는 방법을 보여줍니다. 완료되면 ASP.NET 앱이 Azure에서 실행되고 SQL Database에 연결됩니다.

Published ASP.NET application in Azure App Service

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

  • Azure SQL Database에서 데이터베이스 만들기
  • SQL Database에 ASP.NET 앱 연결
  • Azure에 앱 배포
  • 데이터 모델 업데이트 및 앱 다시 배포
  • Azure에서 터미널로 로그 스트림

Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.

사전 요구 사항

이 자습서를 완료하려면 다음이 필요합니다.

ASP.NET과 웹 개발Azure 개발 워크로드와 함께 Visual Studio 2022 설치.

Visual Studio가 이미 설치된 경우 도구>도구 및 기능 가져오기를 클릭하여 Visual Studio에서 워크로드를 추가합니다.

샘플 다운로드

  1. 샘플 프로젝트를 다운로드합니다.

  2. dotnet-sqldb-tutorial-master.zip 파일을 추출(압축 해제)합니다.

샘플 프로젝트에는 Entity Framework Code First를 사용하는 기본 ASP.NET MVC CRUD(Create-Read-Update-Delete) 앱이 포함되어 있습니다.

앱 실행

  1. Visual Studio에서 dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln 파일을 엽니다.

  2. F5를 입력하여 앱을 실행합니다. 앱이 기본 브라우저에 표시됩니다.

    참고 항목

    Visual Studio 및 필수 구성 요소만 설치한 경우 NuGet을 통해 누락된 패키지를 설치해야 할 수 있습니다.

  3. 새로 만들기 링크를 선택하고 두 개의 할 일 항목을 만듭니다.

    New ASP.NET Project dialog box

  4. Edit, DetailsDelete 링크를 테스트합니다.

앱은 데이터베이스 컨텍스트를 사용하여 데이터베이스에 연결합니다. 이 샘플의 데이터베이스 컨텍스트에는 MyDbConnection이라는 연결 문자열이 사용됩니다. 연결 문자열은 Web.config 파일에서 설정되고 Models\MyDatabaseContext.cs 파일에서 참조됩니다. 연결 문자열 이름은 이 자습서의 뒷부분에서 Azure 앱을 Azure SQL Database에 연결하는 데 사용됩니다.

Azure에 ASP.NET 애플리케이션 게시

  1. 솔루션 탐색기에서 DotNetAppSqlDb 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

    Publish from Solution Explorer

  2. 대상으로 Azure를 선택하고 다음을 클릭합니다.

  3. Azure App Service(Windows)를 선택했는지 확인하고 다음을 클릭합니다.

로그인 및 앱 추가

  1. 게시 대화 상자에서 로그인을 클릭합니다.

  2. Azure 구독에 로그인합니다. 이미 Microsoft 계정에 로그인한 경우 계정에 Azure 구독이 있는지 확인합니다. 로그인된 Microsoft 계정에 Azure 구독이 없는 경우 클릭하여 올바른 계정을 추가합니다.

  3. App Service 인스턴스 창에서 +를 클릭합니다.

    Sign in to Azure

웹앱 이름 구성

생성된 웹앱 이름을 유지하거나 다른 고유한 이름으로 변경할 수 있습니다(유효한 문자: a-z, 0-9-). 웹앱 이름은 앱의 기본 URL(<app_name>.azurewebsites.net, 여기서 <app_name>는 웹앱 이름)의 일부로 사용됩니다. 웹앱 이름은 Azure의 모든 앱에서 고유해야 합니다.

참고 항목

아직 만들기를 선택하지 않습니다.

Create app service dialog

리소스 그룹 만들기

리소스 그룹은 웹앱, 데이터베이스, 스토리지 계정과 같은 Azure 리소스가 배포되고 관리되는 논리적 컨테이너입니다. 예를 들어 나중에 간단한 단계 하나만으로 전체 리소스 그룹을 삭제하도록 선택할 수 있습니다.

  1. 리소스 그룹 옆에 있는 새로 만들기를 클릭합니다.

    Next to Resource Group, click New.

  2. 리소스 그룹 이름을 myResourceGroup으로 지정합니다.

App Service 플랜 만들기

App Service 계획은 위치, 크기 및 앱을 호스트하는 웹 서버 팜의 기능을 지정합니다. 단일 App Service 요금제를 공유하도록 웹앱을 구성하여 여러 앱을 호스팅하는 비용을 절감할 수 있습니다.

App Service 계획은 다음을 정의합니다.

  • 지역 (예: 북유럽, 미국 동부 또는 동남 아시아)
  • 인스턴스 크기(소, 중, 대)
  • 확장 개수(1~20개 인스턴스)
  • SKU(무료, 공유, 기본, 표준 또는 프리미엄)
  1. 호스팅 계획 옆에 있는 새로 만들기를 클릭합니다.

  2. App Service 요금제 구성 대화 상자에서 다음 설정을 사용하여 새 App Service 요금제를 구성하고 확인을 클릭합니다.

    설정 제안 값 자세한 정보
    App Service 계획 myAppServicePlan App Service 계획
    위치 서유럽 Azure 지역
    크기 Free 가격 책정 계층

    Create App Service plan

  3. 만들기를 클릭하고 Azure 리소스가 만들어질 때까지 기다립니다.

  4. 게시 대화 상자에서 구성한 리소스를 표시합니다. Finish를 클릭합니다.

    the resources you've created

서버 및 데이터베이스 만들기

먼저 논리 SQL 서버가 있어야 데이터베이스를 만들 수 있습니다. 논리 SQL 서버는 그룹으로 관리되는 데이터베이스 그룹을 포함하는 논리적 구조입니다.

  1. 게시 대화 상자에서 서비스 종속성 섹션까지 아래로 스크롤합니다. SQL Server 데이터베이스 옆에 있는 구성을 클릭합니다.

    참고 항목

    연결된 서비스 페이지 대신 게시 페이지에서 SQL Database를 구성해야 합니다.

    Configure SQL Database dependency

  2. Azure SQL Database를 선택하고 다음을 클릭합니다.

  3. Azure SQL Database 구성 대화 상자에서 +를 클릭합니다.

  4. 데이터베이스 서버 옆에 있는 새로 만들기를 클릭합니다.

    서버 이름은 서버에 대한 기본 URL(<server_name>.database.windows.net)의 일부로 사용되며, Azure SQL의 모든 서버에서 고유해야 합니다. 서버 이름을 원하는 값으로 변경합니다.

  5. 관리자 사용자 이름 및 암호를 추가합니다. 암호 복잡성 요구 사항은 암호 정책을 참조하세요.

    이 사용자 이름과 암호를 기억해 두세요. 이후 서버를 관리할 때 필요합니다.

    Create server

    Important

    연결 문자열의 암호가 마스킹되었지만(Visual Studio 및 App Service에서도) 어딘가에서 유지 관리되기 때문에 앱의 공격 노출 영역이 늘어납니다. App Service는 관리되는 서비스 ID를 사용하기 때문에 코드 또는 앱 구성의 비밀을 유지 관리할 필요가 전혀 없어 이러한 위험이 사라집니다. 자세한 내용은 다음 단계를 참조하세요.

  6. 확인을 클릭합니다.

  7. Azure SQL Database 대화 상자에서 기본 생성된 데이터베이스 이름을 유지합니다. 만들기를 클릭하고 데이터베이스 리소스가 만들어질 때까지 기다립니다.

    Configure database

데이터베이스 연결 구성

  1. 마법사가 데이터베이스 리소스 만들기를 완료하면 다음을 클릭합니다.

  2. 데이터베이스 연결 문자열 이름MyDbConnection을 입력합니다. 이 이름은 Models\MyDatabaseContext.cs에서 참조되는 연결 문자열과 일치해야 합니다.

  3. 데이터베이스 연결 사용자 이름데이터베이스 연결 암호서버 만들기에서 사용한 관리자 사용자 이름과 암호를 입력합니다.

  4. Azure 앱 설정이 선택되었는지 확인하고 마침을 클릭합니다.

    참고 항목

    대신 로컬 사용자 비밀 파일이 표시되는 경우 게시 페이지 대신 연결된 서비스 페이지에서 SQL Database를 구성해야 합니다.

    Configure database connection string

  5. 구성 마법사가 완료될 때까지 기다렸다가 닫기를 클릭합니다.

ASP.NET 앱 배포

  1. 게시 탭에서 다시 맨 위로 스크롤하고 게시를 클릭합니다. ASP.NET 앱이 Azure에 배포됩니다. 기본 브라우저가 배포된 앱에 대한 URL로 시작됩니다.

  2. 몇 가지 할 일 항목을 추가합니다.

    Published ASP.NET application in Azure app

    축하합니다! 데이터 기반 ASP.NET 애플리케이션이 Azure App Service에서 라이브로 실행되고 있습니다.

로컬에서 데이터베이스 접속

Visual Studio를 사용하면 SQL Server 개체 탐색기에서 Azure의 새 데이터베이스를 쉽게 탐색하고 관리할 수 있습니다. 새 데이터베이스는 사용자가 만든 App Service 앱에 대한 방화벽을 이미 열었습니다. 하지만 로컬 머신(예: Visual Studio)에서 액세스하려면 로컬 머신의 공용 IP 주소에 대한 방화벽을 열어야 합니다. 인터넷 서비스 공급자가 공용 IP 주소를 변경하는 경우 Azure 데이터베이스에 다시 액세스하도록 방화벽을 다시 구성해야 합니다.

데이터베이스 연결 만들기

  1. 보기 메뉴에서 SQL Server 개체 탐색기를 선택합니다.

  2. SQL Server 개체 탐색기 맨 위에 있는 SQL Server 추가 단추를 클릭합니다.

데이터베이스 연결 구성

  1. 연결 대화 상자에서 Azure 노드를 확장합니다. 여기서는 Azure의 모든 SQL Database 인스턴스가 나열됩니다.

  2. 이전에 만든 데이터베이스를 선택합니다. 앞에서 만든 연결이 맨 아래쪽에 자동으로 채워집니다.

  3. 이전에 사용한 데이터베이스 관리자 암호를 입력하고 연결을 클릭합니다.

    Configure database connection from Visual Studio

컴퓨터에서 클라이언트 연결 허용

새 방화벽 규칙 만들기 대화 상자가 열립니다. 기본적으로 서버는 Azure 앱과 같은 Azure 서비스에서 해당 데이터베이스로의 연결만 허용합니다. Azure 외부에서 데이터베이스에 연결하려면 서버 수준에서 방화벽 규칙을 만듭니다. 방화벽 규칙에는 로컬 컴퓨터의 공용 IP 주소가 허용됩니다.

대화 상자가 컴퓨터의 공용 IP 주소로 이미 채워져 있습니다.

  1. 내 클라이언트 IP 추가가 선택되어 있는지 확인하고 확인을 클릭합니다.

    Create firewall rule

    Visual Studio에서 SQL Database 인스턴스에 대한 방화벽 설정을 만든 후에 SQL Server 개체 탐색기에 연결이 표시됩니다.

    여기에서 쿼리 실행, 뷰 및 저장 프로시저 만들기 등의 가장 일반적이 데이터베이스 작업을 수행할 수 있습니다.

  2. 연결 >데이터베이스><데이터베이스>>테이블로 확장합니다. Todoes 테이블을 마우스 오른쪽 단추로 클릭하고 데이터 보기를 선택합니다.

    Explore SQL Database objects

Code First 마이그레이션으로 앱 업데이트

Visual Studio의 친숙한 도구를 사용하여 Azure에서 데이터베이스 및 앱을 업데이트할 수 있습니다. 이 단계에서는 Entity Framework에서 Code First 마이그레이션을 사용하여 데이터베이스 스키마를 변경하고 Azure에 게시합니다.

Entity Framework Code First 마이그레이션 사용에 대한 자세한 내용은 MVC 5를 사용하여 Entity Framework 6 Code First 시작을 참조하세요.

데이터 모델 업데이트

코드 편집기에서 Models\Todo.cs를 엽니다. 다음 속성을 ToDo 클래스에 추가합니다.

public bool Done { get; set; }

Code First 마이그레이션을 로컬에서 실행

몇 가지 명령을 실행하여 로컬 데이터베이스를 업데이트합니다.

  1. 도구 메뉴에서 NuGet 패키지 관리>패키지 관리자 콘솔을 클릭합니다.

  2. [패키지 관리자 콘솔] 창에서 Code First 마이그레이션을 사용하도록 설정합니다.

    Enable-Migrations
    
  3. 마이그레이션을 추가합니다.

    Add-Migration AddProperty
    
  4. 로컬 데이터베이스를 업데이트합니다.

    Update-Database
    
  5. Ctrl+F5를 입력하여 앱을 실행합니다. 편집, 세부 정보 및 만들기 링크를 테스트합니다.

애플리케이션이 오류 없이 로드되면 Code First 마이그레이션이 성공한 것입니다. 그러나 애플리케이션 논리에서 이 새로운 속성을 아직 사용하지 않기 때문에 페이지가 여전히 동일하게 표시될 수 있습니다.

새 속성 사용

Done 속성을 사용하도록 코드를 약간 변경합니다. 이 자습서에서는 간단하게 IndexCreate 보기만 변경하여 속성의 실제 작동을 확인합니다.

  1. Controllers\TodosController.cs를 엽니다.

  2. 줄 52에서 Create() 메서드를 찾고 DoneBind 특성의 속성 목록에 추가합니다. 완료되면 Create() 메서드 시그니처가 다음 코드와 같이 표시됩니다.

    public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
    
  3. Views\Todos\Create.cshtml을 엽니다.

  4. Razor 코드에서 model.Description을 사용하는 <div class="form-group"> 요소가 표시된 다음 model.CreatedDate를 사용하는 또 다른 <div class="form-group"> 요소가 표시되어 있습니다. 이러한 두 요소 바로 뒤에 model.Done을 사용하는 또 다른 <div class="form-group"> 요소를 추가합니다.

    <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. Views\Todos\Index.cshtml을 엽니다.

  6. <th></th> 요소를 검색합니다. 이 요소 바로 위에 다음 Razor 코드를 추가합니다.

    <th>
        @Html.DisplayNameFor(model => model.Done)
    </th>
    
  7. Html.ActionLink() 도우미 메서드가 포함된 <td> 요소를 찾습니다. 이 <td>위에 다음 Razor 코드가 포함된 다른 <td> 요소를 추가합니다.

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

    IndexCreate 보기에서 변경 내용을 확인하기만 하면 됩니다.

  8. Ctrl+F5를 입력하여 앱을 실행합니다.

이제 할 일 항목을 추가하고 완료를 확인할 수 있습니다. 그러면 홈페이지에 완료된 항목으로 표시됩니다. Edit 보기를 변경하지 않았으므로 Edit 보기에서 Done 필드가 표시되지 않습니다.

Azure에서 Code First 마이그레이션 사용

데이터베이스 마이그레이션을 비롯하여 코드 변경이 수행되었으므로 Azure 앱에 게시하고 Code First 마이그레이션을 사용하여 SQL Database도 업데이트합니다.

  1. 이전과 마찬가지로 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

  2. 추가 작업>편집을 클릭하여 게시 설정을 엽니다.

    Open publish settings

  3. MyDatabaseContext 드롭다운에서 Azure SQL Database에 대한 데이터베이스 연결을 선택합니다.

  4. Execute Code First Migrations (runs on application start)(Code First 마이그레이션 실행(애플리케이션 시작 시 실행))를 선택한 다음, 저장을 클릭합니다.

    Enable Code First Migrations in Azure app

변경 내용 게시

이제 Azure 앱에서 Code First 마이그레이션을 사용하도록 설정했으므로 코드 변경 내용을 게시합니다.

  1. 게시 페이지에서 게시를 클릭합니다.

  2. 할 일 항목 추가를 다시 시도하고 Done(완료)을 선택합니다. 그러면 홈페이지에 완료된 항목으로 표시되어야 합니다.

    Azure app after Code First Migration

기존의 모든 할 일 항목이 계속 표시됩니다. ASP.NET 애플리케이션을 다시 게시해도 SQL Database의 기존 데이터가 손실되지 않습니다. 또한 Code First 마이그레이션은 데이터 스키마만 변경하고 기존 데이터는 그대로 유지합니다.

애플리케이션 로그 스트림

Azure 앱에서 직접 Visual Studio로 추적 메시지를 스트림할 수 있습니다.

Controllers\TodosController.cs를 엽니다.

각 동작은 Trace.WriteLine() 메서드로 시작됩니다. 이 코드는 Azure 앱에 추적 메시지를 추가하는 방법을 보여주기 위해 추가되었습니다.

로그 스트리밍 사용

  1. 게시 페이지에서 호스팅 섹션까지 아래로 스크롤합니다.

  2. 오른쪽 모서리에서 ...>스트리밍 로그 보기를 클릭합니다.

    Enable log streaming

    이제 로그가 출력 창으로 스트리밍됩니다.

    Log streaming in Output window

    그러나 추적 메시지가 아직 표시되지 않습니다. 스트리밍 로그 보기를 먼저 선택하면 Azure 앱에서 추적 수준을 Error로 설정하여 Trace.TraceError() 메서드로 생성된 오류 이벤트만 로깅하기 때문입니다.

추적 수준 변경

  1. 다른 추적 메시지를 출력하도록 추적 수준을 변경하려면 게시 페이지로 돌아갑니다.

  2. 호스팅 섹션에서 ...>Azure Portal에서 열기를 클릭합니다.

  3. 앱의 포털 관리 페이지 왼쪽 메뉴에서 App Service 로그를 선택합니다.

  4. Application Logging(파일 시스템) 아래의 수준에서 자세히를 선택합니다. 저장을 클릭합니다.

    다양한 추적 수준을 사용하여 각 수준에서 표시되는 메시지 종류를 확인할 수 있습니다. 예를 들어 정보 수준에는 Trace.TraceInformation(), Trace.TraceWarning()Trace.TraceError()로 생성된 모든 로그가 포함되지만 Trace.WriteLine()으로 생성된 로그는 포함되지 않습니다.

  5. 브라우저에서 http://<your app name>.azurewebsites.net에 있는 앱으로 다시 이동한 다음, Azure에서 할 일 목록 애플리케이션 주위를 클릭해 보세요. 추적 메시지가 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
    

로그 스트리밍 중지

로그 스트리밍 서비스를 중지하려면 출력 창에서 모니터링 중지 단추를 클릭합니다.

Stop log streaming

리소스 정리

이전 단계에서는 리소스 그룹에서 Azure 리소스를 만들었습니다. 나중에 이러한 리소스가 필요하지 않은 경우에 리소스 그룹을 삭제하여 삭제할 수 있습니다.

  1. Azure Portal의 웹앱 개요 페이지에서 리소스 그룹 아래에 있는 myResourceGroup 링크를 선택합니다.
  2. 리소스 그룹 페이지에서 나열된 리소스가 삭제하려는 항목인지 확인합니다.
  3. 삭제를 선택하고, 텍스트 상자에 myResourceGroup을 입력한 다음, 삭제를 선택합니다.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

  • Azure SQL Database에서 데이터베이스 만들기
  • SQL Database에 ASP.NET 앱 연결
  • Azure에 앱 배포
  • 데이터 모델 업데이트 및 앱 다시 배포
  • Azure에서 터미널로 로그 스트림

연결 Azure SQL Database의 보안을 쉽게 개선하는 방법을 알아보려면 다음 자습서로 이동합니다.

추가 리소스:

클라우드 비용을 최적화하여 비용을 절감하고 싶습니까?