Azure App Service의 Azure API 앱 및 Azure Mvc 웹앱

Azure App Service의 Azure API 앱 및 Azure Mvc 웹앱

이 문서에서는 Azure We App에 배포된 Azure API Apps 및 MVC 클라이언트를 만드는 방법을 알아봅니다. 이것은 Azure 앱 서비스의 다양한 구성 요소를 연결하는 매우 간단한 응용 프로그램이며, 이를 빌드하기 위해 Azure에서 Azure API 앱, Azure 웹 앱 및 SQL Server를 사용할 것입니다.

13min read

이 문서에서는 Azure We App에 배포된 Azure API Apps 및 MVC 클라이언트를 만드는 방법을 알아봅니다. 이것은 Azure 앱 서비스의 다양한 구성 요소를 연결하는 매우 간단한 응용 프로그램이며, 이를 빌드하기 위해 Azure에서 Azure API 앱, Azure 웹 앱 및 SQL Server를 사용할 것입니다.

응용 프로그램의 높은 수준의 아키텍처는 아래 이미지와 같이 그릴 수 있습니다.

응용 프로그램의 높은 수준의 아키텍처는 아래 이미지와 같이 그릴 수 있습니다

기본적으로 이 게시물에서는 다음 작업을 수행하는 방법을 배웁니다.

  • Make a SQL Connection in SQL database in Azure
  • Entity Framework 데이터베이스 우선 접근 방식을 사용하여 CRUD 작업을 스캐폴딩합니다.
  • Azure API 앱에서 작업 노출
  • Configure the swagger API and UI for metadata and API testing
  • Publish the Azure API App in Azure App Service
  • ASP.NET MVC 애플리케이션에서 Swagger 메타데이터 API를 사용하여 클라이언트 측 코드 만들기
  • MVC 응용 프로그램에서 생성된 클라이언트 코드를 사용하여 Azure의 SQL 데이터베이스에 있는 테이블에서 CRUD 작업 수행
  • Publish the ASP.NET MVC application in Azure Web App

이 게시물을 완료하면 Azure API 앱 및 MVC 기반 Azure 웹앱이 Azure 서비스에서 라이브로 실행되어야 합니다. 이 문서의 출력으로 Azure API 앱이 http://schoolapiapp.azurewebsites.net/swagger/ui/index에서 실행되고 있습니다. 또한 다음 URL에서 실행되는 MVC 기반 Azure Web App이 있습니다 http://mvcclientazureapiapp.azurewebsites.net/

이 예제에서는 Visual Studio 2015를 사용하고 있지만 Visual Studio 2013도 사용할 수 있습니다. Azure에 대한 구독도 필요하지만 무료 평가판을 받을 수 있습니다. 시작하자!

Azure API App

Azure API 앱을 만드는 것부터 시작하겠습니다. 개발 환경을 설정하려면 Azure SDK를 설치합니다. Visual Studio 2015용 Azure SDK는 여기에서 다운로드할 수 있고 Visual Studio 2013용 Azure SDK는 여기에서 다운로드할 수 있습니다.  성공적으로 설치한 후 아래 이미지와 같이 성공적으로 설치된 대화 상자가 표시됩니다.

성공적으로 설치한 후 이미지에 표시된 대로 성공적으로 설치된 대화 상자가 표시됩니다

이제 개발 환경이 첫 번째 Azure API 앱을 만들 준비가 되었습니다. 계속해서 New>-Project->ASP.NET Web Application을 선택하여 새 프로젝트를 만들어 보겠습니다. ASP.NET 웹 응용 프로그램에 적절한 이름을 지정하고 템플릿 대화 상자에서 아래 이미지와 같이 Azure API 앱을 선택합니다.

웹 응용 프로그램을 ASP.NET 하고 템플릿 대화 상자에서 이미지에 표시된 대로 Azure API 앱을 선택합니다.

