본문 바로가기
Firebase/Nomadcoder Twitter

# 6.0 Deploy

by aeyong-dev 2024. 1. 25.

Firebase 강좌의 마지막, Deploy이다. 

Firebase console에서 hosting의 get started를 누르면 firebase CLI를 설치하라고 한다. 

명령어를 복사해서 설치해주자. 

 

$ firebase login

 

로그인 명령어로 로그인해준다. 본인은 이미 firebase에 로그인돼있는 상태였다. 

 

$ firebase init

 

프로젝트를 초기화해보자. 

선택사항들이 주루룩 뜰 것이다. 

그 중 firebase hosting을 선택하고, 존재하는 프로젝트를 사용하기로 선택한다. 

잠시 멈추고 다른 터미널을 열어 npm run build 명령어를 통해 빌드해준다. 

build라는 새 폴더가 생긴 것을 확인할 수 있다. 

이전의 터미널로 돌아와 이 build 폴더를 빌드 디렉토리로 선택해주면 설정은 완료된다. 

 

강좌에서는 package.json에서 script를 생성해줬는데, 굳이 그럴 필요는 없다. 

npm run build

firebase deploy

위 두 명령어를 차례로 입력해도 큰 문제는 없다. 

 

이렇게 해서 간단하게 배포는 완료되었다. 

firebase console에서 배포된 상태를 확인할 수 있다. 

 


우리의 앱에는 보안 문제가 있다. 

기본적으로 firebase를 사용하였기 때문에 백엔드가 존재하지 않는다. 

그 말인 즉, 프론트엔드를 통해 모든 것을 처리한다는 말이고, 

누군가가 reverse-engineering을 시도해 프론트엔드를 해킹할 수 있다는 뜻이다. 

이를 막기 위해 firestore, firestorage는 console에서 rule을 추가할 수 있다. 

권한을 부여하는 대상에 대해 작성하는 공간이라고 볼 수 있다. 

아래는 firebase database의 rule이다.

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
    }
  }
}

read, create를 허용하는 경우는?: request.auth != null, 즉 사용자가 로그인 한 경우이다. 

delete, update를 허용하는 경우는?: 사용자의 uid와 resource.data.userId, 즉 document data에 있는 userId가 같은 경우에만 허용한다. 

 

firestore storage에서도 이와같이 작성할 수 있다. 

match /{allPaths=**} {
      allow read: if request.auth != null
      allow write: if request.auth != null && resource.size < 2* 1024* 1024
    }

 

쓰기 권한 코드에서 사용된 resource.size는 파일의 사이즈가 2*1024*1024 = 2MB 보다 작은 경우에만 허용한다는 뜻이다. 

이 외에도 정말 많은 옵션이 있으니 공식 문서를 참조하자.


API Key는 사용자에게 공개된다. firebase에 요청을 보내려면 이 key를 사용해야하므로 당연하다. 

하지만 이 API Key가 어디서 사용될지는 제한을 할 수 있다. 

console.cloud.google.com/apis/credentials 

위 주소에 접속하여 우리의 프로젝트를 선택하고, API Key 주소를 누른다. 

이 API Key 주소는 firebase에 의해 자동으로 생성된 주소다. 

애플리케이션 제한 사항 설정에서 '웹 브라우저'를 선택하고 프로젝트의 도메인을 추가한다. 

이렇게 설정하고 저장함으로서 우리 도메인 외에는 API를 사용할 수 없게 된다. 

 


 

firebase usage, end

'Firebase > Nomadcoder Twitter' 카테고리의 다른 글

#5.0 User Avatar  (0) 2024.01.23
#4 Tweeting  (0) 2024.01.19
#3 Authentication  (0) 2024.01.02
#2 Setup  (0) 2023.12.27
#1. Introduction  (0) 2023.12.25