ChatGPT API를 활용한 웹 서비스 만들기 - 3일차(프론트, 백엔드 배포)

프론트엔드 배포 -> 클라우드플레어

 

심플하게 클라우드플레어 홈페이지에 가입후, 페이지 - create a project을 통해 프론트엔드 폴더를 올려 배포할 수 있었다.

git 페이지와 연동하는 방법도 있지만 백엔드 연동시 api키 할당 등 번거로운 부분들이 있어 폴더를 올리는 방식으로 선택

 

프론트엔드 배포 완성!

 

 

백엔드 배포 - AWS Lambda

 

부트캠프에서 프로젝트를 진행할땐 AWS EC2를 사용해 컴퓨터를 빌려 서버를 돌리는 방식으로 백엔드 배포를 구현했었다. 하지만 개인적인 프로젝트로 EC2를 사용하기엔 비용적인 문제도 있고, 비교적 단순한 프로젝트기 때문에

AWS Lambda를 통한 서버리스 아키텍처를 활용해 백엔드를 배포하기로 했다.

람다의 경우 리눅스 설정 등이 필요없이 함수만 생성하면 되어 굉장히 편함!

 

Node.js 설정해주고 함수생성 ㄱㄱ

 

코드소스 페이지에서 .zip파일 형식으로 backend 폴더를 업로드하면 준비완료!

process.env로 api키를 설정해 줄 수 있으려나? 일단 코드 안에 집어넣었다..

 

 

 

그리고 처음 예제를 공부하면서 배운 점인데, 제한시간의 기본 설정이 3초로 매우 짧기때문에 에러가 일어나기 쉬워 넉넉하게 변경해주어야 한다.

 

3초 제한시간은 너무짧으므로

 

넉넉하게 최대로!

 

 

프록시 설정 - API Gateway

 

리소스 생성

새 api 생성

 

리소스 생성

프록시 리소스로 구성

 

Devasi 함수 연결

 

 

 

API 배포

 

 

 

 

 

이제 프론트엔드 페이지에서 await fetch 요청을 위 주소의 /prod/Devasi로 보내면 된다!

index.html

 

 

작동확인 완료~

 

https://devasi.pages.dev/

DevAsi

 

퍄퍄