프로젝트를 성공적으로 만든 후 다음을 수행합니다.

  1. Controller 폴더에서 ValuesController를 삭제합니다. 이 컨트롤러는 필요하지 않습니다.
  2. Models 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 항목을 추가합니다.

새 항목을 추가하려면 데이터 탭에서 ADO.NET 엔터티 모델을 선택하고 모델에 이름을 지정합니다. 여기서는 SchoolModel로 둡니다.

데이터 탭에서 ADO.NET Entity Model(엔티티 모델)을 선택하고 모델에 이름을 지정합니다. 여기서는 SchoolModel로 남겨 둡니다

이 단계의 엔터티 데이터 모델 마법사의 데이터베이스 옵션에서 EF 디자이너를 선택하고 아래 이미지와 같이 다음을 클릭합니다.

엔터티 데이터 모델 마법사의 데이터베이스 옵션에서 EF 디자이너를 선택하고 이미지에 표시된 대로 다음을 클릭합니다

여기서 잠시 시간을 내어 다음 단계에서 무엇을 할 것인지 이해해 보겠습니다. 여기서는 Azure의 SQL 데이터베이스 내에 있는 School 데이터베이스에 연결합니다.

여기에서는 Azure의 SQL 데이터베이스 내에 있는 School 데이터베이스에 연결합니다

Azure에서 SQL 데이터베이스에 연결하려면 다음 작업을 수행해야 합니다.

  • Azure Portal에서 데이터베이스 서버 방화벽 규칙에 클라이언트 IP를 추가합니다
  • Azure에서 데이터베이스 서버 이름 제공
  • SQL Server 인증을 사용하여 사용자 이름 및 암호 제공
  • 필요한 데이터베이스를 선택하고 확인을 클릭합니다.

아래 이미지를 참조하여 Azure의 데이터베이스에 연결하기 위한 정보를 제공할 수 있습니다.

아래 이미지를 참조하여 Azure의 데이터베이스에 연결하기 위한 정보를 제공할 수 있습니다

Azure 데이터베이스 서버에 연결하기 위해 사용자 이름 및 암호와 같은 중요한 정보를 제공했기 때문에 Entity DataModel Wiazrd는 연결 문자열에 중요한 데이터를 포함할지 여부를 묻습니다. 여기에서 예 라디오 버튼을 선택하고 다음을 클릭합니다. 또한 원하는 경우 connectionstring 이름을 변경할 수 있지만이 예에서는 기본값으로 둡니다.

이제 작업할 엔터티를 선택해야 합니다. 간단하게 유지하기 위해 School 데이터베이스에서 가장 간단한 테이블을 선택하고 있습니다 ( "단순"이란 다른 테이블과 관계가없는 테이블을 의미합니다). 따라서이 예제를 진행하기 위해 Department 테이블을 선택하겠습니다. 아래 이미지와 같이 Department 테이블을 선택하려면 Department의 확인란을 선택하고 다른 필드는 기본값으로 둡니다.

아래 이미지에 표시된 것처럼 Department 테이블을 선택하려면 Department(부서) 확인란을 선택하고 다른 필드는 기본값으로 둡니다

그런 다음 데이터 모델을 만들려면 Finish를 클릭하면 모델이 추가됩니다. 이 모델을 사용하여 Azure API를 만듭니다. 아래 이미지와 같이 솔루션 탐색기에서 생성된 SchoolModel을 확인할 수 있습니다.

이미지에 표시된 대로 솔루션 탐색기에서 생성된 SchoolModel을 확인합니다.

현재 모델을 추가했습니다. 이 단계에서 프로젝트를 성공적으로 빌드했는지 확인한 다음 컨트롤러를 만들어 보겠습니다. Controllers 폴더를 마우스 오른쪽 버튼으로 클릭하고 contextmeny에서 Add->Controller를 선택합니다.  스캐폴딩 옵션에서 아래 이미지와 같이 Entity Framework를 사용하여 작업이 있는 Web API 2 컨트롤러를 선택합니다.

