드디어, 마침내, 서버를 구축해보자. (fastAPI 를 이용해서..)

FreeZeeSun·2023년 12월 2일

어제에 이어서 많은 고민의 시간이었다.
형태소분석기 패키지를 설치하면서 너무 고통스러운 실패의 과정들을 겪었기에 선듯 무언가를 시작하기 두려워졌다..
우선, javascript 위에서 형태소분석기를 돌릴 수 있는 koalaNLP가 설치 실패로 끝나면서 (설치는 됐다. import 가 안됐을뿐..)
결국, 데이터를 서버로 넘겨서 서버쪽에서 형태소분석을 하기로 결심했다.
근데 거기서도 어떤 방법을 써야할지 전혀 감이 오지 않았다.
많은 서적에서는 주로 flask, tensorflow.js, node.js, fastAPI 가 언급이 가장 많았다.

선생님께 조언을 구했다.

네.. FastAPI 로 그냥 가볼게요... 어떻게 하는줄은 모르지만...🥹

그렇다면 현재 구조가..


이렇게 되는걸까?.... 모르겠다. 정말..
겨우 input 값 하나 형태소 분석하는데 이런 공력이 든다면,
단어간 유사도 검사한 결과는 어떻게 해야할까... ㅠ.ㅠ
점점 속도가 나길 바라며...
오늘 구현을 시작해보겠다.

오늘의 목표

  1. fastAPI 사용법 습득
  2. 일단 fastAPI 가 돌아가는지 확인 후 다음 목표를 설정하겠다.

우선, 역시나 여기저기 말이 엇갈리는거에 따라 고통 받지말고, 안전하게 공식문서부터 보자.
공식문서 : https://fastapi.tiangolo.com/ko/
github : https://github.com/tiangolo/fastapi

빨라서.. 이름이 Fast 인건가!?

많은 곳에서 참고를 해서보면, 안정적이고 견고하고 빠르다고 공통적으로 얘기한다.

설치 전 알아야할 것


Python 3.8 이상이라고 한다. (231203 기준)
내 파이썬 버전은. Python 3.10.1
WSGI (Web Server Gateway Interface) - 파이썬 웹 애플리케이션과 웹 서버 간의 인터페이스로서 사용되었습니다. 하지만 WSGI는 동기적인 프로그래밍 모델을 따르기 때문에 동시 처리에 제약이 있었습니다. ex. Flask, Django
ASGI (Asynchronous Server Gateway Interface) - 비동기 웹 애플리케이션을 위한 파이썬 웹 서버와 웹 프레임워크 간의 인터페이스입니다. ASGI는 비동기 처리와 동시 처리를 지원하여 더욱 향상된 성능을 보여줍니다. ex. FastAPI
Pydantic - 입출력 항목을 정의하고 검증한다.
Swagger - API 스펙 문서를 자동화한다.
SQLAlchemy - 파이썬에서 가장 많이 사용되는 ORM 라이브러리.

설치과정

설치 중 참고
https://fastapi.tiangolo.com/ko/
https://wikidocs.net/175092
https://tech.osci.kr/fastapi

1. 가상환경으로 fastAPI 설치를 권장하는 의견에 동의하므로, 파이썬 가상환경을 우선 만들겠다.

cmd 창에서 실행했다.


이렇게 c 드라이브에 venvs 라는 폴더가 생겼음을 확인했다.
venvs 폴더를 모든 가상환경의 루트 디렉터리로 사용하면 된다고 한다.
그 아래에 가상환경을 만들어줬다.


하지만, 아직 쓸수 없다고 한다. 가상환경을 사용하려면 가상환경에 진입해야 한다고 한다.

2. 가상 환경에 진입하기

C:\venvs> cd C:\venvs\myapi\Scripts
C:\venvs\myapi\Scripts> activate


가상환경에 진입했다는 뜻이다!

3. pip install fastapi

(myapi) C:\venvs\myapi\Scripts>pip install fastapi

성공적으로 설치완료 ㅎㅎㅎㅎ pip 업그레이드도 해줬다.

site-packages 에도 fastapi 가 잘 자리잡은걸 확인할 수 있다.

4. pip install "uvicorn[standard]"

uvicorn 이란? ASGI 준수하는 웹 서버.
(myapi) C:\venvs\myapi\Scripts>pip install "uvicorn[standard]"
성공적으로 설치가 완료됐다.

5. 프로젝트 디렉터리 생성하기

C:\> mkdir projects
C:\> cd projects

C:\projects> C:\venvs\myapi\Scripts\activate
(myapi) C:\projects>

(myapi) C:\projects> mkdir myapi
(myapi) C:\projects> cd myapi
(myapi) C:\projects\myapi>

6. 매번 5번 과정으로 프로젝트 디렉터리에서 가상환경 myapi 를 activate 하기에는 귀찮으니, 배치 파일로 일련의 과정을 한번에 수행할 수 있다고 한다.

7. 배치 파일 생성하기

메모장을 열어서 아래 코드를 써주고 myapi.cmd 라는 파일명을 venvs 폴더 안에 생성했다.

