<파이어베이스> 배포 및 보안

 

1. 배포

* 준비

 - cra를 깃허브를 통해 배포하기위해 패키지를 하나 설치해야한다. 아래의 명령어로 설치하자.

 

npm i gh-pages

 

 - 설치가 완료되면 package.json 파일을 수정해야한다. 먼저 패키지를 설치했을 때 안내문구가 떴을 것이다. 이를 따라 "homepage" 를 추가해주자.

 

"homepage": "https://haesoo9410.github.io/testtest"

 

 - 위 처럼 작성한다. 가장 끝에는 연결된 레포지토리를 작성한다. 연결된 레포지토리 확인은 git remote -v 를 입력하여 확인할 수 있다. 만일 연결된 레포지토리가 없다면 remote명령어로 연결시켜야한다.

 

* 배포

 - 배포를 위한 스크립트를 작성하자. 아래의 두 명령어를 package.json의 스크립트에 추가한다.

 

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

 

 - 이제 npm run deploy를 실행하여 배포를하자.

 

 - 배포완료 메세지가 출력되면 위에서 작성한 홈페이지에 접속하면 배포가 된 것을 볼 수 있다.

 

 

2. 보안

* 도메인

 - 위에서 배포한 홈페이지에 접속하여 로그인을 하면 오류를 만나게 된다.

 

 - 이는 승인되지 않은 도메인에서 접속했기 때문이다.

 

 - 파이어베이스 콘솔의 Authentication에서 Sign-in method 탭을 들어가서 이를 설정할 수 있다.

 

 - 도메인 추가를 눌러서 올바른 도메인을 입력하자.

 

 - 이제 올바르게 접속이 될 것이다.

 

 - 여기서 두 번째 칸에 있는 파이어베이스 앱 주소는 기억해두도록하자. 아래에서 사용한다.

 

* API키

 - 우리는 기존에 .env 파일을 사용하여 API키를 숨겼으나 이는 완벽하지 못하다. gitignore로 깃허브에 올라가지 않도록 막았을 뿐 빌드가 되면 올라갈 수 밖에 없기 때문이다.

 

 - API키를 제한하기 위해 구글의 클라우드 플랫폼에 접속하자. (https://console.cloud.google.com/apis/credentials)

 

 - 파이어베이스와 동일한 계정으로 로그인한 뒤 프로젝트를 선택하면 위와 같이 사용자 인증 정보를 확인할 수 있다.

 

 - Browser key를 클릭하여 api키를 제한해보자.

 

 

 - HTTP 리퍼러클 클릭하여 항목을 추가한다.

 

 - 먼저 우리의 홈페이지/* 을 입력하여 추가한다.

 

 - 추가로 로컬호스트와 위에서 기억해뒀던 현재 파이어베이스 인증 주소를 입력하고 저장하자. 이는 로그인할 때 쓰이는 주소이다.

 

 

 

---

참고

 

Watch Now - 노마드 코더 Nomad Coders

 

Google Cloud Platform

 

 

---