스캐폴딩 옵션에서 이미지에 표시된 대로 Entity Framework를 사용하여 작업이 있는 Web API 2 컨트롤러를 선택합니다

스캐폴딩을 사용하여 컨트롤러를 추가하려면 다음 옵션을 선택해야 합니다.

  1. 모델 클래스: 드롭다운에서 부서를 선택합니다.
  2. 데이터 컨텍스트 클래스: 드롭다운에서 SchoolEntities를 선택합니다.
  3. 원하는 컨트롤러 이름을 지정하거나 모델 클래스를 기반으로 제안된 이름을 그대로 둡니다.
비계를 사용하여 컨트롤러를 추가하려면 다음 옵션을 선택해야 합니다.

추가를 클릭하면 DepartmentsController가 프로젝트에 추가됩니다. 기본적으로 Department 테이블에서 CRUD 작업을 수행하기 위해 웹 API를 만들었습니다. 다음 단계에서는 Swagger 메타데이터 및 UI를 활성화해야 합니다.

Swagger 메타데이터 및 UI 활성화

Azure App Service는 Swagger 2.0 메타데이터를 지원합니다. 이를 사용하여 각 API는 API에 대한 메타데이터를 Swagger JSON 형식으로 반환하는 EndPoint URL을 정의할 수 있습니다. 반환된 메타데이터는 클라이언트 코드를 생성하는 데 사용할 수 있습니다.

​apiUrl/swagger/docs/v1을 추가하여 생성된 API에 대한 메타데이터를 탐색할 수 있습니다. 따라서 프로젝트를 계속 진행하면 아래 이미지와 같이 "금지됨" 메시지가 표시됩니다.

따라서 프로젝트를 계속 진행하면 이미지와 같이 "금지됨" 메시지가 표시됩니다

 

API의 메타데이터로 이동하려면 다음과 같이 baseurl에 / swagger/docs/v1을 추가합니다

API의 메타데이터로 이동하려면 다음과 같이 baseurl에 /swagger/docs/v1을 추가합니다

여기에 JSON 형식의 Azure API 메타데이터가 표시됩니다. API에 대한 Swagger 2.0 JSON 메타데이터입니다. 클라이언트 코드를 만드는 데 사용할 수 있습니다.

Swagger UI를 활성화하려면 프로젝트로 돌아가서 App_Start 폴더에서 SwaggerConfig.cs 파일을 엽니다.  파일에서 다음 코드 줄을 찾아 주석 처리를 제거합니다.

Swagger UI를 활성화하려면 프로젝트로 돌아가서 App_Start 폴더에서 SwaggerConfig.cs 파일을 엽니다.

다시 한 번 F5 키를 눌러 Azure API 앱을 실행합니다. URL에 /swagger를 추가하면 API에서 Swagger UI가 사용하도록 설정되었음을 확인할 수 있습니다.

URL에 /swagger를 추가하면 API에서 Swagger UI가 활성화되었음을 확인할 수 있습니다

Swagger UI를 사용하여 생성된 API를 테스트할 수 있습니다. 예를 들어, 새로운 부서를 만들어 보겠습니다. POST 옵션을 클릭하고 JSON에서 삽입할 부서 데이터를 생성한 다음 사용해 보기를 클릭합니다.

POST 옵션을 클릭하고 에서 JSON에 삽입할 부서 데이터를 만듭니다.

API에서 반환된 응답 본문 및 응답 코드가 표시됩니다. 리소스를 성공적으로 만들면 상태 코드 201을 반환해야 합니다.

지금쯤이면 Azure API 앱을 만들고, Swagger 메타데이타 및 UI를 활성화하고, 로컬에서 테스트하는 것이 매우 간단하다는 것을 눈치챘을 것입니다. 이제 Azure에 게시해 보겠습니다.

Deploy API  to Azure

지금까지 우리가 한 모든 일은 지역적입니다. 이제 Visual Studio 2015에 통합된 Azure 도구를 사용하여 로컬 Azure API 앱을 Azure로 이동하려고 합니다. 시작하려면 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 게시를 선택합니다.