@echo off
cd c:/projects/myapi
c:/venvs/myapi/scripts/activate

분명 메모장 txt 파일이었는데 막상 디렉터리를 확인해보니 myapi.cmd 파일이 생성되어있다! 신기해!!!!
윈도우에서 확장자 .cmd 가 붙은 파일을 배치(batch)파일이라고 한다. 배치 파일은 여러 명령어를 한번에 실행해 주는 파일이라고 생각하면 된다.
배치 파일의 내용은 C:/projects/myapi 디렉터리로 이동한 다음, C:/venvs/myapi/activate 명령을 수행하라는 뜻이다.

8. 배치 파일 위치를 PATH 환경 변수에 추가하기

시스템 환경변수 > user 에 대한 사용자 변수 > path > 새로 만들기 > C:\venvs 추가

9. PATH 환경 변수 확인하기

명령 프롬프트를 다시 시작하자(그래야 변경된 환경 변수 PATH가 제대로 반영된다).
다시 cmd 에서 set path 를 눌렀더니
많은 텍스트들이 뜨고 맨 마지막에?

C:\venvs; 가 있는걸 확인할 수 있다!

10. 배치 파일 실행하여 가상 환경에 진입하기

cmd 창에서 그냥.. my api 라고 쳤을 뿐인데...
바로 projects 디렉터리 + myapi 가상환경이 콜라보된 디렉터리로 위치할 수 있었다!!! 너무 신기하다!!!

11. 파이참을 쓰라고 추천한다.


쫄보는.. 선생님 말씀 따를게요... 어차피 파이참도 애용하고 있던 참이니 ㅎㅎ

12. 파이썬 인터프리터 위치를 가상 환경 위치로 수정하기

13. Svelte 란...

프론트엔드 프레임워크라고 한다.. (꼭 써야하나..?)

흠... 리액트와 Vue.js 를 모르니.. 그냥 필자의 말을 따르겠습니다..

14. Svelte 를 사용하기 전에는 Node.js 가 필요하다...

(하.. 뭔가 험난한 앞길이 예상되는걸..?ㅠㅠ)
난 어제 하루종일 Node.js 때문에 끙끙 앓았다.. 내가 이것저것 설치를 시도해보느라 설정을 바꾼것도 몇몇 있기에 걱정이 된다... 제대로 돌아갈까?
우선 내 노드 버전. 현재 가장 최신 버전이다.(231203 기준)

15. npm 이용해서 Svelte 설치하기

흠.. 여기서 고민..

공식 문서에서는 이렇게 말한다...
위키에서는 이렇게 말한다....

어떤 명령어를 쳐야하지!!???

지피티의 답변..ㅎㅎ(너 없음 어찌살았을까 싶다)
결국, 위키독스의 튜토리얼대로 해보고자 한다.

무사히 잘 됐다..🥹

그리고 이렇게 폴더가 생겨있다..!

성공!

16. VSCode 에서 실행해보기


Svelte for VS Code 익스텐션도 깔아줬다.

17. 자바스크립트 타입 체크 설정 끄기 true -> false

projects/myapi/frontend/jsconfig.json

18. Svelte 서버 실행하기

frontend % npm run dev 터미널

된...거겠지?

19. Local 서버로 이동해보기


너무 신기하네....

20. 드디어, main.py 만들어보기 - 파이참


그새 이렇게 만들어진 구성을 확인할 수 있었다..

21. 파이참 Terminal cmd.exe 로 바꾸기

22. 파이참 터미널 - uvicorn main:app --reload


휴... 아까 script 위치에서 install 한게 마음에 걸렸는데.. 무사히 잘 진행되고 있다..ㅠ

23. 실행가능 URL 실행 http://127.0.0.1:8000/docs


와.... 너무 신기하다;;

24. 읽기만 가능한 URL 실행 http://127.0.0.1:8000/redoc

25. Svelte 웹 페이지 만들기

App.svelte 파일에서 디폴트 내용을 모두 지우고, 다시 쓴다.

26. FastAPI 서버와 통신하기

파이참에서 쓴 내용 /hello 에 대응하는 메세지를 받고 싶으나, 메세지 출력이 안되었고, 콘솔창을 확인하니 CORS 문제가 눈에 띈다.

27. CORS 오류 해결

main.py(FastAPI)에 CORS 예외 URL을 등록하여 해결할 수 있다.

오늘은 여기까지...!!!


내가 이해한 바로는 Svelte 와 FastAPI 그리고 Node.js 의 관계가 요러한것 같다.

이렇게 기본적인 환경 설정과 사용법은 얼추 알게되었다.
오늘은 여기까지... (너무 피곤하다..🥲)
내일은 꼭.. input 값까지 갖고 와서 python 코드로 형태소 분석을 해봐야지..

profile
개발자 지망생. 지금은 삽질의 연속, 하지만 언젠가는 삽질이 아닐 것이기에!

1개의 댓글

comment-user-thumbnail
2025년 12월 19일

ㅎㅎ응원합니다!!

답글 달기