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

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

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





MAKEUSEOF 오늘의 비디오

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



CRA 앱에 환경 변수 추가

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





아주 좋은 MAKEUSEOF 오늘의 비디오

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

.00 hdtv용 수제 안테나

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



그런 다음 API 키 이름에 접두사를 붙입니다. 반응_앱 이와 같이:

REACT_APP_API_KEY="your_api_key"

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



const API_KEY = process.env.REACT_APP_API_KEY

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

.env에 비밀 키를 저장하지 말아야 하는 이유

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



백엔드 코드에 환경 변수 저장

위에서 언급했듯이 비밀 변수를 저장할 별도의 백엔드 애플리케이션을 만들어야 합니다.

리모컨 없이 Apple TV를 켜는 방법

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

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

이 API 엔드포인트를 호출하여 프런트 엔드에서 데이터를 가져와 사용합니다.

const data = await fetch('http://backend-url/data')

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

Next.js를 사용하여 환경 변수 저장

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

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

아래는 예시입니다.

도시 건설 게임 온라인 무료 다운로드 없음 
export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

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

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

React와 달리 변수 이름에 접두사를 붙일 필요가 없으며 다음과 같이 .env 파일에 추가할 수 있습니다.

API_URL=https://secret-url/de3ed3f

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

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

4B479C8FF1390AFADECE0CFFD337D1B5229075

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

API 키 비밀 유지

API를 GitHub에 푸시하는 것은 바람직하지 않습니다. 누구나 키를 찾아 API 요청에 사용할 수 있습니다. 추적되지 않은 .env 파일을 사용하면 이러한 일이 발생하지 않습니다.

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