Azure Functions를 사용하여 Azure Static Web Apps에 API 추가

아티클
05/09/2024

Azure Functions에서 제공하는 Azure Static Web Apps에 서버리스 API를 추가할 수 있습니다. 이 문서에서는 Azure Static Web Apps 사이트에 API를 추가하고 배포하는 방법을 보여 줍니다.

참고 항목

정적 Web Apps에서 기본적으로 제공되는 함수는 보안 API 엔드포인트를 제공하도록 미리 구성되며 HTTP 트리거 함수만 지원합니다. 독립형 Azure Functions 앱과 어떻게 다른지에 대한 자세한 내용은 Azure Functions를 통한 API 지원을 참조하세요.

필수 조건

활성 구독이 있는 Azure 계정
- 계정이 없으면 체험 계정을 만들 수 있습니다.
Visual Studio Code
Visual Studio Code용 Azure Static Web Apps 확장.
Visual Studio Code용 Azure Functions 확장
Node.js v18: 프런트 엔드 앱과 API를 실행합니다.

팁

nvm 도구를 사용하여 개발 시스템에서 여러 버전의 Node.js를 관리할 수 있습니다. Windows에서는 Winget을 통해 Windows용 NVM을 설치할 수 있습니다.

정적 웹앱 만들기

API를 추가하기 전에 Azure Static Web Apps를 사용하여 첫 번째 정적 사이트 빌드 빠른 시작에 따라 프런트 엔드 애플리케이션을 만들고 Azure Static Web Apps에 배포합니다.

Azure Static Web Apps에 프런트 엔드 애플리케이션을 배포한 후에는 앱 리포지토리를 복제합니다. 예를 들어, git 명령줄을 사용하여 복제하려면 다음을 수행합니다.

git clone https://github.com/my-username/my-first-static-web-app

Visual Studio Code에서 앱 리포지토리의 루트를 엽니다. 폴더 구조에는 프런트 엔드 앱의 원본과 .github/workflows 폴더의 Static Web Apps GitHub 워크플로가 포함됩니다.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

API 만들기

정적 웹앱의 API에 대한 Azure Functions 프로젝트를 만듭니다. 기본적으로 Static Web Apps Visual Studio Code 확장은 리포지토리의 루트에 있는 api 폴더에 프로젝트를 만듭니다.

F1 키를 눌러 명령 팔레트를 엽니다.
Azure Static Web Apps: HTTP 함수 만들기...를 선택합니다. Azure Functions 확장을 설치하라는 메시지가 표시되면 설치하고 이 명령을 다시 실행합니다.
메시지가 표시되면 다음 값을 입력합니다.

prompt 값

언어 선택 JavaScript

프로그래밍 모델 선택 V3

함수 이름 제공 message

팁

Azure Functions 개발자 가이드에서 프로그래밍 모델 간의 차이점에 대해 자세히 알아볼 수 있습니다.

HTTP 트리거 함수를 사용하여 Azure Functions 프로젝트를 생성합니다. 이제 앱에 다음 예와 유사한 프로젝트 구조가 있습니다.
```
├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)
```
다음으로 message 함수를 변경하여 프런트 엔드에 메시지를 반환합니다. 다음 코드로 api/message/index.js의 함수를 업데이트합니다.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

prompt	값
언어 선택	JavaScript
프로그래밍 모델 선택	V3
함수 이름 제공	message

팁

Azure Static Web Apps: HTTP 함수 만들기... 명령을 다시 실행하여 더 많은 API 함수를 추가할 수 있습니다.

API를 호출하도록 프런트 엔드 앱 업데이트

/api/message에서 API를 호출하고 응답 메시지를 표시하도록 프런트 엔드 앱을 업데이트하세요.

빠른 시작을 사용하여 앱을 만든 경우 다음 지침을 사용하여 업데이트를 적용합니다.

src/index.html 파일의 콘텐츠를 다음 코드로 업데이트하여 API 함수에서 텍스트를 가져오고 화면에 표시합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

앱에서 HttpClient를 사용하도록 설정하려면 다음 코드로 src/app/app.module.ts의 콘텐츠를 업데이트하세요.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

src/app/app.component.ts의 콘텐츠를 다음 코드로 업데이트하여 API 함수에서 텍스트를 인출하고 화면에 표시합니다.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

