연습 - Azure Functions 프로젝트 만들기

  • 6분

쇼핑 목록 웹앱에는 API가 필요합니다. 이 연습에서는 Azure Functions 프로젝트를 사용하여 API를 빌드하고 실행합니다. 그런 다음, Visual Studio용 Azure Functions 확장을 통해 새 함수를 사용하여 API를 확장합니다.

이 연습에서는 다음 단계를 완료합니다.

  1. 웹앱 변경을 준비할 때 분기를 만듭니다.
  2. Azure Functions 프로젝트를 살펴봅니다.
  3. HTTP GET 함수를 만듭니다.
  4. 함수 시작 코드를 논리로 바꿔서 제품을 가져옵니다.
  5. API에 대한 HTTP 요청을 프록시하는 웹앱을 구성합니다.
  6. API 및 웹앱을 실행합니다.

참고

.NET을 사용한 Azure 개발을 위한 Visual Studio을 구성했는지 확인합니다.

함수 앱 가져오기

이제 API를 추가하고 이를 프런트 엔드 앱에 연결합니다. Api 프로젝트에는 불완전한 Azure Functions 프로젝트가 포함되어 있으므로 지금 완료할 예정입니다.

API 분기 만들기

앱을 변경하기 전에 변경 내용에 사용할 새 분기를 만드는 것이 좋습니다. 앱의 API를 곧 완료할 것이므로 Git에서 api라는 이름의 새 분기를 만듭니다.

Azure Functions API 완료

Api 프로젝트에는 세 가지 함수와 함께 Azure Functions 프로젝트가 포함됩니다.

클래스 메서드 경로
ProductsPost POST products
ProductsPut PUT products/:id
ProductsDelete DELETE products/:id

API에는 쇼핑 목록의 제품을 조작하기 위한 경로가 있지만 제품을 가져오기 위한 경로가 없습니다. 다음에 추가해 보겠습니다.

HTTP GET 함수를 만듭니다.

  1. Visual Studio에서 Api 프로젝트를 마우스 오른쪽 단추로 클릭한 다음, 추가>새 항목을 선택합니다.

    Azure 함수 항목을 만드는 방법을 보여 주는 스크린샷

  2. 새 항목 추가 대화 상자에서 Azure 함수를 선택합니다.

    선택한 Azure 함수 항목을 보여 주는 스크린샷

  3. 함수 이름으로 ProductsGet.cs를 입력합니다.

  4. 함수 형식으로 Http 트리거를 선택합니다.

  5. 권한 수준 필드의 드롭다운 목록에서 익명을 선택합니다.

    선택한 HTTP 트리거를 보여 주는 스크린샷

  6. 추가를 선택합니다.

제품을 가져오기 위해 함수를 사용하여 Azure Functions 앱을 확장했습니다.

HTTP 메서드 및 경로 엔드포인트 구성

새로 만든 C# 클래스의 Run 메서드에는 첫 번째 인수인 HttpRequest의 HttpTrigger 특성이 있습니다. 이 특성은 함수의 액세스 수준뿐만 아니라 수신 대기하는 HTTP 메서드 및 경로 엔드포인트도 정의합니다.

경로 엔드포인트는 기본적으로 null입니다. 이는 엔드포인트가 FunctionName 특성 값(ProductsGet)을 사용함을 의미합니다. Route 속성을 "products"로 설정하면 기본 동작이 재정의됩니다.

현재 함수는 products에 대한 HTTP GET 요청에서 트리거됩니다. 최종 Run 메서드는 다음 코드와 같습니다.

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

경로 논리 업데이트

함수가 실행될 때 Run 메서드의 본문이 실행됩니다.

