풀스택 웹사이트 개발기 (feat. FastAPI, Vue.js, TensorFlow, Docker)

Intro

https://whatisbreed.com/ 

What is breed?

 

견종 분류 모델 개발기에서 개발한 모델이 아깝기도 하고, 그동안 풀스택을 해보고 싶던 생각도 있어서 분류 모델 + LIME을 적용한 웹사이트를 개발했다.

2022.08.20부터 개발을 시작했고 글을 쓰는 현재(2022.09.03) 배포를 한 상태이며 꾸준히 업데이트를 할 예정이다.

 

기술 스택

개강을 하기 전까지 개발을 해서 배포하고 싶은 마음이 있어, 기술 스택들을 선택할 때 배우는 비용이 낮은 것에 중점을 뒀다. 그리고 이전에 유튜브에서만 보던 해보고 싶은 신기술들을 사용해보고 싶은 마음도 컸다.

Frontend - Vue.js

카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 - 코딩애플 온라인 강좌

이 글의 영향을 많이 받았다. 우선 자바스크립트를 잘 모르는 상태에서 개발을 해야 했기 때문에 쉬운 프레임워크를 찾았다. 사실 svelte를 쓸까도 많이 고민했지만 그래도 svelte보다는 vue가 더 많이 사용되는 것 같아 vue를 사용하기로 결정했다. 

사실 지금도 자바스크립트는 잘 모른다. css도 겨우겨우 어찌어찌 구글링 해서 했는데 넘나 어렵다. 원하는 UI 만드는 게 쉬운 일이 아니다.

Backend - FastAPI

https://planb.hashnode.dev/fastapi-flask

FastAPI의 시대. 아직도 Flask 쓰시나요?

이 글에 많은 영향을 받았다. 이 글 하나 때문에 FastAPI에 대해 알게 됐고 사용하게 됐다.

Tensorflow 모델을 배포해야 하기 때문에 파이썬 서버를 열어야 편할 것이라고 판단했고, 규모가 큰 프로젝트가 아니었기 때문에 Django는 후보에서 탈락했다. 그렇기 때문에 Flask를 사용하려 했지만 위의 글을 봐버렸고, FastAPI에 대해 찾아보니 안쓸 이유가 없었다. 사실 요즘 엄청 핫한 프레임워크라 하니 꼭 써보고 싶었다.(신기술은 못 참지)

사용을 하다 보니 정말 쉽고 빠르고 좋았다. 빠르다는 게 동작뿐만 아니라 배우는 시간들도 포함해서 다 빠르다. 그리고 타입 어노테이션을 필수로 해야 해서 코드 읽기도 작성하기도 정말 편하다. 공식문서도 정말 읽기 편하게 잘 돼있어서 배우기 쉽다.

머기업 다니는 지인이 그렇다고 한다

Deep learning - TensorFlow

이건 https://mangu.tistory.com/204 여기에 자세히 적혀있다. 물론 모델에 적용하기 위해 다시 학습하긴 했다.

Server - AWS EC2, Docker, Nginx

AWS EC2를 사용하는 이유는 가난한 대학생이기 때문이다. 프리티어 1년을 사용하기 위해서 EC2를 선택했다.

처음엔 EC2 위에 바로 파이썬 라이브러리들을 pip로 하나씩 설치하려 했으나 설치하는 과정에서 문제가 많이 생겼다. 마침 이전에 Docker를 약간 공부했기도 했고 Docker를 쓰면 이런 환경 세팅이 꼬일 일을 방지할 수 있을 것 같았다. 또 나중에 Docker를 사용해서 배포 자동화까지 경험해보고 싶어서 EC2위에 docker를 올렸다.

서버

문제 해결

모델 경량화

기존에 사용하던 Xception 모델을 EC2 위에 바로 올려서 사용하려 했으나 너무 큰 모델이었다. model.predict()를 호출하는 순간 서버가 죽어버렸다.

여기서 내가 할 수 있는 선택은 두 가지였다.

• 가벼운 모델을 새로 만든다.
• 더 좋은 성능의 서버를 이용한다.

그러나 가난한 대학생의 지갑 상태론 사실 선택지가 하나였다. 그래서 새로운 가벼운 모델을 구축했다.

우선 EC2가 어떤 모델까지 감당할 수 있는지 확인이 필요했다. 그래서 Xception은 안 되는 걸 확인했고, MobileNetV3와 Resnet18을 대충 학습하여 EC2에서 돌려봤다. Resnet18의 경우 서버가 터지진 않았지만 결과가 나오는데 너무 오래 걸렸고, MobileNetV3의 경우 1초 안쪽으로 결과가 나왔다. 그래서 성능을 약간 포기하더라도 MobileNetV3을 사용했다.

MobileNetV3도 keras를 이용하여 transfer learning을 했고 Accuracy가 0.85 정도로 꽤 괜찮은 수준이었다.

CORS(Cross-Origin Resource Sharing)

로컬에서 개발할 때 vue를 돌려주는 vite 서버는 5138번 포트에 열리고, 서버는 80번 포트에서 열리기 때문에 CORS문제가 발생했다.