src/App.js의 콘텐츠를 다음 코드로 업데이트하여 API 함수에서 텍스트를 인출하고 화면에 표시합니다.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

src/App.vue의 콘텐츠를 다음 코드로 업데이트하여 API 함수에서 텍스트를 인출하고 화면에 표시합니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

로컬에서 프런트 엔드 및 API 실행

프런트 엔드 앱과 API를 로컬로 함께 실행하기 위해 Azure Static Web Apps는 클라우드 환경을 에뮬레이트하는 CLI를 제공합니다. CLI는 Azure Functions Core Tools를 사용하여 API를 실행합니다.

명령줄 도구 설치

필요한 명령줄 도구가 설치되어 있는지 확인합니다.

npm install -g @azure/static-web-apps-cli

팁

swa 명령줄을 전역적으로 설치하지 않으려면 다음 지침에서 swa 대신 npx swa를 사용할 수 있습니다.

프런트 엔드 앱 빌드

앱에서 프레임워크를 사용하는 경우 Static Web Apps CLI를 실행하기 전에 출력을 생성하는 앱을 빌드합니다.

앱을 빌드할 필요가 없습니다.

npm 종속성을 설치하고 dist/angular-basic 폴더에 앱을 빌드합니다.

npm install
npm run build --prod

npm 종속성을 설치하고 build 폴더에 앱을 빌드합니다.

npm install
npm run build

npm 종속성을 설치하고 dist 폴더에 앱을 빌드합니다.

npm install
npm run build

애플리케이션을 로컬로 실행

Static Web Apps CLI로 앱을 시작하여 프런트 엔드 앱과 API를 함께 실행합니다. 이러한 방식으로 애플리케이션의 두 부분을 실행하면 CLI가 폴더에서 프런트 엔드의 빌드 출력을 제공하고 실행 중인 앱에서 API에 액세스할 수 있습니다.

리포지토리의 루트에서 start 명령을 사용하여 정적 웹 애플리케이션 CLI를 시작합니다. 앱의 폴더 구조가 다른 경우 인수를 조정합니다.
현재 폴더(src) 및 API 폴더(api)를 CLI에 전달합니다.
```
swa start src --api-location api
```
빌드 출력 폴더(dist/angular-basic) 및 API 폴더(api)를 CLI에 전달합니다.
```
swa start dist/angular-basic --api-location api
```
빌드 출력 폴더(build) 및 API 폴더(api)를 CLI에 전달합니다.
```
swa start build --api-location api
```
빌드 출력 폴더(dist) 및 API 폴더(api)를 CLI에 전달합니다.
```
swa start dist --api-location api
```
Windows 방화벽에서는 Azure Functions 런타임이 인터넷에 액세스할 수 있도록 요청하라는 메시지를 표시할 수 있습니다. 수락을 선택합니다.
CLI 프로세스가 시작되면 http://localhost:4280/에서 앱에 액세스합니다. 페이지가 API를 호출하고 출력 Hello from the API를 표시하는 방법을 확인합니다.
CLI를 중지하려면 Ctrl + C를 입력합니다.

워크플로에 API 위치 추가

Azure에 앱을 배포하기 전에 리포지토리의 GitHub Actions 워크플로를 API 폴더의 올바른 위치로 업데이트합니다.

.github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml에서 워크플로를 엽니다.

api_location 특성을 검색하고 값을 api로 설정합니다.

###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

파일을 저장합니다.

변경 내용 배포

Azure에서 정적 웹앱에 변경 내용을 게시하려면 코드를 커밋한 후 원격 GitHub 리포지토리에 푸시합니다.

F1 키를 눌러 명령 팔레트를 엽니다.
Git: Commit All 명령을 선택합니다.
커밋 메시지를 입력하라는 메시지가 표시되면 feat: API 추가를 입력하고 모든 변경 사항을 로컬 git 리포지토리에 커밋합니다.
F1 키를 눌러 명령 팔레트를 엽니다.
Git: push 명령을 선택합니다.

변경 내용은 GitHub의 원격 리포지토리로 푸시되며, Static Web Apps GitHub Actions 워크플로를 트리거하여 앱을 빌드하고 배포합니다.
GitHub에서 리포지토리를 열어 워크플로 실행 상태를 모니터링합니다.
워크플로 실행이 완료되면 정적 웹앱을 방문하여 변경 내용을 확인합니다.

다음 단계

앱 설정 구성