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

  • 6분

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

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

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

함수 앱 실행

이제 API를 추가하고 프런트 엔드 앱에 연결합니다. api-starter 폴더에는 불완전한 Azure Functions 프로젝트가 포함됩니다. 이제 완료해 보겠습니다.

API 분기 만들기

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

  1. Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.

  2. 를 입력하고 선택합니다.

  3. 새 분기 만들기를 선택합니다.

  4. 새 분기 이름으로 api를 입력하고 Enter 키를 누릅니다.

방금 api Git 분기를 만들었습니다.

Azure Functions API 완료

API를 완료하려면 먼저 시작 API 코드를 api라는 폴더로 이동합니다. Static Web Apps 인스턴스를 만들 때 api_location 이 폴더 이름을 입력했습니다.

  1. Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.

  2. 터미널: 새 터미널 만들기(활성 작업 영역에서)을 입력하고 선택합니다.

  3. 현재 위치가 프로젝트의 루트 폴더인지 확인합니다.

  4. 다음 Git 명령을 사용하여 api-starter 폴더 이름을 api로 바꿉니다.

    git mv api-starter api

  5. F1 키를 눌러 명령 팔레트를 엽니다.

  6. Git: Commit All을 입력하고 선택합니다.

  7. 커밋 메시지 api를 입력하고 Enter 키를 누릅니다.

이제 Visual Studio Code 탐색기에 api 폴더가 표시됩니다. api 폴더에는 세 가지 함수와 함께 Azure Functions 프로젝트가 포함됩니다.

폴더 및 파일 메서드 경로
api/products-post POST products
api/products-put PUT products/:id
api/products-delete DELETE products/:id

HTTP GET 함수를 만듭니다.

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

Visual Studio Code용 Azure Functions 확장 설치

Visual Studio Code용 Azure Functions 확장을 사용하여 Azure Functions 애플리케이션을 만들고 관리할 수 있습니다.

  1. Visual Studio Marketplace로 이동하여 Visual Studio Code용 Azure Functions 확장을 설치합니다.

  2. 확장 탭이 Visual Studio Code에 로드되면 설치를 선택합니다.

  3. 설치가 완료되면 다시 로드를 선택합니다.

참고 항목

Azure Functions를 로컬로 실행할 수 있는 Azure Functions Core Tools를 설치해야 합니다.

함수 만들기

이제 함수를 사용하여 Azure Function 앱을 확장하여 제품을 가져옵니다.

  1. Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.

  2. Azure Functions: Create Function을 입력하고 선택합니다.

  3. 함수를 만들지 묻는 메시지가 표시되면 HTTP 트리거를 선택합니다.

  4. 함수 이름으로 products-get을 입력합니다.

  5. 인증 수준으로 익명을 선택합니다.

참고

Functions 앱은 api 폴더에 있으므로, 개별 웹앱 프로젝트와 분리됩니다. 프런트 엔드 프레임워크를 사용하는 모든 웹앱은 동일한 API를 호출합니다. 애플리케이션을 구성하는 방법을 결정할 수는 있지만, 이 샘플의 경우에는 애플리케이션을 분리해서 표시하는 것이 도움이 됩니다.

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

api/products-get 폴더에는 function.json 파일이 포함됩니다. 이 파일에는 함수의 구성이 포함됩니다.

규칙에 따라 경로 엔드포인트의 이름은 함수가 포함된 폴더와 동일합니다. 함수는 products-get 폴더에 만들어지므로 경로 엔드포인트는 기본적으로 products-get으로 생성됩니다. 그러나 엔드포인트를 products로 설정하려고 합니다.

다음과 같이 함수를 구성합니다.

  1. api/products-get/function.json 파일을 엽니다.

  2. 메서드는 GET 및 POST를 모두 허용합니다.

  3. GET 요청만 허용하도록 메서드 배열을 변경합니다.

  4. 메서드 배열 후 "route": "products" 항목을 추가합니다.

이제 함수는 products에 대한 HTTP GET 요청에서 트리거됩니다. function.json은 다음 코드와 비슷합니다.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

함수 논리 업데이트

