firebase-tools를 8계로 버전 업했을 때 webpack의 빌드가 이끼한 이야기

경위

개인 개발로 프런트 엔드에 Vue.js, 백엔드에 Firebase를 이용한 애플리케이션을 만들고 있습니다. (기분이 맞았을 때 작업하고 있으므로 꽤 진행되지 않지만..)

최근 문득 마음껏 npm 패키지의 버전을 올리려고 했는데, firebase-tools 의 버전 업에 고생했으므로 공양해 둡니다.

※버전 업전은 v7.3.2 였습니다.
※ firebase-tools v8.0.0의 릴리스는 2020년 4월 1일이므로, 투고 시점에서 약 반년 경과하고 있는 것이 됩니다. .

firebase-tools 사용법

firebase-tools 는 명령줄 도구로 프로젝트 설정, 배포 등을 수행할 수 있습니다.

그러나 커맨드 라인에서 조작 할뿐만 아니라 webpack에서 Firebase 프로젝트를 전환하는 방법에서 소개 된대로 Node.js 코드에서 사용할 수 있으며 webpack loader 처리로 사용할 수 있습니다.

firebase-config-loader.js

// https://medium.com/google-cloud-jp/webpack-multiproject-firebase-55d5bd8beb5d より引用

const firebaseTools = require('firebase-tools')
function FirebaseConfigLoader () {
  const callback = this.async()
  firebaseTools.setup.web().then(config => {
    callback(null, JSON.stringify(config))
  }).catch(err => callback(err))
}
module.exports = FirebaseConfigLoader

firebase-tools v8.0.0에서 무엇이 있었습니까?

자세한 것은 출시 정보 를 봐 주시는 것으로, Breaking Change 가 몇개 있습니다만, 이번 고통받은 것은 이하의 것입니다.

BREAKING: Removes firebase setup:web command (replacement: firebase apps:sdkconfig web ).

읽고 알 수 있듯이 setup:web 명령을 삭제했기 때문에 apps:sdkconfig web 를 사용해라, 라고 지시되고 있습니다 (비추천이 된 것은 v7.3.0 -2019년 8월 28일 릴리스).
커맨드 라인에서는 사용한 적은 없지만 webpack의 loader에서 사용하고 있기 때문에 영향이있었습니다.

최초 대응

처음은 단순히, 지시되고 있는 대로 apps:sdkconfig web 로 호출하도록(듯이) 변경했습니다.

 const firebaseTools = require('firebase-tools')
 function FirebaseConfigLoader () {
   const callback = this.async()
-  firebaseTools.setup.web().then(config => {
+  firebaseTools.apps.sdkconfig("web", "", {}).then(config => {
     callback(null, JSON.stringify(config))
   }).catch(err => callback(err))
 }
 module.exports = FirebaseConfigLoader

그러나 코드를 변경한 후 빌드하면 아래와 같은 에러를 토해 무사히 이끼 버렸습니다.

 ERROR  Failed to compile with 1 errors

 error  in ./firebase-config.json

Module build failed (from ./firebase-config-loader.js):
FirebaseError: There are no WEB apps associated with this Firebase project
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:25:19
    at Generator.next (<anonymous>)
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:4:12)
    at selectAppInteractively (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:23:12)
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:69:39
    at Generator.next (<anonymous>)
    at fulfilled (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:5:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

오류 메시지에서 찾는 코드 수정은 잘못되지 않는 것 같습니다. 하지만, 만약을 위해 커맨드 라인으로부터도 실행해 보았는데, 같은 에러 메세지가 돌아왔기 때문에 코드 이외에 문제가 있는 것을 알았습니다.

$ npx firebase apps:sdkconfig web

Error: There are no WEB apps associated with this Firebase project

오류를 해결하는 방법

에러 메시지로 여러가지 검색해도 핀 포인트의 기사를 찾을 수 없고, 수당 점차적으로 찾았는데 공식의 Firebase를 JavaScript 프로젝트에 추가 를 발견했습니다. 여기에 설명된 대로 Firebase 콘솔에서 "앱 등록"을 통해 해결할 수 있었습니다.



설정한 후 명령행에서 실행하면 확실히 config 를 얻을 수 있는 것을 확인할 수 있습니다. 물론 빌드도 성공했습니다.

$ npx firebase apps:sdkconfig web
✔ Downloading configuration data of your Firebase WEB app
// Copy and paste this into your JavaScript code to initialize the Firebase SDK.
// You will also need to load the Firebase SDK.
// See https://firebase.google.com/docs/web/setup for more details.

firebase.initializeApp({
  "projectId": "...",
  "appId": "...",
  "databaseURL": "...",
  "storageBucket": "...",
  "locationId": "...",
  "apiKey": "...",
  "authDomain": "...",
  "messagingSenderId": "..."
});

결론

이번에 firebase-tools를 v8.0.0으로 버전 업할 때는 두 가지가있었습니다.

코드 수정

Firebase 콘솔에서 "앱 등록"

마지막으로

Firebase 콘솔에서 "앱 등록"이란 일반적으로 Firebase 프로젝트를 만들 때 항상 하고 있는 것일까요?
실은 최근 설정할 수 있게 되었다 · 하게 된 항목이라면 마음 거칠지 않고 보낼 수 있습니다.

참고

webpack에서 Firebase 프로젝트를 전환하는 방법

htps : // 메이 m. 이 m / go g ぇ-c ぉ d djp / ぇ b pack-m l 치 p 로지 ぇ ct

firebase-tools v7.3.0 release

htps : // 기주 b. 코 m / 후레 바세 / 후레 바세 - 와 ls / 레 아세 s / 타 g / v7.3.0

firebase-tools v8.0.0 release

htps : // 기주 b. 코 m / 후레 바세 / 후레 바세와 ls / 레 아세 s / 타 g / v8.0.0

Firebase를 JavaScript 프로젝트에 추가

htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / ぇ b / 세츠 p # 레기 s r 아