본 시리즈는 '박응용' 님의 '점프 투 FastAPI'를 바탕으로 학습 및 실습한 내용을 정리한 것입니다.
구현 및 파인튜닝한 모델을 사용한 웹 서비스 구현을 위해 FastAPI의 학습 필요성을 느껴 학습 과정을 정리합니다. 내용의 정확성이나 이론적인 부분은 당연히 원본 페이지를 참조하시는 게 좋고, 본 시리즈에서는 구현 도중 발생하는 문제 등을 해결하는 과정을 함께 기록하여 '처음부터 끝까지 따라 할 수 있는' 시리즈를 만드는 것을 목표로 합니다(물론 제1목표는 학습 내용 기록입니다).
1. 가상환경 설정
가상환경 디렉터리 생성
사용하는 파이썬 및 라이브러리 등의 관리를 위하여 가상환경을 설정한다. 이후 GIT을 통해 서비스를 관리하거나 할 때에도 라이브러리의 버전 관리는 반드시 필요하므로 이 부분은 명확히 기억해 두는 것이 좋다.
명령 프롬프트에서 다음의 명령어를 입력해 프로젝트 작업용 디렉토리를 생성한다.
c:\Users\Username\ cd \
C:\> mkdir workspace # mkdir 뒤에 작업용 디렉토리명을 입력한다.
C:\> cd workspace # 생성한 디렉토리로 이동가상환경 생성
작업 디렉토리에서 파이썬을 이용해 가상환경을 만들어준다.
C:\workspace> python -m venv project_1 # venv 뒤에 프로젝트명을 입력한다.명령이 제대로 수행되었다면 workspace 폴더 아래에 project_1이라는 폴더가 생성된다. 이 디렉토리가 하나의 가상환경이라고 생각하면 된다.
가상환경 진입
가상환경에 진입하기 위해 Scripts 폴더의 activate라는 명령을 수행한다.
C:\>worksapce> cd project_1
C:\>worksapce\project_1> ./Scripts/activate가상환경이 실행되면 다음과 같이 프롬프트 왼쪽에 프로젝트명이 붙게 된다.
(project_1) C:\>worksapce\project_1>가상환경에서 벗어나려면 deactivate라는 명령을 실행하면 된다. 이 명령은 Scripts 디렉토리가 아닌 어디서든 실행 가능하다.
2. FastAPI 설치
가상환경에 진입한 상태로 FastAPI를 설치한다.
(project_1) C:\>worksapce\project_1> pip install fastapiFastAPI와 각종 필요 라이브러리들이 설치된다. 그리고 마지막에 다음과 같은 메시지가 보일 텐데, 이는 pip이 최신 버전이 아니라는 의미이므로 경고 메시지를 따라 최신 버전으로 설치한다.
[notice] A new release of pip is available: 23.1.2 -> 23.3.1
[notice] To update, run: python.exe -m pip install --upgrade pip3. Svelte 설치
Svelte는 프론트엔드용 웹 프레임워크로서 HTML, CSS, Javascript에 대한 기초 지식만 있으면 쉽게 이해할 수 있을 정도로 직관적이며 코드가 간단하고 속도도 빨라 인기 있는 프레임워크라고 한다. Svelte를 사용하기 위해서는 Node.js가 필요하며, 마찬가지로 가상환경에 진입한 상태로 Node.js 및 Svelte를 설치한다.
# nodeenv 설치
(project_1) C:\workspace\fastapi_practice\practice_1> pip install nodeenv
# 설치 버전 확인
(project_1) C:\workspace\fastapi_practice\practice_1> nodeenv --version
# 활성화된 가상환경에 독립적인 node 환경 추가
(project_1) C:\workspace\fastapi_practice\practice_1> nodeenv -p여기까지 완료하면 node.js 및 노드 패키지 매니저(npm)이 설치된다. npm을 이용해 Svelte를 설치한다.
(project_1) C:\workspace\fastapi_practice\practice_1> npm create vite@latest frontend -- --template svelte설치가 완료되면 frontend라는 디렉토리가 생성되고, 다음과 같은 메시지가 출력된다.
...
Done. Now run:
cd frontend
npm install
npm run dev메시지를 따라 frontend 디렉토리로 이동한 후 npm install을 입력하면 Svelte가 설치된다.
그리고 FastAPI를 구동하기 위한 파이썬용 웹 서버인 uvicorn을 설치한다.
(practice_1) C:\workspace\fastapi_practice\practice_1/frontend> cd ./
(practice_1) C:\workspace\fastapi_practice\practice_1> pip install "uvicorn[standard]"이제 기초적인 환경 설정이 모두 완료되었다. 간단한 app을 만들어 테스트를 해 보자.
프로젝트 메인 디렉토리(C:\workspace\fastapi_practice\practice_1)에 main.py 파일을 만들고 다음과 같이 코드를 작성하자.
from fastapi import FastAPI
app = FastAPI()
@app.get("/hello")
def hello():
retirn{"message": "안녕하세요, FastAPI"}그리고 터미널에서 FastAPI를 실행해보자.
(practice_1) C:\workspace\fastapi_practice\practice_1> uvicorn main:app --reload그러면 다음과 같은 메시지와 함께 현재 PC에서 800번 포트로 FastAPI 서버가 구현된다.
INFO: Will watch for changes in these directories: ['C:\\workspace\\fastapi_practice\\practice_1']
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Started reloader process [18620] using WatchFiles
INFO: Started server process [15868]
INFO: Waiting for application startup.
INFO: Application startup complete.http://127.0.0.1:8000/docs를 통해 구현된 API를 테스트해볼 수 있다.
4. Svelte로 웹 페이지 만들기
프론트엔드 페이지 만들기
백엔드가 정상적으로 구현되는 것을 확인했으므로 Svelte로 프론트엔드 페이지를 만들어 보자. C:\workspace\fastapi_practice\practice_1\frontend\src\App.svelte 파일을 열어 작성된 내용을 모두 지우고 다음과 같이 작성해보자.
<h1>Hello!</h1>그리고 터미널에서 frontend 디렉토리로 이동한 후 npm run dev를 입력하여 서버를 실행해보자.
(practice_1) C:\workspace\fastapi_practice\practice_1\frontend> npm run dev다음과 같은 메시지와 함께 서버가 로컬 PC에서 실행된다.
> frontend@0.0.0 dev
> vite
VITE v4.5.0 ready in 526 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help브라우저에 주소를 입력하면 다음과 같이 조금 전 작성한 Hello! 메시지를 확인할 수 있다.
이때 텍스트가 정중앙에 표시되는 것은 app.css 파일에 작성된 스타일 때문이며, 해당 파일의 내용을 모두 제거하면 Hello가 정중앙이 아닌 좌상단에 표시된다.
FastAPI 서버와 통신하기
아까 만든 Hello API는 다음과 같은 json을 리턴하도록 되어 있다.
{
"message": "안녕하세요, FastAPI"
}우선 App.svelte 파일을 다음과 같이 수정하자.
<script>
let message;
fetch("http://127.0.0.1:8000/hello").then((response) => {
response.json().then((json) => {
message = json.message;
});
});
</script>
<h1>{message}</h1>그런데 이 상태로 웹 페이지를 확인해보면 undefined라고만 표시되는 것을 볼 수 있다. 개발자 도구를 통해 확인하면 CORS 정책에 의해 요청이 거부되어 발생하는 오류인데, 이는 FastAPI에 CORS 예외 URL을 등록함으로써 해결할 수 있다. FastAPI의 main.py 파일을 다음과 같이 수정하자.
from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
"http://localhost:5173",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/hello")
def hello():
return {"message": "안녕하세요, FastAPI"}
그러면 다음과 같이 "안녕하세요, FastAPI"라는 문장이 출력되는 것을 확인할 수 있다.
