SSR에서 "Could not reach Cloud Firestore backend"오류가 발생했을 때 의심해야 한다

Firestore에서 데이터를 가져오는 중 오류가 발생했습니다.


Firestore에서 데이터를 가져오려고 하면 다음 오류가 발생하여 가져올 수 없습니다.
@firebase/firestore: Firestore (9.3.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
내 경우는
  • Nuxt.js(버전 3)에서 개발 중
  • SSR: true 상태에서 SSR을 통해Firestore 데이터(디스플레이 또는 캐시용)를 얻으려면
  • dev모드에서 데이터를 정상적으로 얻을 수 있으나 구축yarn start하면 상기 오류가 발생하여 데이터를 얻을 수 없음
  • 이런 현상.혹시 넥스트?js의 getstaticprops에서도 유사한 현상이 발생할 수 있다.
    표시된 정보에 의하면 인터넷 연결에 이상이 있는데 당연히 인터넷과 연결되고 VPN 연결도 없다.
    이 정보 내용으로 검색을 해보면...
    만약에 install에서 Firebase-tools의 최신 버전 수정 같은 거 하면...
    https://knym.net/firebasecould-not-reach-cloud-firestore-backend/ experimentalForceLongPolling: true 옵션을 설정하면 됩니다.
    https://github.com/firebase/firebase-js-sdk/issues/2923
    FirebaseConfig이 지정되지 않은 데이터베이스 URL
    https://qiita.com/moemon/items/c55824e98fae5276e80e
    그런 메시지가 나왔지만 내 상황은 어떤 방법으로도 해결할 수 없었다.
    (이런 보도를 통해 해결한 여러분, 축하드립니다!)
    그리고 다방면의 조사를 통해 나는 나 같은 상황에서 근본적으로 이 문제에 해결 방법이 존재하지 않는다는 것을 발견하였다.
    Firebase JS SDK는 클라이언트 측 연결에 사용되는 것이므로 Node입니다.js 서버에서부터 이용하는 건 허용되지 않아요.

    Firebase JS SDK는 클라이언트 측에서 사용


    공식 문서를 봤어요, node.js에서Firestore에 연결할 때 Firebase-admin을 사용하는 방법만 소개했습니다.
    https://firebase.google.com/docs/firestore/quickstart#node.js

    GiitHub의 SDK 페이지에서 보다 직접적으로 설명합니다.
    https://github.com/firebase/firebase-js-sdk
    This SDK is intended for end-user client access from environments such as the Web, mobile Web (e.g. React Native, Ionic), Node.js desktop (e.g. Electron), or IoT devices running Node.js. If you are instead interested in using a Node.js SDK which grants you admin access from a privileged environment (like a server), you should use the Firebase Admin Node.js SDK.
    이렇게 말하면 당연한 일이고, 원래 허용되지 않는 용법을 사용했기 때문에 잘못되는 것도 당연하다.

    해결책


    그러면 어떻게 하면 좋을까요? 서버에서 데이터를 얻을 때firebase-admin를 사용하세요.그거밖에 없어요.
    Nuxt.js 및 Nextjs와 같은 프레임워크에서'초기 묘사에서 서버 쪽이고 추가 읽기/페이지 이동 시 클라이언트 쪽에서 데이터를 얻는다'는 경우 Nuxt/Next에서 API 서버를 만들고 서버와 클라이언트로부터 같은 노드를 만드는 것이 가장 쉽다.
    Next.하면, 만약, 만약...
    https://nextjs.org/docs/api-routes/introduction
    Nuxt 3.x인 경우 Server Directory
    https://v3.nuxtjs.org/docs/directory-structure/server/
    Nuxt 2.x인 경우 Server Middleware
    https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/
    및 는 각각 API 서버를 간단하게 생성하는 기능을 제공합니다.
    또는 물론 SPA를 클라이언트 측으로 모두 바꾸면 이 문제가 발생하지 않습니다.
    Firebase-admin과 Firebase는 서로 다른 안전 규칙이 무시되기 때문에 그 권한 제어는 스스로 해야 한다. 그러나 일부 사람 이외에 볼 수 없는 데이터는 원래 SSR의 필요성이 얇기 때문에 권한 제어를Firebase에 접근하여 SPA에서 정확하게 사용해야 한다.
    나의 상황은 단순히 정적 미디어 사이트의 데이터베이스를 Firestore로 설정하는 REST API식의 사용 방법을 구상한 것이다. 권한 제어를 고려할 필요가 없기 때문에 API 서버를 물어뜯는 형식으로 해결했다.

    왜 눈치채지 못했을까


    왜 이런 초보적인 간과가 있었는지에 관하여 나는 내 생각대로 고려해 보았다
    "처음부터 서버에서 Firestore를 사용하기로 결정하지 않았다면 Firebase-admin을 사용할 생각을 하기 어려웠을 것이다."
    실제로'Firestore SSR'이나'Firestore get Static Propos'같은 검색을 하면 Firebase-admin을 사용했다는 기사가 나온다.
    https://qiita.com/centerfield77/items/799f2840f48221c2f84d
    https://fetchkun.com/entry/nuxt-firestore-ssr/
    그러나'처음부터 서버에서 Firestore를 얻고 싶지 않다'거나'원래부터 서버에서 Firestore를 얻는 방법이 다르다는 것을 의식하지 못했다'는 말은 도달할 수 없다.
    특히 Nuxt는js와 같은 유니버설 프레임워크는 SPA와 SSR이 쓴 코드도 기본적으로 같고 서버 측과 클라이언트 측이 모두 같은 요청을 하기 때문에 SPA와 SSR의 획득 방법이 다르다는 것을 의식하지 못했다.
    JS SDK의 설명페이지인'JavaScript 프로젝트에 Firebase 추가'만 봤을 뿐 서버에서 직접 사용할 수 없다는 경고도 없어 브라우저 전용임을 알아차리기 어려웠다.
    이는 위의 페이지가 "서버 어플리케이션 또는 네트워크에서 사용"를 선택한 후 시작 설명서이기 때문에 서버에서 사용하는 것은 서버용 페이지를 보는 전제 조건입니다.
    그리고 가장 중요한 것은 이 잘못된 정보에 대해 이 대답을 제시하는 사이트는 일영을 막론하고 거의 나타나지 않는 문제가 있다는 것이다.
    만약 안전 규칙이 allow read; if request.auth != null;라면 서버 측의 요청이 인증 사용자가 없기 때문에 오류를 알아차리기 쉽다
    보안 규칙이 설정되어 있지 않으면 표시되는 정보와 서버 측의 관계가 전혀 보이지 않습니다Could not reach Cloud Firestore backend.
    가능하다면 이 잘못된 소식이 개선되기를 바랐지만, 이 소식을 검색할 때 이런 소식이 나오면 기뻐하시는 분들이 계실 것 같아서 쓰기로 했습니다.
    남의 참고가 됐으면 좋겠어요.

    좋은 웹페이지 즐겨찾기