Serverless
리액트 개발을 하게 될 경우 api key를 사용하는 경우가 생긴다.
이때 React 앱에서 직접 이 api key를 호출하면 노출될 위험이 있다.
이를 방지하기 위해서 서버리스 함수를 중간에 두고, API key는 서버리스 함수에서만 사용하는 방법을 사용한다.
Vercel
- 프론트엔드 정적 파일을 배포 및 호스팅 하는 기능이 있다.
- github에 연동시키면 코드를 업로드하면 자동으로 배포하는 역할을 한다고 한다. - 서버리스 함수를 제공한다.
- 서버를 함수처럼 만들어놓고, 등록해놓으면 서버를 알아서 관리해준다는것.
npm install -g vercel # 글로벌하게 설치. root 디렉토리에 생성된다.
npm install -g vercel@latest
vercel login이후vercel.com에 접속해서 git으로 로그인 하면 된다.
그럼 이제 우리는 다음 명령어를 통해서 이 vercel 프로젝트에 업로드할 수 있게 되는 것이다.
vercel --prod즉 그럼 하나의 도메인이 생기게 된다.
다음은 Vercel에 우리가 사용할 API키를 등록한다.
Setting -> Enviroment Variables로 간다.
그러면 Key와 Value를 입력하는 칸을 확인할 수 있다.
Key엔 우리가 사용할 Key의 이름을 입력하고,(ex)OPEN_API_KEY)
Value엔 그 키의 값을 저장한다.
- 앞으로 그러면 우리는 이 도메인을 가져다가
React프로젝트에서 사용할 수 있는것이다.
즉 아까 만들어놓은Vercel 도메인을 프로젝트 .env에 이렇게 입력한다.
VITE_OPENAI_API_KEY={도메인 이름}그러면 우리는 이제 웹에서 KEY값의 노출 없이 안전하게 API를 사용할 수 있게 되는 것이다.
