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

6분

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

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

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

함수 앱 가져오기

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

API 분기 만들기

앱을 변경하기 전에 변경 내용에 사용할 새 분기를 만드는 것이 좋습니다. 앱에 대한 API를 완료하려고 하니, 이제 분기를 만들기에 좋은 시점입니다.

Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
Git: Checkout to...를 입력하고 선택합니다.
새 분기 만들기를 선택합니다.
새 브랜치 이름에 api를 입력하고 Enter 키를 누릅니다.

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

Azure Functions API 완료

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

Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
터미널을 입력하고 선택합니다. 새 터미널 만들기(활성 작업 영역에서).
프로젝트의 루트 폴더에 있는지 확인합니다.
다음 git 명령을 실행하여 api-starter 폴더의 이름을 api로 바꿉니다.
```
git mv api-starter api
```
F1 키를 눌러 명령 팔레트를 엽니다.
Git: Commit All을 입력하고 선택합니다.
커밋 메시지 API를 입력하고 Enter 키를 누릅니다.

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

폴더 및 파일	메서드	경로
api/products-post	게시하기	`products`
api/products-put	놓다	`products/:id`
api/products-delete	삭제	`products/:id`

HTTP GET 함수를 만듭니다.

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

Visual Studio Code용 Azure Functions 확장 설치

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

Visual Studio Marketplace로 이동하여 Visual Studio Code용 Azure Functions 확장을 설치합니다.
Visual Studio Code에서 확장 탭이 로드되면 설치를 선택합니다.
설치가 완료되면 다시 로드를 선택합니다.

비고

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

함수 만들기

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

Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
Azure Functions: Create Functions를 입력하고 선택합니다.
함수를 만들라는 메시지가 표시되면 HTTP 트리거를 선택합니다.
products-get을 함수 이름으로 입력합니다.
인증 수준으로 익명 을 선택합니다.

비고

Functions 앱은 개별 웹앱 프로젝트와 구분되는 api 폴더에 있습니다. 프런트 엔드 프레임워크를 사용하는 모든 웹앱은 동일한 API를 호출합니다. 애플리케이션을 구성하는 방법을 결정할 수 있지만 이 샘플에서는 분리된 애플리케이션을 확인하는 데 도움이 됩니다.

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

api/products-get 폴더에 function.json파일이 포함되어 있습니다. 이 파일에는 함수에 대한 구성이 포함되어 있습니다.

규칙에 따라 경로 엔드포인트의 이름은 함수가 포함된 폴더와 동일합니다. 함수는 products-get 폴더에 생성되므로 경로 엔드포인트는 기본적으로 products-get으로 생성됩니다. 그러나 엔드포인트가 제품이 되기를 원합니다.

함수를 구성합니다.

파일 api/products-get/function.json엽니다.
메서드는 두 가지 모두를 GET 허용합니다 POST.
메서드 배열을 GET 요청만 허용하도록 변경합니다.
"route": "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 를 노출합니다.

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

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

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

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인 제품을 반환합니다.

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

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

api/local.settings.json파일을 만듭니다.

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

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

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

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

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

비고

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

API 실행

이제 웹앱과 Azure Functions 프로젝트가 함께 작동하는 것을 지켜봐야 합니다. 다음 단계에 따라 Azure Functions 프로젝트를 로컬로 실행하여 시작합니다.

비고

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

Git 터미널을 열고 api 폴더로 이동합니다.
```
cd api
```
Azure Functions 앱을 로컬로 실행합니다.
```
npm install
```
```
npm start
```

웹앱 실행

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

프록시 포트 구성

다음 단계를 사용하여 프런트 엔드 앱에 대한 프록시를 구성합니다.

angular-app/proxy.conf.json파일을 엽니다.
target: 'http://localhost:7071' 설정을 찾습니다.
대상의 포트는 7071을 가리킵니다.

react-app/package.json파일을 엽니다.
"proxy": "http://localhost:7071/", 설정을 찾습니다.
프록시의 포트는 7071을 가리킵니다.

svelte-app/rollup.config.js파일을 엽니다.
코드 const api = 'http://localhost:7071/api';줄을 찾습니다.
API의 포트는 7071을 가리킵니다.

vue-app/vue.config.js파일을 엽니다.
target: 'http://localhost:7071', 설정을 찾습니다.
대상의 포트는 7071을 가리킵니다.

프런트 엔드 웹앱 실행

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

두 번째 Git 터미널 인스턴스를 엽니다.
다음으로, 이 명령을 입력하여 기본 프런트 엔드 프레임워크의 폴더로 이동합니다.
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
프런트 엔드 클라이언트 애플리케이션을 실행합니다.
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```

앱으로 이동

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

http://localhost:4200 으로 이동합니다.

http://localhost:3000 으로 이동합니다.

http://localhost:5000 으로 이동합니다.

http://localhost:8080 으로 이동합니다.

애플리케이션을 빌드했으며, 이제 애플리케이션이 로컬로 실행되어 API에 대한 HTTP GET 요청을 만들고 있습니다. 이제 터미널에서 Ctrl-C 를 눌러 실행 중인 앱 및 API를 중지합니다.

다음 단계

앱은 로컬에서 작동하며, 다음 단계는 API를 사용하여 앱을 게시하는 것입니다.