내가 쓰려고 만든 RESTFUL API 추천 서비스

프로젝트하다가 매일 api 경로를 고민한 지 벌써 10만 번째....

그냥 프롬프트 하나 만들어서 추천서비스 간단하게 만들면 좋지 않을까?라는 생각이 들었다.

제작 이유

1. chat gpt한테 직접 물어보자니 다 설명하기 귀찮기도 하고 얘가 또 말이 얼마나 많던지

2. 간단한 토이 프로젝트로 사용하기 위해

 

그래서 만들어보았습니다.

 

기능

1. 회원가입

2. 소셜로그인

3. chat gpt에게 추천받기

 

 

프로젝트는 Vue3와 SpringBoot 3.2.4를 이용했습니다.

주 기능은 3번입니다.

 

프롬프트

사용자에게 model, method, resource, content를 받아서 추천 3개의 restful api를 뽑아내는 것이 목표.

 

사실 따지고 들어가면 관리자인지 유저인지, 토큰을 사용하는지 등 세세하게 따져야 하지만 해당 서비스를 통해 기본적인 구조는 가져갈 수 있게 만드는 것이 목표였습니다.

 

테스트

딱히 성능이 나쁘진 않은 것 같기도.....

 

 

제작 과정

백엔드는 원래 자체 로그인만 제작하려 했으나, 내가 사용해도 보통 소셜로그인으로 많이 해서 둘 다 제작.

기존 코드를 많이 끌어오기도 했으나, 유효성 검사나 테스트코드에 대한 부족함이 있어 천천히 다듬어갈 예정.

프론트는 Vue3를 이용했습니다. 기존에 Vue2를 잠깐 써봤던 경험이 있지만 사실상 프론트는 주된 목적이 화면을 보여주는 것이었기에... 대부분 gpt를 이용해 제작했습니다.

 

문제점

배포

우선 이번 프로젝트는 젠킨스를 사용 안 하기로 결정. 굳이 유지보수가 많이 일어날 것 같지도 않았고, 수동 배포로 충분하다는 생각이 들었습니다.

백엔드 배포 과정

1. jar 빌드.
2. docker image 생성
3. docker hub로 전송
4. ec2 docker에서 이미지 받아서 컨테이너 생성.

해당 과정으로 수동 배포 진행하였습니다.

프론트엔드 배포 과정

하루 꼬박 쏟았던 부분.

1. Vue3 빌드
2. dist 알집으로 만들어서 ec2 내부로 전송
3. 파일 풀어서 nginx 기본 html이 있는 곳으로 이동
4. nginx.conf에서 dist를 탐색하도록 변경

그러나 여기서 문제였던 부분이 ec2를 사용하는데 아마존리눅스 2023과 우분투는 nginx 기본 경로가 다르다는 것

우분투는 var/www/html인데 아마존은 usr/share/nginx/html이다 (이거 몰라서 진짜 3시간 고생)

 

이후 nginx.conf가 dist폴더를 탐색하지 못해서 2차 난관 발생.
분명 nginx.conf를

위처럼 설정했으나, root를 전혀 인식하지 않고 계속 nginx 기본 html만 열렸던 상황이 발생.

여기도 거의 3시간 헤매었는데, include로 defalut.conf를 하고 있던 상황. 그래서 defalut.conf에서 root를 설정해 주었더니 정상적으로 Vue를 잡도록 만들었습니다.(진짜 고생)

 

 

이제 발생할 문제점

현재 gpt를 무작정 이용하는 것을 막고자 토큰의 개념을 도입해서 하루 2개의 토큰 제공.

매일 12시에 스케줄러를 통해 2개로 갱신하도록 만들었지만, 동시성 문제를 고려해야 함.

만약에 여러 유저가 내 서비스를 동시에 요청한다면? gpt 터질 것 같기도....

또한 유효성 검사 도입해야 함.

프론트에서 막았지만, 만약에 조작된 값이 들어온다면? 백엔드는 뚫린다. 디비의 제약조건이 있지만 아예 초장부터 막는 것이 당연히 리소스적으로 좋다.

 

이제 많은 부분들이 수정될 텐데... 이거 젠킨스 도입해야 하나 고민이다

 

그나저나 이 메인화면ㅇ ㅓ떡하지