API KEY 숨기기 후 다시 빌드 및 배포

API KEY 숨기기 후 다시 빌드 및 배포 

 

 

 

● api key 숨기기 

배포를 하게 되면 여러 사용자들이 볼 수 있기 때문에 API KEY를 숨김 처리 해주는 것이 좋다. 
API KEY가 노출되면 다른 사람이 나만의 API KEY를 무한 사용해 요금이 나갈 수 있는 경우도 있으니 숨김 처리를 해주도록 하자. 

1. .env 파일을 생성해준다. 

 

2. .env 파일안에 api key를 넣어준다 

REACT_APP_API_KEY=  apikey입력

 

 

3. axios.js 파일 안의 코드를 수정해준다. 

 

 

import axios from 'axios';

const instance = axios.create({
  baseURL: "https://api.themoviedb.org/3",
  params: {
    api_key: process.env.REACT_APP_API_KEY,
    language: "ko-KR"
  }
})

export default instance;

 

api_key: process.env.REACT_APP_API_KEY 이렇게 넣어준다. 

 

 

4.  gitignore 파일안에 api key가 적혀있는 .env를 적어주기 

 

 

 

 

이렇게 해주면 배포했을 때 api key는 업로드 되지 않고 

api key를 연결할 수 있게 된다. 

 

 

5. 다시 빌드 및 배포 해주면된다 

 

npm run build

npm run deploy