로컬에서 테스트를 하고 깃페이지로 배포까지 마쳤다.
소스를 보면 관련 소스들은 불러오는데 오류가 발생되어 빈 페이지가 보여졌다.
Your API key is invalid, please check you have copied it correctly.
파파고 번역 : API 키가 잘못되었습니다. 올바르게 복사했는지 확인하십시오.
로컬에선 잘 됐는데?
env 파일이 루트 파일에 미존재하거나
api 인증 정보가 잘 못 입력됐거나
혹은 관련 파일은 import를 잘 못했거나.
이 중 하나라는데, 난 로컬에서 잘 됐기에 뭐가 문제일까 보는데..
env파일이 없다?!
분명 난 생성을 해서 로컬에서 돌렸는데, 이럴 수 있는건가?
.env 파일은 package.json과 같은 루트에 존재해야 한다고 한다.
env파일은 보안이 필요한 키등을 숨기기 위해 존재하는데,
보안을 위해 깃허브에 .env는 올라가지 않도록 제외 된 상태이다.
완벽한 보안까진 아니라고 하나,
깃허브에 올라가지 않는 것만으로도 보안 위협을 크게 줄일 수 있다고 한다.
.gitignore 파일에서
#misc 아래 .env 를 추가해준다.
그럼 배포해선 어떻게 저 env파일을 불러오지?
빌드파일엔 어차피 보여진다는데?
-
이 글을 쓰고 난 뒤 인증 키를 불러오지 못하는 오류가
배포하지 않은 기존 브랜치에도 보여졌다.
결국 .env 파일의 부재 때문이었는데,
배포 할 브랜치(나는 master)에 .env 파일이 있는지 확인 후빌드를 진행했어야 했는데, 이게 빠졌었나보다.
.env 파일까지 확인 후 > npm run deploy를 통해 gh-pages배포까지 진행해준다.
참고로, package.json - scripts에서
이렇게 되어 있으며,
> npm install gh-pages 를 통해 도구 설치까지 완료 후에 실행되어야 한다.
.env 파일 때문이라는 걸 찾는데 또 오랜 시간.
찾았으나 배포 시 왜 안되는지 찾는데도 너무 오랜시간을 쏟았다 ㅠㅠ
역시 문제를 해결한 다음엔 너무 시원하다 :)