[FastAPI] Fast API 시작

ballbig 2024. 9. 24. 11:20

728x90

FastAPI의 특징

API를 만드는데 보다 집중한 프레임워크이다.
리액트나 Vue.js, Svelte와 같은 Frontend 웹 프레임워크에서 사용할 수 있고 안드로이드나 아이폰 앱에서도 사용할 수 있다.
내부적으로 Starlette이라는 비동기 프레임워크를 사용하기 때문에 파이썬 웹 프레임워크 중 가장 빠르다.
Pydantic 라이브러리를 사용함으로써 입출력을 정의하고 입출력 값을 자동으로 검증해주어 빠르고 안전하게 구현할 수 있다.
Swagger가 작성한 API 명세를 쉽게 보고 테스트할 수 있는 웹 인터페이스를 자동으로 생성해주기 때문에 손쉽게 테스트할 수 있다.
자체 ORM(Object Relational Mapping)을 제공하지는 않는다.

💡 Starlette - 비동기 ASGI 프레임워크 (https://www.starlette.io/)

💡 Pydantic - 입출력 항목을 정의하고 검증한다. (https://pydantic-docs.helpmanual.io/)
💡 Swagger - API 스펙 문서를 자동화한다. (https://swagger.io/)

💡 ORM(Object-Relational Mapping) : 프로그래밍에서 사용하는 객체와 데이터베이스에서 사용하는 테이블 간의 매핑을 자동으로 처리해 주는 기술. 이를 통해 SQL을 직접 작성하는 대신 객체의 메서드와 속성을 사용하여 데이터베이스를 조작할 수 있다.

FastAPI 환경 셋팅 및 테스트

FastAPI 설치하기

API 코드 예제

$ pip install fastapi

@app.get("/hello") : 어노테이션. /hello 라는 URL요청이 발생하면 해당 함수를 실행하여 결과를 리턴하라는 의미

유비콘(Uvicorn) 설치하기
- 비동기 호출을 지원하는 파이썬용 웹 서버

$ pip install "uvicorn[standard]"

FastAPI 서버 실행하기

$ uvicorn main:app --reload --host 0.0.0.0 --port 8082

main:app: main.py 파일에 있는 app 객체 (FastAPI 애플리케이션 인스턴스)를 실행
--reload: 코드가 변경될 때마다 서버를 자동으로 다시 로드
--host 0.0.0.0: 기본적으로는 localhost에서만 접근할 수 있는데, 이 옵션을 통해 모든 네트워크 인터페이스에서 요청을 받을 수 있도록 설정
--port 8082: FastAPI 애플리케이션을 8082 포트에서 실행

API 테스트

💡 앞서 말했듯, FastAPI는 API 명세를 쉽게 보고 테스트할 수 있는 웹 인터페이스를 자동으로 제공해준다.

서버를 실행한 후, 다음의 URL로 이동하면 테스트 가능한 페이지가 열린다! (참고로, 이 페이지는 React로 만들어졌다.)

http://127.0.0.1:8000/docs

해당 페이지에서 다음과 같이 API를 쉽게 테스트해 볼 수 있다

CORS 예외 등록

앞선 예제처럼 코드를 등록하면,

프론트에서 API 요청시 CORS 정책에 의해 요청이 거부되는 현상이 발생한다.

따라서 FastAPI에 CORS 예외 URL을 등록하여 해결해주어야 한다.

💡 CORS 란? - https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

수정된 코드

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware

app = FastAPI()

port = 3650

origins = [
    f"http://127.0.0.1:{port}",    # 예외 URL 등록
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/hello")
def hello():
    return {"message": "안녕하세요 파이보"}

프론트에서 API 호출해보기

React 코드

[App.js]

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

function App() {
  const [message, setMessage] = useState(""); // 상태 변수로 메시지를 저장

  // 컴포넌트가 렌더링 될 때 API 호출
  useEffect(() => {
    // FastAPI 서버에서 데이터 가져오기
    fetch("http://127.0.0.1:8000/hello")
      .then((response) => response.json()) // JSON으로 변환
      .then((data) => {
        setMessage(data.message); // 데이터에서 메시지를 상태 변수에 저장
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
      });
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 렌더링 될 때만 실행되도록 함

  return (
    <div className="App">
      <header className="App-header">
        <h1>{message}</h1> {/* API에서 가져온 메시지를 화면에 출력 */}
      </header>
    </div>
  );
}

export default App;

자동으로 requirements.txt 생성

시스템에 설치된 모든 패키지 및 버전을 requirements.txt 파일로 저장

$ pip freeze > requirements.txt