Next JS의 Custom Server 는 기본 세팅에 관련된 내용이고 커스텀 서버와 파이어베이스를 함께 연동하는 방법입니다.
몇일 간 파이어베이스와 커스텀 서버를 연결하는데 애를 먹었습니다.. 🥲 공식 문서도 뒤져보고, 영문 블로그도 서치해봤는데 해답이 나오지 않아서 올리게 된 해결 방법입니다. 완벽한 방법은 아니라고 생각하지만, 최선의 방법입니다. 🥹🙏
✔️ 환경 파악
- 소셜 로그인 API 유저 정보를 가져오는 부분에서 node.js 환경이 필요했고, 유저 정보 받아와서 기존 유저인지 체크하기 위해 firebase store를 순회함
- 프론트쪽에서 이미 firebase 관련 함수들을 많이 사용하고 있었음
결론적으로, 파이어베이스를 프론트쪽에서 90% 정도 쓰고, 10%를 백엔드에서 사용함
문제 발생
api/firebase.ts
코드는 보지 않아도 괜찮을 것 같습니다 :) 그냥 firebase trainer라는 collection 에서 email이 동일한 사람의 정보를 받아오는 함수입니다.
server/index.ts
oAuth/kakao 라는 라우트 처리를 통해 api/firebase.ts 내에 있는 함수를 끌어와서 사용하려고 했습니다.
어떻게 프론트 / 백의 경게 없이 함수를 끌어와서 사용할 수 있는지 아직 정확하게 이해를 못했지만, Next js 위에서 백엔드가 프론트엔드 쪽에 있는 코드를 끌어올 수 있다는건 굉장히 편리한 일인 것 같습니다 🥹
#1 firebase unCaught at initializeApp 오류
api/firebase.ts - initial firebase setting 부분
Firebase Document - Cloud Firestore 시작하기 에서 기존 firebase 세팅을 참조했습니다.
백엔드가 프론트엔드 코드를 참조했을 때 이런 문제가 발생하는데 이 문제가 발생한 원인을 추측해보자면,
- 프론트엔드에서 firebase.ts 를 실행하면서 initialApp 을 실행
- 백엔드에서 참조하면서 firebase.ts 를 실행하면서 한번 더 inititalApp을 실행한다.
즉, 두 번의 firebase를 initialApp을 해주어 발생하는 문제라고 생각했다.
api/firebase.ts
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MSG_SENDER_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
};
let app;
if (!getApps().length) {
app = initializeApp(firebaseConfig);
} else {
app = getApp();
}
const db = getFirestore(app);
const storage = getStorage();위의 코드에서 app를 이렇게 설정해주어 한 번만 initializeApp 해주게끔 했다. 그 외에 요청이 들어올 때는 그냥 getApp() 을 넣어주었다.
#2 백엔드의 FireStoe(9.9.1_lite) : RestConnection RunQuery failed
구글링해도 답변이 안나오는 (이유를 찾으면서 시간 낭비를 굉장히 많이 한) 오류였다. 일단 storage 접근에 badRequest 가 뜬다는 것이 문제였다. 왜 badRequest가 뜨는지 정말 이해를 못했다.
위의 db, app,storage를 모두 뜯어보았다.
백엔드의 console.log(db)
프론트엔드의 console.log(db)
백엔드에서 databaseId가 설정되지 않은 것을 확인할 수 있다. 왜 설정이 안되는거지 생각이 들어서 node.js 환경 / javascript 환경이 달라서 그런가 고민했다. firebase-admin 을 설치해서 백엔드에서 firebase 설정을 따로 해봤지만 똑같은 문제가 발생했다.
결론적으로,
api/firebase.ts 에서 설정해두었던 firebaseConfig 문제였다.
server/index.ts에서 console.log(proccess.env.NEXT_PUBLIC_APP_ID)를 하여도 정상적으로 출력되어서 이게 문제라고 생각 못했다. 🥲
실행만 하면 해당 내용이 undefined 되어서 백엔드에 config에 따른 app을 설정을 해주지 못하고 db를 순회하려고하니 badRequest가 뜬 것이었다.
.env 파일에 두었던 설정을 firebase.setting.ts 에 빼서 .gitignore에 추가해주었다. 그리고 api/firebase.ts 에서 해당 config를 import 해주니까 정상적으로 연결이 되었다 ! 😮