api/products-get 폴더의 index.js 파일에는 경로에 대한 HTTP 요청을 만들 때 실행되는 논리가 포함됩니다.

제품을 가져오기 위해 논리를 업데이트해야 합니다. JavaScript 모듈 /shared/product-data.js 데이터 액세스 논리가 있습니다. product-data 모듈은 쇼핑 목록의 제품을 가져오는 getProducts 함수를 공개합니다.

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

  1. api/products-get/index.js 파일을 엽니다.

  2. 콘텐츠를 다음 코드로 바꿉니다.

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

함수는 제품을 가져오고 성공하면 상태 코드 200으로 반환합니다.

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

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

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

  1. api/local.settings.json이라는 이름의 파일을 만듭니다.

  2. 파일에 다음 콘텐츠를 추가합니다.

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

참고

local.settings.json 파일은 GitHub에 푸시되지 않도록 차단하는 .gitignore 파일에 나열됩니다. 이는 GitHub에서 원하지 않는 비밀을 이 파일에 저장할 수 있기 때문입니다. 이 이유로 템플릿에서 리포지토리를 만들 때 이 파일을 만들었어야 합니다.

API 실행

이제 웹앱 및 Azure Functions 프로젝트 작업이 함께 작동하는 것을 감시하겠습니다. 먼저 다음 단계에 따라 Azure Functions 프로젝트를 로컬에서 실행합니다.

참고 항목

Azure Functions를 로컬로 실행할 수 있는 Azure Functions Core Tools를 설치해야 합니다.

  1. git 터미널을 열고 api 폴더로 이동합니다.

    cd api

  2. Azure Functions 앱을 로컬로 실행합니다.

    npm install

    npm start

웹앱 실행

API가 실행되고 있습니다. 이제 API에 대한 HTTP 요청을 만들도록 프런트 엔드 앱을 구성해야 합니다. 프런트 엔드 앱은 한 포트에서 실행되고 API는 다른 포트(7071)에서 실행됩니다. 각 프런트 엔드 프레임워크는 포트에 대한 HTTP 요청을 안전하게 프록시하도록 구성할 수 있습니다.

프록시 포트 구성

다음 단계에 따라 프런트 엔드 앱의 프록시를 구성합니다.

  1. angular-app/proxy.conf.json 파일을 엽니다.

  2. target: 'http://localhost:7071' 설정을 찾습니다.

  3. 대상 포트는 7071을 가리킵니다.

  1. Open the file react-app/package.json.

  2. "proxy": "http://localhost:7071/", 설정을 찾습니다.

  3. 프록시의 포트는 7071을 가리킵니다.

  1. svelte-app/rollup.config.js 파일을 엽니다.

  2. 코드 줄 const api = 'http://localhost:7071/api';를 찾습니다.

  3. API의 포트는 7071을 가리킵니다.

  1. vue-app/vue.config.js 파일을 엽니다.

  2. target: 'http://localhost:7071', 설정을 찾습니다.

  3. 대상 포트는 7071을 가리킵니다.

프런트 엔드 웹앱 실행

API가 이미 포트 7071에서 실행되고 있습니다. 이제 웹앱을 실행할 때 API에 대한 HTTP 요청을 만듭니다. 다음 단계에 따라 웹앱을 실행합니다.

  1. 두 번째 git 터미널 인스턴스를 엽니다.

  2. 다음으로, 이 명령을 입력하여 기본 프런트 엔드 프레임워크의 폴더로 이동합니다.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. 프런트 엔드 클라이언트 애플리케이션 실행

    npm start

    npm start

    npm run dev

    npm run serve

앱으로 이동

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

  1. http://localhost:4200으로 이동합니다.
  1. http://localhost:3000으로 이동합니다.
  1. http://localhost:5000으로 이동합니다.
  1. http://localhost:8080으로 이동합니다.
  1. 애플리케이션을 빌드했으며, 이제 애플리케이션이 로컬로 실행되어 API에 대한 HTTP GET 요청을 만들고 있습니다. 이제 터미널에서 Ctrl+C를 눌러 실행 중인 앱과 API를 중지합니다.

다음 단계

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