이 문제를 해결하기 위해 두 가지 방법을 시도했다.

• vue에서 proxy 서버를 둬서 cors가 발생하지 않게 우회하는 방법
• 서버에 middleware를 둬서 CORS를 피하는 방법

첫 번째 방법엔 로컬에서 테스트할 땐 문제가 없었으나 프론트엔드 서버를 따로 두지 않고 서버에 배포를 하다 보니 문제가 생겼다.

vue 파일을 빌드하여 static 파일들을 서버에 올려서 돌리다 보니 당연하게도 새로운 포트가 열리지 않고 프록시를 사용할 수 없었다.

그렇기 때문에 서버에서 이 문제를 처리해야 하는 두 번째 방법을 이용해야 했다. 하지만 middleware에서 origin을 설정해서 잘 작동하는 것을 확인하면서 보니 약간의 모순이 있었다. 프론트 코드를 서버에 올려서 같은 서버 위에서 돌아가니까 당연히 api를 같은 포트에서 호출하고 cors문제가 생길 이유가 없었다. 로컬에서 테스트하다 보니 이 부분을 간과하여 이 문제를 해결하기 위해 많은 시간을 쏟았던 것이었다. 결론적으로 문제는 애초에 없었던 것이고 괜한 삽질을 했던 것이다. 

UX UI 문제

내 똥 같은 디자인, UI, UX실력을 믿지 못하기 때문에 디자인을 하는 친구에게 디자인을 부탁했다.

정말 천사같은 친구다...

일단 금손 친구 덕분에 디자인은 괜찮게 나온 거 같다. (어떻게 저 그림을 보고 그렇게 만들어 오는지 진짜 신기하다...)

그런데 막상 지인들에게 사용을 시켜보니 UX 부분에서 많은 피드백이 들어왔다. 이 문제는 끊임없이 들어와서 끝나지 않는 문제인 것 같지만 일단 고치고 있고 계속해서 고칠 예정이다. 아직 해결되지 않은 문제다.

들어온 피드백으론 대표적으로 이런 것들이 있었다.

• 결과가 나온 창에서 다시 처음 창으로 돌아가는 버튼을 만들어줘라 - 해결했다
• LIME 결과 이미지가 뭘 의미하는지 모르겠다. 설명이 필요해 보인다 - 간단하게 설명하는 걸 만들었지만 설명이 부족한 것 같다. 더 좋은 멘트를 고민해보고, 생각난다면 추후에 멘트들을 수정할 예정이다.
• 모바일 버전 화면을 만들어줘라 - 이건 생각은 했지만 너무 귀찮은 작업인 것 같아 미루고 있다...

Docker port 열기(그냥 삽질)

dockerfile에 EXPOSE 80를 추가하면 당연히 80번 포트가 열리면서 서버가 열릴 줄 알았다. 하지만 docker run -p 80:80과 같이 -p 옵션을 이용해서 run을 해야 포트가 외부에 공개되는 것을 몰랐다. 

EXPOSE는 호스트와 연결하는 포트를 설정할 뿐, 몇 번 포트가 호스트와 연결되었는가를 공개하지는 않는다고 한다.

도커를 제대로 몰라서 생긴 문젠데 이 문제를 해결하는데 엄청난 시간을 사용했다. 하지만 덕분에 nginx문제인 줄 알고 nginx에 대해서 좀 열심히 찾아보고 이것저것 많이 시도해봤다. nginx랑 약간 친해지는 계기가 됐을지도,,

후기

개발을 시작하기 전에 나의 목적대로 다양한 분야들을 한 사이클 겪어보면서 많은 경험들을 할 수 있었다. 프론트와 백엔드가 어떤 작업들을 해야 하고, 어떤 문제들이 발생할 수 있는지 약간이라도 경험해볼 수 있는 좋은 기회였고, ML 모델도 성능만 높은 모델보다 서비스에 맞는 모델을 찾으면서 배운 것들이 많이 있는 것 같다. 무엇보다 개발하는 과정이 매우 즐거웠다.

또 모니터링을 해보니 생각지도 못한 문제들이 발생하는 것 같고, 해야 할 다음 과제들이 보이는 것 같아 공부할 거리가 많아져 더 좋은 것 같다. 앞으로 이 문제들을 해결하면서 많은 공부와 경험이 될 것 같다.

 

TODO

주변 사람들에게 테스트를 시켜보고 모니터링을 해보니 모델 부분에서 고쳐야 할 문제가 많아 보인다. 차차 해결하는 대로 트러블슈팅 쪽으로 올려서 글을 수정하겠다.

• 정보가 없는 사진 업로드 시 결과가 화이트 테리어로 수렴하는 것 같다 - Unknown class 또는 잡종과 같은 class를 추가하여 항목에 없는 개를 처리해야 할 것 같다.
• 클래스가 너무 적음 - 데이터가 부족한 이유로 10종밖에 넣지 못했는데 크롤링이든 뭐든 열심히 데이터를 모아서 class를 수정해야 할 것 같다
• 배포 자동화