Flutter + Github Page + Github Actions로 ChatGPT 웹 프로젝트 시작

내가 연구해서 만든 자연어 모델을 서빙하기 위해 시작한 Flutter

일단은 기존 ChatGPT API를 활용한 간단한 서비스를 만들어봤다.

 

우선은 가비아에서 도메인을 구매

내 이름 영어 스펠링인 Min Dongwook에서 욱(Wook)을 UK로도 쓰는거에서 아이디어를 얻어서

mindong.uk로 구매했다.

 

그 후 기존 ChatGPT에서 아쉬웠던게 Chat과는 좀 거리가 있는 UI여서

그 부분을 수정해서 Chatting 스타일로 UI를 구성했다.

전체적인 컨셉은 iOS의 iMessage

 

모든 코드는 Flutter를 사용해서 만들었으며 Github Actions을 이용하여 자동으로 빌드 및 배포하도록 작성하였다.

간단한 구조는 Flutter 코드를 수정 후 push하면 Actions에서 위 사진의 workflow를 그대로 수행한다.

그러면 Github의 서버? 에서 main 브런치의 코드를 빌드 후 build/web 폴더의 내용들을 gh-pages 브런치로 commit 및 push한다.

 

그 후 Github pages에서는 gh-pages의 코드들로 웹 페이지를 배포해준다.

그렇게 자동으로 빌드 후 배포까지 되는 시스템을 구축하였다.

 

가장 큰 어려움을 겪은 것은 OpenAI의 API 키 인데 

프론트엔드 개발을 이번에 처음 해보고 백엔드에는 지식이 없다 보니까

API를 어떻게 다뤄야하는지 너무 어려웠다.

 

처음에는 Flutter의 dotenv라는 라이브러리를 통해서 .env 파일에서 API를 관리하고 .env 파일을 gitignore에 추가해서 github에는 공개하지 않는 방법이다.

다만 이 방법은 main 코드를 가지고 빌드를 해야하는 특성 상 .env 파일이 필요해서 실패했다.

 

그래서 Github Actions에서 제공하는 Secret 기능을 사용해봤다. 이 기능은 API 처럼 외부에 공개하면 안되는 민감한 정보들을 key:value 형식으로 따로 저장하여 workflow 파일에서 secrets.key를 입력하면 자동으로 value 값이 사용된다

이 방법으로 .env파일을 빌드 후 build/web/assets 폴더에 .env 파일을 만들어 줄 수 있었다.

다만 이 방법은 작동은 잘 되었으나 OpenAI의 정책 상 Github public repository에 API 값이 올라가는 순간

API가 자동으로 삭제된다. 그래서 정상적인 서비스가 불가능햇따.

 

그 후에도 여러가지 방법을 찾았으나 현재 시스템에서 API 키를 공개 없이 구현하는 것이 불가능했다.

 

해결법은 의외로 간단했는데 Github Education에서 학생 계정을 신청해서 Pro 권한을 얻어서 Repository를 Private으로 변경했다.

Private이기 때문에 코드에 API 값을 그대로 사용해도 문제가 없고 OpenAI의 정책도 위반하지 않아서 삭제는 되지 않는다.

 

다만 크롬 개발자 도구를 통해 보면 누구나 API 키를 볼 수 있기 때문에 안전하지는 않다.

 

이러한 부분을 해결하기 위해서는 백엔드에서 API를 보호해줘야 한다는 정도만 알게됐는데

추후 백엔드에 대한 공부도 해서 더 안정적인 방법을 공부해야겠다.