Azure Function + React 조합 웹서비스 만들기

1편에서는 Azure Static Web Apps를 이용해서 리액트 기반 웹서비스를 배포했습니다. 이번에는 이 웹서비스에 API를 추가해보겠습니다. 아래 가이드라인을 참고하여 진행할 예정입니다.

https://learn.microsoft.com/ko-kr/azure/static-web-apps/add-api?tabs=react

가이드에서는 Azure Function의 JavaScript 언어 진행되어 있으나 본 게시물에서는 파이썬으로 진행할 예정입니다.

1. 리포지토리를 복제합니다.

가이드문서 : git clone https://github.com/my-username/my-first-static-web-app

본 예제 : git clone https://github.com/tykimos/assiworks_webapps

VS Code 터미널을 이용해서 리포지토리를 복제해보겠습니다.

2. VS Code으로 복제한 리포지토리를 불러옵니다.

3. F1을 클릭하여 “Azure Static Web Apps: Create HTTPS Function…”을 클릭합니다.

4. 파이썬으로 선택하겠습니다.

5. 최신 버전인 Model V2로 설정하겠습니다.

6. 최신 버전인 python3.11으로 설정하겠습니다.

7. 함수의 이름은 “message”으로 설정합니다. (기본값은 http_trigger이나 수정합니다.)

8. 권한 수준을 ANONYMOUS으로 설정합니다.

9. api / function_app.py 파일이 생성됩니다. 해당 파일의 내용을 아래와 같이 수정합니다.

import azure.functions as func
import logging
import json

app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS)

@app.route(route="message", auth_level=func.AuthLevel.ANONYMOUS)
def message(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    response = {
        "text": "Hello from the API"
    }

    return func.HttpResponse(
        json.dumps(response),
        mimetype="application/json",
        status_code=200
    )

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

npm install
npm run build

11. Static Web Apps CLI로 앱을 시작하여 프런트 엔드 앱과 API를 함께 실행합니다

swa start build --api-location api

12. CLI 프로세스가 시작되면 http://localhost:4280/으로 접속할 수 있습니다.