제품을 가져오려면 Run 메서드의 논리를 업데이트해야 합니다. ProductData.cs 파일에는 종속성 주입을 통해 IProductData 인터페이스로 사용할 수 있는 ProductData라는 클래스로서 데이터 액세스 논리가 있습니다. 인터페이스에는 GetProducts라는 메서드가 있습니다. 이 메서드는 제품 목록을 비동기적으로 반환하는 Task<IEnumerable<Product>를 반환합니다.

이제 함수 엔드포인트를 변경하여 제품을 반환합니다.

  1. ProductsGet.cs를 엽니다.

  2. 해당 내용을 다음 코드로 바꿉니다.

    using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace Api;

public class ProductsGet
{
    private readonly IProductData productData;

    public ProductsGet(IProductData productData)
    {
        this.productData = productData;
    }

    [FunctionName("ProductsGet")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
    {
        var products = await productData.GetProducts();
        return new OkObjectResult(products);
    }
}

이전 변경 내용에서는 클래스를 정적 클래스에서 인스턴스 클래스로 전환했습니다. 종속성 삽입 프레임워크가 ProductData 클래스를 삽입할 수 있도록 생성자에 인터페이스를 추가했습니다. 마지막으로 호출 시 제품 목록을 반환하도록 Run 함수를 구성했습니다.

로컬로 CORS(원본 간 리소스 공유) 구성

Azure Static Web Apps에 게시할 때 CORS(원본 간 리소스 공유)에 관해 걱정할 필요가 없습니다. Azure Static Web Apps는 역방향 프록시를 사용하여 Azure에서 API와 통신할 수 있도록 앱을 자동으로 구성합니다. 하지만 로컬로 실행하는 경우 웹앱 및 API가 통신할 수 있도록 CORS를 구성해야 합니다.

이제 컴퓨터에서 웹앱이 API에 대한 HTTP 요청을 만들 수 있도록 Azure Functions에 지시합니다.

  1. Api 프로젝트의 속성 폴더에서 launchSettings.json이라는 파일을 엽니다.

    • 파일이 없는 경우 만듭니다.

  2. 파일 콘텐츠를 업데이트합니다.

    {
    "profiles": {
        "Api": {
            "commandName": "Project",
            "commandLineArgs": "start --cors *"
        }
    }
}

참고 항목

이 파일은 Visual Studio에서 Azure Functions 도구를 시작하는 방법을 제어하는 데 사용됩니다. Azure Functions 명령줄 도구를 사용하려는 경우에는 Azure Functions Core Tools 문서에 설명된 local.settings.json 파일도 필요합니다. local.settings.json 파일은 .gitignore 파일에 나열되어 있으므로 GitHub에 푸시되지 않습니다. 이는 GitHub에서 원하지 않는 비밀을 이 파일에 저장할 수 있기 때문입니다. 또한 이 이유로 템플릿에서 리포지토리를 만들 때 이 파일을 만들었어야 합니다.

API 및 웹앱 실행

이제 웹앱 및 Azure Functions 프로젝트 작업이 함께 작동하는 것을 감시하겠습니다.

  1. Visual Studio에서 ShoppingList 솔루션을 마우스 오른쪽 단추로 클릭합니다.

  2. 시작 프로젝트 설정을 선택합니다.

  3. 여러 시작 프로젝트 옵션을 선택합니다.

  4. 해당 작업으로 시작을 사용하도록 Api 및 클라이언트를 설정한 다음, 확인을 선택합니다.

  5. 디버거를 시작합니다.

앱으로 이동

애플리케이션이 Azure Functions API에 대해 로컬로 실행되는 것을 확인해 보겠습니다.

웹 애플리케이션으로 이동합니다(예: https://localhost:44348/).

애플리케이션을 빌드했으며, 이제 애플리케이션이 로컬로 실행되어 API에 대한 HTTP GET 요청을 만들고 있습니다.

이제 Visual Studio에서 디버거를 분리하여 앱 및 API의 실행을 중지합니다.

다음 단계

앱이 로컬로 작동하며 다음 단계는 API와 앱을 함께 게시하는 것입니다.