start, 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 게시를 선택합니다.

웹 게시 대화 상자에서 Microsoft Azure App Service를 선택하고 다음을 클릭합니다.

웹 게시 대화 상자에서 Microsoft Azure App Service를 선택하고 다음을 클릭합니다

다음 미망인에서 구독을 선택하고 새로 만들기를 클릭합니다.

다음 미망인에서 구독을 선택하고 새로 만들기를 클릭합니다.

"앱 서비스 만들기" 창에서 먼저 아래 이미지와 같이 유형을 API 앱으로 변경합니다.

"앱 서비스 만들기" 창에서 먼저 이미지에 표시된 대로 유형을 API 앱으로 변경합니다

다음으로 다음 정보를 제공합니다.

  1. Unique API name
  2. 구독을 선택합니다
  3. 앱 서비스 계획을 이미 만든 경우 선택할 수 있습니다. 새 항목을 만들려면 새로 만들기를 클릭합니다.

이 예제에서는 아래 이미지와 같이 새 App Service 계획을 만듭니다. 새로 만든 이 계획을 사용하여 응용 프로그램을 게시합니다.

이 예제에서는 아래 이미지와 같이 새 App Service 계획을 만듭니다. 새로 만든 이 계획을 사용하여 응용 프로그램을 게시합니다.

모든 정보를 제공한 후 호스팅 옵션은 다음과 같아야 합니다.

모든 정보를 제공한 후 호스팅 옵션은 아래와 같아야 합니다

현재로서는 애플리케이션을 게시하는 데 필요한 모든 정보를 제공했습니다. Create(생성)를 클릭하여 배포를 계속 진행합니다. 다음 화면에서 모든 세부 정보를 확인하고 다음을 클릭하여 계속 진행합니다.

다음 화면에서 모든 세부 정보를 확인하고 다음을 클릭하여 계속 진행합니다.

이 화면에서 연결 문자열을 확인하고 데이터베이스를 업데이트할 수 있습니다. 간단하게 유지하려면 모든 설정을 기본값으로 두고 다음을 클릭하십시오.

간단하게 유지하려면 모든 설정을 기본값으로 두고 다음을 클릭하십시오

이 화면에서 배포를 미리 보고 게시를 클릭하여 Azure API 앱을 Azure 서비스에 배포합니다.

이 화면에서 배포를 미리 보고 게시를 클릭하여 Azure API 앱을 Azure 서비스에 배포합니다

Visual Studio의 출력 창에서 게시 상태를 볼 수 있습니다. 성공적인 게시에서 Azure 서비스에서 호스팅되는 Azure API 앱으로 이동합니다. 아래 이미지와 같이 Azure 서비스에서 실행되는 Azure API 앱을 가져와야 합니다.

아래 이미지와 같이 Azure 서비스에서 실행되는 Azure API 앱을 가져와야 합니다.

Azure API 앱을 Azure 서비스에 성공적으로 배포했습니다.

Configuring metadata URL in portal 

메타데이터 URL을 구성하려면 포털에 로그인하고 앱 서비스 섹션에서 새로 만든 API 앱을 찾을 수 있습니다.

메타데이터 URL을 구성하려면 포털에 로그인하고 앱 서비스 섹션에서 새로 만든 API 앱을 찾을 수 있습니다.

API 앱을 클릭하고 API 정의를 선택합니다.

API 앱을 클릭하고 API 정의를 선택합니다.

API 정의에서 메타데이터 URL을 변경할 수 있습니다. 위에서 설명한 것처럼 기본적으로 메타데이터 URL은.. /swagger/docs/v1 입니다.

API 정의에서 메타데이터 URL을 변경할 수 있습니다. 위에서 설명한 것처럼 기본적으로 메타데이터 URL은 .. /swagger/docs/v1입니다.

