OpenAi API를 활용하여 토이 프로젝트를 진행하고, 그 과정에서 얻은 인사이트와 경험을 공유하려 합니다. 이 프로젝트는 OpenAI API를 활용해서 간단한 사이트를 구축해보고 평소 업무 외적으로 평소에 느꼈던 갈증을 해소 할 수 있는 것에 초점을 맞췄습니다.
이번 포스팅은 토이 프로젝트를 진행하면서 얻은 인사이트와 회고에 중점을 두고 프로젝트 시작부터 배포까지 시간의 흐름에 맞춰 글을 작성했습니다.
1. 프로젝트의 시작
평소에 챗지피티를 활용을 많이 하여 OpenAi에 관심이 많았고 자연스레 OpenAI에서 제공하는 API까지 관심을 가지게 되어 AI를 활용해서 간단한 프로젝트를 진행해보고자 했습니다.
또한 회사에서는 NEXT 12를 사용하고 있는데 NEXT 13, 14에서 엄청 많이 바꼈다고 해서 이번 프로젝트에서 학습 겸 겸사겸사 시작해보았습니다.
2. OpenAi Api Key를 숨기자
프로젝트 시작할 당시 제 생각은 이랬습니다.
Next 14로 API 통신이 가능하니깐 Next 14로 화면 만들고 OpenAI API 연동해서 데이터만 뿌려주고 배포는 Vercel에서 무료료 하면 개꿀이겠네?? 라는 생각을 했고 머지 않아 이 생각은 큰 오산이었습니다…
OpenAI Key는 해당 Key를 통해 OpenAi 서버에 요청을 보내면 해당 Key의 주인에게 과금이 됩니다. 그래서 이 OpenAi Api Key를 숨기기 위해 Next.JS에서 제공하는 rewrite() 방식(해당 route호출해서 한번 감싸주는 방식)과 redirect() 를 알아 보고 적용해보았으나 클라이언트 측에서는 어떤 방법으로 API 키를 저장하더라도 난이도에 차이가 있을 뿐 100% 사용자에게 API 키가 노출이 된다고 결론을 내렸습니다.
따라서 API 키와 같은 민감한 정보는 서버 단에서 관리하는 것으로 하고 Express.js를 이용하여 Next에서 보내는 API 요청에 API 키만 추가하여 그대로 API 서버에 전달하는 간단한 중개 서버를 구현함으로 해결했습니다.
3. 배포
기존 계획은 Next.js로 구현 후 프로젝트 내에 API 호출을 통한 Vercel 배포였습니다.
하지만 Express로 중개 서버를 만들어줌으로서 Vercel보단 AWS EC2를 이용해서 하나의 서버에 프론트엔드(Next.JS), 백엔드(Express)가 함께 있는 모놀로식 구조로 배포하려 했는데 추후 확장성을 생각하여 백엔드와 프론트엔드를 분리하려는 방향으로 계획을 세웠습니다.
프론트엔드는 Vercel, 백엔드는 AWS EC2
프론트엔드는 Vercel 자체에서 CI/CD가 너무 잘 제공되어 있어서 따로 신경쓸건 없었습니다.
발급받은 도메인만 연결해주는 정도?
AWS EC2에서 인스턴스 생성 후 백엔드 서버를 올려놨습니다.
포스트맨을 통해 생성된 퍼블릭 IP와 열어놓은 포트로 요청을 받는 것까지 성공했습니다.
4. CORS 에러
가장 많이 시간을 할애한 부분이 아닐까 싶습니다. 이 부분을 해결하기 위해 AWS EC2에 설정한 보안그룹의 인바운드 규칙, SSL 인증, 네트워크 통신 등에 대해 알아봤습니다.
이 과정에서 HTTPS가 적용된 사이트에서 HTTP로 요청을 전송하게 되면 브라우저단에서 Block를 시키는 것과 로드밸런싱과 CORS 에러를 해결하기 위해 npm 라이브러리인 cors에서 allowOrigins를 추가해서 허가된 도메인에서만 요청을 받을 수 있게 하는 등 많은 많은 부분에 대해 고민을 할 수 있던 시간이었습니다.
5. 결론
지금껏 A to Z를 구축하는 프로젝트보단 구축된 서비스를 운영하거나 기존 서비스에서 추가로 개발하는 일이 주였는데 이번 토이 프로젝트를 통해서 당연하게 생각했던 것들이 당연하지 않았다는걸 알게 되었습니다.
결론, 아직 많이 부족하고 공부할게 너무 많다…
마지막으로 이번에 개발한 조촐한 사이트 첨부로 마무리하겠습니다.
AI Lab
© 2024 cmoonjun11@gmail.com All rights reserved.
www.ai-ai.link