ChatGpt api로 운세 보는 챗도지 만들기

나의 첫 chatGpt를 활용한 웹사이트 만들기

 

기술스택은 다음과 같다.

html , css, javascript 

그리고 배포는 Aws Lambda와 cloudflare로 진행한다.

 

Frontend와 Backend 폴더를 따로 만들어 진행하고

 

Forntend 파일의 배포는 cloudflare로 진행하고,

Backend 파일의 배포는 AwsLambda로 진행한다.

 

Api와 모듈 그리고 node js

node js는 서버백엔드로 사용한다.

api는 open ai 를 사용하고

npm module 은 serverless http와 express 이다. 

 

따라서 json파일에서 node js와 open ai, serverless http, express가 잘 설치되어있는지 확인하면 된다.

 

배포에 사용되는 사이트는 둘다 무료이며 특히 AwsLambda는 2차 otp인증을 꼭 하기 바란다.

왜냐하면 요즘 해킹을 받아 과금되는 사례가 많다고 하니

otp어플을 다운받아서 2차인증을 하는 방법을 이용해 google 2차 otp인증을 검색해서

여러 블로그들 중 하나를 따라해보면 쉽게 따라할수 있다.

 

간단한 환경설정을 하고 프론트 엔드 하나의 파일안에 html과 css javascript를 

한번에 다 사용했다.

이 강의는 javascript기초를 알고 있는 사람이 하기에 더 적합한 강의 였기 때문에 기초는 알아야 이해하기가 

더 수월할것 같다.

 

나는 javascript중에서 주로 event나 객체가 헷갈리시는 분들은 기초 개념은 한번 더 공부하고 이해가 수월할것같다고 생각한다.

물론 나도 헷갈리기 때문에 모든걸 이해한것은 아니였고, 따라하면서 모르는 개념은 한번더 짚고 넘어갔었다.

 

가장 난이도가 있었던 개념은 배포 였다

그래서 이번 글에서는 배포에 대한 내용을 간략히 담았다.

자세한 내용은 조코딩님의 chatgpt로 웹사이트 만드는 강의를 들어보길 바란다.

 

경험상 Aws lambda를 이용한 배포는 특히 쉽지 않았었다. cors로 인한 에러나.

 

사용법은 간단히 말하자면

우선 가입을 한다.

함수를 생성해준뒤

코드에 들어가 백엔드 코드를 따로 zip파일로 업로드를 시켜준다.

chatgpt api는 서버 응답이 오래걸릴 수도 있기 때문에

구성에서 편집 버튼을 누른뒤

오류를 최대한 줄여주고 원할하게 서버랑 연결하기 위해

메모리를 256M 로 늘려주고, 응답 시간이 15분이 최대이기 때문에 15분으로 늘려준다.

함수생성을 하게되면 이렇게 뜬다

그뒤 APIgateway를 열어주게 되는데 APIgateway는 restAPI를 생성해주면 된다

그리고 

 

API리소스에서 리소스 옆 작업버튼을 누르면 리소스 생성 버튼이 있다.

리소스를 생성해주고

프록시 리소스로 구성을 체크하면

이렇게 뜨게되는데 밑에 API Gateway CORS활성화 버튼까지 눌러준뒤 리소스 생성 버튼을 누르면 된다.

그러면 이러한 화면이 뜨게 된다.

다음으로 스테이지에 prod를 생성해줘야하는데

이렇게 배포버튼을 클릭해서 배포를 클릭한뒤 생성버튼을 누른다.

그러면 prod가 생성이 되게 되고

prod에 스테이지편집기 에 URL호출 버튼이 뜨게 되면서 완성이 된다

이때 성공적으로 했는지 확인하려면 해당 URL에 들어가 URL의 뒤에 함수명을 입력하면 된다 

ex) http:~~/prod/함수명 을 입력해보았을때 cannot get~이라고 뜨면 성공한것이다

그 뒤로 html파일에 해당 API엔드포인트 주소를 뒤에 {proxy+} 를 빼고 입력해준뒤 함수명을 넣어주면 된다.

 

cloudfare는 

pages에서 create a project를 눌러서 생성해준뒤 frontend파일을 업로드 해주면 된다.

domain이름도 설정하는것을 잊지말아야한다.

나중에 테스트 해볼때 여기 사이트에 방문해서 확인해보는것이 정확하다.

 

굉장히 간략히 적었지만 몇번 따라해보다보면 쉽게 알수 있을것이라고 생각한다.