아래 이미지와 같이 메타데이터 URL을 다른 URL로 변경할 수 있습니다. URL을 변경한 후 상단의 저장 버튼을 클릭하여 새 URL을 저장하는 것을 잊지 마십시오. 간단하게 하기 위해 여기에 메타데이터 URL을 기본적으로 남겨 두었습니다. 그래서 당신이 .. 로 이동할 때 /swagger/docs/v1을 사용하면 클라이언트 측 코드를 만드는 데 필요한 Swagger 메타데이터를 얻을 수 있습니다. 메타데이터는 아래 이미지와 같이 브라우저에서 볼 수 있습니다.

메타데이터는 이미지에 표시된 대로 브라우저에서 볼 수 있습니다

URL로 이동하여 GET 작업을 수행하고 브라우저에서 모든 부서를 볼 수 있습니다. /api/departments입니다. 부서는 아래 이미지와 같이 브라우저에서 JSON으로 반환됩니다.

URL로 이동하여 GET 작업을 수행하고 브라우저에서 모든 부서를 볼 수 있습니다. /api/departments입니다. 부서는 이미지에 표시된 대로 브라우저에서 JSON으로 반환됩니다.

이 문서의 이전 섹션에서 설명한 대로 Swagger UI를 사용하여 다른 작업을 테스트할 수도 있습니다.

지금까지 Azure에서 SQL 데이터베이스와 함께 작동하는 Azure API를 만들었습니다. 또한 Azure App Service에 성공적으로 배포했습니다.

Creating MVC Client

이 기사의 이 섹션에서는 .NET 클라이언트를 만듭니다. 계속해서 ASP.NET MVC 프로젝트를 만들어 보겠습니다.

이 기사의 이 섹션에서는 .NET 클라이언트를 만듭니다. 계속해서 ASP.NET MVC 프로젝트를 만들어 보겠습니다.

템플릿에서 MVC를 선택하고 인증 변경 옵션에서 인증 없음을 선택합니다.

템플릿에서 MVC를 선택하고 인증 변경 옵션에서 인증 없음을 선택합니다.

프로젝트를 성공적으로 만든 후 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 Add->REST API Client를 선택합니다.

프로젝트를 성공적으로 만든 후 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 Add->REST API Client를 선택합니다.

REST API 클라이언트 옵션을 선택하면 Microsoft Azure에서 API 다운로드 또는 기존 Swagger 메타데이터 파일을 선택할 수 있는 옵션이 표시됩니다. 필요에 따라 여기에서 클라이언트 네임스페이스 이름도 변경할 수 있습니다.

REST API 클라이언트 옵션을 선택하면 Microsoft Azure에서 API 다운로드 또는 기존 Swagger 메타데이터 파일을 선택할 수 있는 옵션이 표시됩니다.

Microsoft Azure API 앱에서 다운로드 옵션을 선택하고 찾아보기 버튼을 클릭하겠습니다.  앱 서비스를 선택하려면 아래 이미지와 같이 구독을 선택하고 Azure API 앱을 선택한 다음 확인 단추를 클릭합니다.

앱 서비스를 선택하려면 아래 이미지와 같이 구독을 선택하고 Azure API 앱을 선택한 다음 확인 단추를 클릭합니다.

확인 버튼을 추가로 클릭하면 메타데이터가 클라이언트 앱에 다운로드됩니다. 메타데이터를 성공적으로 다운로드하면 클라이언트 측 코드가 생성된 것을 확인할 수 있습니다. 아래 이미지와 같이 솔루션 탐색기에서 볼 수 있습니다.

이미지에 표시된 대로 솔루션 탐색기에서 볼 수 있습니다

이제 Azure API 앱에서 클라이언트 쪽 코드를 만들었습니다. 계속해서 컨트롤러를 추가해 보겠습니다: Controllers 폴더를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 Add->Controller를 선택합니다.  템플릿에서 읽기/쓰기 작업이 있는 MVC 5 컨트롤러를 선택합니다.

템플릿에서 읽기/쓰기 작업이 있는 MVC 5 컨트롤러를 선택합니다.

