Firebase Storage 규칙 수정 불가 오류 해결

개요

지난 7주 동안 교내 경진대회에서 발표 목적으로 Vue.js를 활용하여 웹 애플리케이션을 구현하는 경험을 하게 되었다. 작년에 2개월 간 인턴으로 있었던 회사에서 만들어본 이후로 오랜만에 만져보는 Vue여서 꽤나 헤맸는데, 곧 감을 잡고 몰두하고 있는 나 자신을 발견할 수 있었다.

주요 기능 중에 사용자가 선택한 이미지를 API단에 전송하여 (POST) 이미지를 분석한 결과를 JSON 형태로 받아 시각화하는 것이 있었는데, 문제는 여기서 발생했다.

https://api.project.io/endpoint?image_url=" ... "

우리가 사용한 API의 엔드포인트는 이런 식으로 parameter로 이미지의 URL을 받도록 만들어졌다. 개발 당시에는 별 문제 없을 것이라 상정했다.

1. 이미지를 업로드한다.
2. 업로드한 이미지를 Base64 형태로 변환한다.
3. Base64로 변환된 이미지 데이터를 image_url의 값으로 넣는다.

이렇게 하면 괜찮을 줄 알았다. 이게 잘 됐으면 이런 삽질을 하게 되지는 않았을 것이다. Base64로 변환하는 것까지는 어렵지 않았으나, API가 그 데이터를 받아들이지 못해서 400 bad request를 미친듯이 찍어냈다.

결국 회의와 연구를 거쳐 웹상에 이미지를 업로드해서 그 URL을 반환받아 파라미터 값으로 주기로 했다. 이미지를 업로드하는 곳은 Imgur와 Firebase 중에 고민하다가 기능의 안정성과 업로드 속도를 고려하여 Firebase로 결정했다. Vue와 Firebase를 연동하는 방법은 인터넷에 검색하면 많이 나와 있다.

 

나의 경우에는 이 글을 참고하여 작업했다.

Upload images to Firebase storage with Vue.js

 

규칙 수정 오류

문제는 Storage의 보안 규칙을 수정할 때 발생했다. 모든 사용자가 인증 없이도 Storage에 이미지를 업로드할 수 있도록 다음과 같이 걸정해 주어야 하는데, 자꾸 알 수 없는 오류가 발생했다고 한다. Firebase 프로젝트를 삭제하고 아예 처음부터 다시 생성해 보아도 마찬가지였다. 여러 시행착오 끝에 Firebase 공식 문서를 샅샅이 찾아보았고, 해결 방안을 찾을 수 있었다.

1. Storage 규칙을 직접 파일로 받아서 수정하고
2. 수정한 규칙 파일을 프로젝트에 deploy해서 적용시킨다. 

삽질한 시간에 비해 어렵지 않은 해결이어서 뭔가 허탈했다.

 

해결 과정 

$ npm install -g firebase-tool

우선 Firebase 기능을 CLI로 활용할 수 있도록 npm으로 firebase-tool을 Global install 해준다.

$ firebase login
$ firebase init

그 다음 Firebase 서비스에 로그인하여 인증 허가를 받는다. 인터넷 브라우저 팝업이 나오는데, 거기서 자신의 구글 계정으로 로그인하면 된다. 로그인하기 전에는 뒤에 나올 내용들을 수행할 수 없으니 꼭 선행해야 한다. 나중에 firebase logout 로 로그아웃할 수 있다.

로그인을 했으면 Vue 프로젝트 폴더 내에서 Firebase 프로젝트 설정을 직접 설정하기 init 명령어를 입력한다. 이 명령어는 대화 방식으로 현재 디렉터리 내에서 Firebase 프로젝트를 구성하거나, 이미 만들어 둔 Firebase 프로젝트 기능을 초기화 및 설정할 수 있게 해주는 역할을 한다.

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  D:\workspace\image-detection

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. 
 ( ) Functions: Configure a Cloud Functions directory and its files
 ( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Hosting: Set up GitHub Action deploys
>(*) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
 ( ) Remote Config: Configure a template file for Remote Config
 ( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
(Move up and down to reveal more choices)

 

이런 식으로 뭔가 나오는데, 진행할 준비가 되었냐고 하는 단계에서 Yes를 하면 여러 옵션들이 나온다.

우리는 Storage 관련 규칙 설정을 수정할 것이기 때문에 Storage 옵션을 선택한다. 중복 체크가 여기서 호스팅, 클라우드, 데이터베이스 등 설정을 더 만지고 싶은 게 있다면 함께 선택해주면 된다.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Storage: Configure a security rules file for Cloud Storage

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

 

앞서 만들어 둔 프로젝트의 Storage를 사용할 것이기 때문에, Use an existing project 옵션을 선택한다. 그러면 로그인된 Firebase 계정에 있는 프로젝트의 이름들이 쭉 나열될 것인데, 거기서 해당하는 프로젝트 이름을 선택한다.

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules
+  Wrote storage.rules

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

Firebase의 Storage 규칙은 기본적으로storage.rules

라는 이름의 파일로 저장된다고 한다. 여기서는 디폴트 설정으로 했는데 파일 이름을 바꾸고 싶으면 원하는 이름으로 바꿔주면 된다.

 

Firebase 관련 파일 3개 (.firebaserc, firebase.json, storage.rules) 가 디렉터리 내에 생성된 것을 확인할 수 있다.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

 

 

storage.rules파일을 확인해 보면 아까 웹 Firebase 콘솔에서 고치려고 하면 에러가 났던 Storage 규칙이 적혀있다는 것을 확인할 수 있다. 이제 이 파일을 수동으로 고쳐준다.

다른 사용자가 인증 없이도 Storage 읽기/쓰기를 할 수 있게 하려면 5번째 줄의 null 부분을 true로 바꿔면 된다. (물론 보안상 굉장히 취약한 코드인 것은 유념해야 한다... 프로젝트 기간이 굉장히 짧았기 때문에 이 부분을 신경쓰지 못한 건 굉장히 아쉽다.)

 

$ firebase deploy

=== Deploying to 'project-name'...

i  deploying storage
i  firebase.storage: checking storage.rules for compilation errors...
+  firebase.storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
+  storage: released rules storage.rules to firebase.storage

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-name/overview

이제 변경한 규칙을 적용시킬 차례다. deploy 명령어를 실행하면 컴파일 및 문법 오류 검사 후 이상이 없다면 변경된 규칙을 Firebase 프로젝트에 적용시킨다.

 

브라우저로 Firebase 콘솔에 들어가 보면 성공적으로 규칙이 수정되었다는 것을 확인할 수 있다.