블로그

Aug 20, 2023

React 애플리케이션에서 API 키를 저장하고 액세스하는 방법

API로 많은 일을 할 수 있지만 키와 비밀번호를 안전하게 보관하세요.

API로 많은 일을 할 수 있지만 키와 비밀번호를 안전하게 보관해야 합니다.

최신 웹 애플리케이션은 추가 기능을 위해 외부 API를 사용합니다. 일부 API는 키 및 비밀과 같은 식별자를 사용하여 요청을 특정 애플리케이션과 연결합니다. 이러한 키는 민감하므로 누군가가 귀하의 계정을 사용하여 API에 요청을 보내는 데 사용할 수 있으므로 GitHub에 푸시해서는 안 됩니다.

이 튜토리얼에서는 React 애플리케이션에서 API 키를 안전하게 저장하고 액세스하는 방법을 알려줍니다.

다음을 사용하여 생성하는 React 애플리케이션생성-반응-앱 기본적으로 환경 변수를 지원합니다. REACT_APP로 시작하는 변수를 읽고 process.env를 통해 사용할 수 있도록 합니다. 이는 dotenv npm 패키지가 CRA 앱에 설치 및 구성되어 제공되기 때문에 가능합니다.

API 키를 저장하려면 React 애플리케이션의 루트 디렉터리에 .env라는 새 파일을 만듭니다.

그런 다음 API 키 이름 앞에 다음을 붙입니다.REACT_APP이와 같이:

이제 process.env를 사용하여 React 앱의 모든 파일에서 API 키에 액세스할 수 있습니다.

Git이 추적하지 못하도록 하려면 .gitignore 파일에 .env를 추가해야 합니다.

.env 파일에 저장한 모든 항목은 프로덕션 빌드에서 공개적으로 사용할 수 있습니다. React는 이를 빌드 파일에 포함하므로 누구나 앱 파일을 검사하여 찾을 수 있습니다. 대신 프런트엔드 애플리케이션을 대신하여 API를 호출하는 백엔드 프록시를 사용하세요.

위에서 언급한 것처럼 비밀 변수를 저장하려면 별도의 백엔드 애플리케이션을 만들어야 합니다.

예를 들어 아래 API 엔드포인트는 비밀 URL에서 데이터를 가져옵니다.

프런트엔드에서 데이터를 가져와 사용하려면 이 API 엔드포인트를 호출하세요.

이제 .env 파일을 GitHub에 푸시하지 않으면 API URL이 빌드 파일에 표시되지 않습니다.

또 다른 대안은 Next.js를 사용하는 것입니다. getStaticProps() 함수에서 개인 환경 변수에 액세스할 수 있습니다.

이 함수는 서버에서 빌드하는 동안 실행됩니다. 따라서 이 함수 내에서 액세스하는 환경 변수는 Node.js 환경에서만 사용할 수 있습니다.

아래는 예시입니다.

데이터는 props를 통해 페이지에서 사용할 수 있으며, 다음과 같이 액세스할 수 있습니다.

React와는 달리 변수 이름 앞에 아무 것도 붙일 필요가 없으며 다음과 같이 .env 파일에 추가할 수 있습니다.

Next.js를 사용하면 다음에서 API 엔드포인트를 생성할 수도 있습니다.페이지/API 폴더. 이러한 엔드포인트의 코드는 서버에서 실행되므로 프런트 엔드에서 비밀을 마스킹할 수 있습니다.

예를 들어 위의 예는 다음과 같이 다시 작성할 수 있습니다.페이지/api/getData.js파일을 API 경로로 저장합니다.

이제 다음을 통해 반환된 데이터에 액세스할 수 있습니다./pages/api/getData.js끝점.

API를 GitHub에 푸시하는 것은 권장되지 않습니다. 누구나 귀하의 키를 찾아 API 요청에 사용할 수 있습니다. 추적되지 않은 .env 파일을 사용하면 이런 일이 발생하는 것을 방지할 수 있습니다.

그러나 코드를 검사할 때 누구나 볼 수 있으므로 프런트엔드 코드의 .env 파일에 민감한 비밀을 저장해서는 안 됩니다. 대신 서버 측에서 데이터를 가져오거나 Next.js를 사용하여 개인 변수를 마스킹하세요.

Mary는 나이로비에 본사를 둔 MUO의 전속 작가입니다. 그녀는 응용물리학과 컴퓨터 과학 학사학위를 취득했지만 기술 분야에서 일하는 것을 더 좋아합니다. 그녀는 2020년부터 코딩과 기술 관련 기사를 작성해 왔습니다.