생성된 코드를 사용하면 Azure API에서 작업을 매우 쉽게 수행할 수 있습니다.  생성된 컨트롤러의 인덱스 작업에서 SchoolApiApp 인스턴스를 사용하여 모든 부서를 가져올 수 있습니다. 모든 부서를 가져오려면 아래 목록을 참조하십시오.

private SchoolApiApp app = new SchoolApiApp();
public ActionResult Index() {
  return View(app.Departments.GetDepartments());
}

위에 나열된 코드에서 유추할 수 있듯이 REST API를 사용하는 데 몇 줄의 코드만 있으면 됩니다. .NET 클라이언트 쪽 코드는 Azure API 앱의 Swagger 메타데이터를 사용하여 생성되었습니다.

View를 추가하려면 Index action을 마우스 오른쪽 버튼으로 클릭하고 view 추가를 선택합니다. Add View(보기 추가) 템플릿에서 List(목록)를 선택하고 Department(부서)를 모델 클래스로 선택합니다.

Add View(보기를 추가하고, Index 작업을 마우스 오른쪽 버튼으로 클릭하고, Add View(보기 추가)를 선택합니다. Add View(보기 추가) 템플릿에서 List(목록)를 선택하고 Department(부서)를 모델 클래스로 선택합니다

레코드를 만드는 것도 매우 간단합니다. 이렇게 하려면 아래 목록과 같이 enity 개체를 전달하여 Post 메서드를 호출하기만 하면 됩니다.

public ActionResult Create([Bind(Include = "Administrator,Budget,Name,StartDate")] Department department) {
  try {
    // TODO: Add insert logic here
    if (ModelState.IsValid) {
      department.DepartmentID = 4569;
      app.Departments.PostDepartmentByDepartment(department);
    }
    return RedirectToAction("Index");
  } catch (Exception ex) {
    return View();
  }
}

생성된 코드에는 List, Post, Put 및 Delete와 같은 모든 작업이 있습니다. 위의 예에서 List 및 Post 작업을 사용한 것처럼 쉽게 사용할 수 있습니다.

마지막 단계에서는 MVC 클라이언트를 Azure Web App에 게시해 보겠습니다. 게시는 API 앱을 게시한 것과 동일합니다. 간결함을 위해 스크린 샷을 피하고 단계 만 언급합니다.

Publish MVC Client to Azure Web App

  1. 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 게시를 클릭하십시오.
  2. 대상을 Microsoft Azure App Service로 게시를 선택합니다.
  3. 구독을 선택하고 새로 만들기를 클릭하십시오.
  4. 웹앱에 이름을 지정하고, 지역을 선택하고, 만들기를 클릭합니다.
  5. 마지막 단계에서 Publish(게시)를 클릭합니다

게시에 성공하면 Visual Studio 출력 창에 URL과 함께 "게시 성공" 메시지가 표시됩니다.

게시에 성공하면 Visual Studio 출력 창에 URL과 함께 "게시 성공" 메시지가 표시됩니다.

대! Azure API 앱을 사용하는 Azure Web App에 ASP.NET MVC 응용 프로그램을 방금 게시했습니다.

결론

이 문서에서는 다음 작업을 수행하는 방법을 배웠습니다.

  • Azure의 SQL 데이터베이스에 SQL 연결 만들기
  • Entity Framework 데이터베이스를 먼저 사용하여 CRUD 작업을 스캐폴딩합니다.
  • Azure API 앱에서 작업 노출
  • Configure the swagger API and UI for metadata and API testing
  • Publish Azure API App in Azure App Service
  • ASP.NET MVC 애플리케이션에서 Swagger 메타데이터 API를 사용하여 클라이언트 측 코드 만들기
  • MVC 응용 프로그램에서 생성된 클라이언트 코드를 사용하여 Azure의 SQL 데이터베이스에 있는 테이블에서 CRUD 작업 수행
  • Publish ASP.NET MVC application in Azure Web App

 

어떻게
데모 요청