🐭 이거 왜 하는 건데?

API 노출 위험

현재 Open API로 사용중에서 큰 타격이 없다 대신 많은 사람이 똑같은 API Key를 사용하여 특정 사이트는 사용이 불가능 해지거나 오류가 날 수 도 있다 이것보다 더 위험한건 실제 기업에서 서버를 만들었을때 필요한 API Key가 노출될 경우에는 내 정보 다 가져가라고 하는거랑 다를게 없다 그렇다면 이 API Key를 다른 사람이 볼 수 없게 할려면 어떻게 해야하는가 그중하나가 .env 파일에 API Key를 옮기는것이다 일단 파일을 src 파일에 하나 만들어 주겠습니다

아래 코드를 입력해줍니다

REACT_APP_API_KEY=본인 API 값

이제 기존에 변수 넣었던 API 파일 위치에서 다음과 같이 변경해줍니다

const API_KEY = process.env.REACT_APP_API_KEY;

이렇게 해주면 해당 env 파일에 있는 REACT_APP_API_KEY의 값을 가져올 수 있다 이렇게 하고 정상적으로 api 데이터가 나오면 성공입니다

🐭 이렇게하면 API는 숨긴거야?

env 파일 업로드

그치만 이렇게만 하고 끝내면 의미가 없다 우리가 이제 깃허브에 파일을 올려 gh-pages를 이용해 배포할 건데 그 과정에서 env 파일도 같이 올라가면 결국 env 내부의 변수가 보인다 env 파일이 깃허브에 올릴 때 보이지 않도록 .gitignore 파일에 들어가 env 파일이 배포되지 않도록 막아보겠습니다

해당 파일에서 .env를 넣어주면 이제 env 파일은 깃허브에 올릴 때 같이 안 올라간다 대표적인 예로 위에 /node_modules도 Default로 안올라가게 설정돼 있는 것을 확인할 수 있다 그럼 이제 커밋 이후 폴더 상태를 확인해보겠습니다

보듯이 .env 파일은 업로드가 되지 않았습니다 이렇게 해서 API Key를 숨겼습니다

🐭 진짜 다 숨긴 거야?

프론트의 한계

사실 이렇게만 보면 다 숨겼다고 생각하지만 실제 배포하고 나서 개발자 모드에 network를 들어가면 해당 API가 어떤 URL을 가져오고 있는지 보면 그곳에 API Key 값은 그대로 남아있다 Client-server-rendering 환경인 CRA(Create-react-app)에서는 백엔드 없이 사실 막을 방법이 없다고 한다...

Next JS

그치만 Next JS에서는 next.config.js 파일에서 API를 숨겨 실제 사이트에서도 안 보이게 할 수 있다 요즘 Next JS 공부 중인데 이런 여러 가지 기능 때문에 더 애착이 간다 나중에 Next 관련해서 포스팅도 많이 작성하겠습니다

🐭 이제 배포하는 거야?

GitHub Pages 배포하기

이제 마지막 단계 지금까지 만들었던 사이트를 유저가 볼 수 있게 배포하도록 하겠습니다 우선 gh-pages 패키지를 설치하겠습니다

npm install gh-pages --save-dev

package.json에 Homepage 작성

설치가 완료되면 package.json 파일에 Homepage 링크를 작성해줍니다 해당 링크 위치와 작성 위치를 알려드리겠습니다

http://{사용자 이름}.github.io/{저장소 이름}

또는 아래 setting에서도 확인 가능합니다

그리고 package.json 파일 밑에 scripts 부분에서 아래 내용도 추가해줍니다
이후 배포된 사이트를 수정할 때도 계속 필요합니다

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

이제 셋팅이 끝났습니다 아래 명령어를 터미널에 입력해보겠습니다

npm run deploy

위 사진 내용처럼 나오면 deploy 성공입니다 이제 이전에 홈페이지 링크를 확인했었던 setting으로 들어가 Branch를 변경하겠습니다

gh-pages 로 변경한 후 save 하고 몇 분 기다리고 해당 사이트로 들어가면 우리가 만들었던 페이지가 나옵니다

정상적으로 페이지가 나오는 것을 확인할 수 있습니다

🐭 이제 뭐 할 거야?

마무리 포스팅 작성하겠습니다

TVING 클론코딩 - 10 완료