[Firebase] 파이어베이스로 React 앱 호스팅하기

Firebase Hosting

 이미 파이어베이스 프로젝트가 만들어져 있는 상황이다.

 

왼쪽 사이드바에서 빌드-Hosting으로 들어간다.

시작하기를 누르고 화면에 안내되는 순서대로 진행하면 된다.

 

Firebase CLI 설치

 

npm 명령어를 복사해서 터미널에서 실행하여서 필요한 도구를 설치해준다. 

 

프로젝트 초기화

우선 firebase login 명령어로 로그인을 해준다.

 

 

y를 입력하면 자동으로 외부 웹사이트로 연결되고 파이어베이스를 가입할 때 사용한 구글 이메일을 이용하여 로그인을 할 수 있다.

 

이렇게 하면 손쉽게 로그인할 수 있다.

잘 로그인됐는지 확인하기 위해 firebase login 명령어를 다시 입력해보면 이미 로그인되어 있다는 메세지를 확인할 수 있다.

 

이제 프로젝트의 루트 디렉토리에서 firebase init 명령어를 입력한다.

그리고 아래 순서대로 설정을 진행한다.

Hosting: Configure files for firebase Hosting and (optionally) set up Github Action deploys 선택

Use an existing project 선택

Hosting할 firebase 프로젝트 선택

아직 빌드를 안해봤다면 여기서 잠깐 멈춘다. bundle이 어디에 빌드되는지 확인해주어야 한다.

package.json에서 확인해보니 npm run build로 프로젝트를 빌드할 수 있는 것을 알 수 있다.

터미널에서 npm run build를 실행하면 dist 폴더에 빌드된 것을 알 수 있다.

그럼 초기화하던 터미널창으로 돌아와서 빌드 결과물이 저장되는 폴더인 dist를 입력해준다.

그리고 남은 3개의 옵션을 설정해주면 끝이다.

다 완료되면 이렇게 .firebaserc, firebase.json 파일이 생성된다.

이제 배포하기 위한 명령어를 추가해준다.

package.json에 해당 내용을 추가해주면 간단한 명령어를 통해 배포할 수 있다. 

nodejs가 deploy 전에 predeploy를 자동으로 실행해주기 때문에 위 2개의 명령어를 설정해두면 deploy 명령어 하나만 입력해도 자동으로 빌드해서 배포해준다.

 

모두 완료되었다면 콘솔로 이동해준다.

아직 배포를 하지 않았기 때문에 대시보드에 아무것도 뜨지 않는다.

 

프로젝트 배포

이제 npm run deploy를 실행하여 배포를 해보자!

배포 성공!

아래 url로 들어가면 배포된 React 앱을 확인할 수 있다.

https://nwitter-64113.web.app/login

이제 대시보드에도 배포된 버전이 뜬다

 

 

Security Rules

그렇지만 배포했다고 다 끝이 아니다. 코드에 API Key가 그대로 노출되어 있기 때문에 보안을 위한 조치가 필요하다. 사용자의 브라우저에서 Firebase를 호출해야 하기 때문에 API Key들은 사용자들에게 노출될 수 밖에 없다. 이 점을 이용하여 남의 데이터를 삭제하는 것과 같은 일이 벌어질 수 있으므로 Security Rule을 꼭 설정해주어야 한다.

 

우선 Firebase Database로 이동하여 규칙(Rules)를 클릭한다. 그럼 아래와 같이 규칙을 편집할 수 있다.

nwitter 프로젝트의 규칙은 아래의 내용으로 설정해줬다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /tweets/{doc} {
      allow read, create: if request.auth != null
      allow delete, update: if request.auth.uid == resource.data.userId
    }
  }
}

이렇게 설정해주면 tweets 콜렉션의 document에 대해 로그인된 사용자는 read, create가 가능하고, 자신의 게시물에 대해서만 delete, update 기능을 사용할 수 있다.

 

write는 create, delete, update를 모두 포괄하는 단어이므로 따로 권한을 설정해주려면 따로 쓴다.

resource는 사용자가 수정/삭제하려는 document를 의미한다.

 

database의 규칙을 설정했다면 이제 storage의 규칙도 설정해준다.

database와 마찬가지로 규칙(Rules)로 들어가서 편집할 수 있다.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null && request.resource.size < 2 * 1024 * 1024;
    }
  }
}

로그인된 사용자만 read를 할 수 있고, 업로드하는 사진의 사이즈를 1MB 이하로 제한하도록 설정해주었다.

 

 

API Key Security

storage와 Firestore의 보안은 확보했지만 여기서 끝내면 안된다.

API Key를 사용처를 제한하여 다른 도메인에서 우리 API Key를 사용하지 못하도록 만들어주어야 한다.

그렇기 위해 아래의 url로 이동하여 제한사항을 설정해주어야 한다.

https://console.cloud.google.com/apis/credentials

Google 클라우드 플랫폼

현재 배포 중인 프로젝트를 선택하면 보안을 확보하지 못한 Browser Key를 확인할 수 있다. Browser Key를 눌러서 들어가면

애플리케이션 제한사항 설정에서 어떤 디바이스 또는 IP 주소가 API Key를 사용할 수 있을지 정할 수 있다.

나는 웹사이트에서만 사용할 수 있도록 웹사이트를 선택하였다. 그리고 어떤 웹사이트에서 API를 사용할 수 있을지도 설정해주어야 한다.

배포한 프로젝트 주소를 입력해준다.

이제 이렇게 하면 http://localhost:5173 이런 로컬환경에서는 API를 호출할 수 없다. API Key를 갖고 있더라도 설정한 domain이 아니라면 API가 작동하지 않는다. 그러므로 개발하는 동안에는 localhost 주소를 추가해놓아야 한다.