ChatGPT 클론 프로젝트(2) - React에서 .env파일 사용하기

git에 파일을 올리려고 하니 apikey를 대놓고(?)파일에 작성해서 보안상 이유로 커밋이 불가능했다.

그래서 프로젝트 repository를 지우고 새로 commit 후 env 파일을 세팅하였다.

 

.env 파일 생성(이름없이 만듬)

 

openai.js에서 .env 파일 가져와서 Configuration()에 넣어주기

const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY });

 

 

dotenv는 주로 서버 사이드에서 사용되는 라이브러리이기 때문에, 클라이언트 사이드 React 애플리케이션에서는 직접 사용하기 어렵기에

key명 앞에 REACT_APP_를 붙여서 환경변수를 직접 사용해줘야 한다.

 

---

 

그리고 저번 게시글에서의 환경변수 오류는

해결법 참고링크

https://community.openai.com/t/i-m-using-openai-api-in-nodejs-but-throwing-error/325705/2

openai 업데이트 이후 변경된 듯 하다.

해당 문서 참고하여 openai.js 내용을 수정해주니

콘솔에

Uncaught OpenAIError: It looks like you're running in a browser-like environment. 오류와 함께

new OpenAI({ apiKey, dangerouslyAllowBrowser: true }); 요 내용을 추가해달라고 뜬다.

 

버그수정완료!