reactjs - 如何将 firebase 的 firestore/admin sdk 与 next.js 一起使用

标签 reactjs firebase next.js firebase-admin server-side-rendering

我正在使用 firebase 和 next.js 构建应用程序

我对这个设置相当陌生,对 SSR 完全陌生,并且 firebase 文档让我感到困惑。

目前,我正在使用 firebase 函数来运行 next.js,这就像一个魅力。但现在,我想使用 firestore。根据文档,我看到有两种在我的项目中使用它的方法(如果我做对了)。第一个是“网络”解决方案,这对我来说没有好处,因为我相信它不是 SSR,而我的应用程序的全部意义就是如此。

另一个是“node.js”解决方案,它在 firebase 函数上运行,这对我来说更有意义。我不明白的部分是与 Next.js 一起使用它

在我当前的设置中,我正在将 next.js 应用程序构建到函数文件夹中,在函数文件夹内,我可以引用使用“node.js”解决方案创建的 databaseref 对象,但是在构建下一个应用程序之前,如何引用此内容?那么当我不在函数文件夹中时?

设置:

- src
  - utils
  - pages
    - index.js
    - signin.js
    - // etc.
- functions 
  - next // this is the output folder of my 'src' build
  - index.js 
  - // etc.

functions/index.js里面我可以这样做:

const admin = require('firebase-admin');
const functions = require('firebase-functions');

admin.initializeApp(functions.config().firebase);

let db = admin.firestore();

并使用db读取并添加到服务器端的firestore(对吗?)

但是在构建之前我的所有代码都在 src/ 中,我认为我不能在那里使用它。我应该以不同的方式构建我的项目吗?或者我应该怎么做才能使用db?或者,当然,还有另一种方式与我的 Firestore 建立服务器端连接。

最佳答案

很抱歉回答不好。这是我第一次。我正在寻找更可爱的代码,发现您的问题没有得到解答。

我不知道正确的行话。然而,您还没有使用自定义服务器运行您的应用程序。至少这就是我使用 firebase-admin 所做的事情。请注意,我的答案很糟糕,因为我实际上是通过 socket.io 与我的客户交互的。我只使用 firebase 进行客户端代码和身份验证

在 package.json 中,您将通过命令行将脚本标记添加到 strat

{
    "scripts:
        "server": "node server.js"
}

这样你就可以运行

$ npm run server

从命令行

~/package.json

    {
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
  "server": "node server.js",
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.3.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

在 server.js 文件中,您加载 Express 以进行服务器端渲染,可能可以通过另一篇文章启动您自己的 http 服务器。但是,如下所示,我实际使用 socket.io,因此它具有连接详细信息 关键就在这里

nextHandler() 将服务器的控制权传递给下一个。所以你可以启动一个http服务器并使用nextHandler()

  app.get('*', (req, res) => {
                return nextHandler(req, res)
            })

~/server.js

    const fs = require('fs');
    const express = require('express');
    const app = express();
    const server = require('http').Server(app)
    const firebaseAdmin = require('./services/dwf.firebase.admin.js');
    const secureServer = require('https').createServer({
        key: fs.readFileSync('./key.pem'),
        cert: fs.readFileSync('./cert.pem')
    }, app)
    const io = require('socket.io')(secureServer, {secure: true})

    const User = require('../../users/user.manager.js');
    let user = User(io,firebaseAdmin.auth(),firebaseAdmin.database());

    const next = require('next')

    const dev = process.env.NODE_ENV !== 'production'
    const nextApp = next({dev})
    const nextHandler = nextApp.getRequestHandler()

    // socket.io server
    io.on('connection', socket => {
        console.log(`Main Socket Opened by:\n ${socket.id}`);
        socket.on('getDb',function(userId,refs,fn){
        console.log("Getting Data")
            firebaseAdmin.database().ref(refs).once('value',(snapshot)=>{
                console.log(snapshot.val());
                fn({body: snapshot.val()})
                socket.emit('getDb',snapshot.val());
            });
        })
        socket.on('disconnect', () => {
            console.log(`Main Socket Closed by:\n ${socket.id}`);
        });
    })

    nextApp
        .prepare()
        .then(() => {
            app.get('/data/messages', (req, res) => {
                res.json(messages)
            })
            app.get('*', (req, res) => {
                return nextHandler(req, res)
            })
            secureServer.listen(PORT, () => console.log('#> Main Server ready for clients on https://0.0.0.0:PORT'));
        })

关于reactjs - 如何将 firebase 的 firestore/admin sdk 与 next.js 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56519808/

相关文章:

reactjs - TS2339 (TS) 类型上不存在属性 'state'

reactjs - 如何修复 react 选择下拉组件中搜索框的宽度?

ios - 检索存储在 childByAutoId() 引用中的特定 Firebase 数据 (Swift)

next.js - Cloudflare 和 next.js 静态导出不起作用?

typescript - 从lottie-web开始动画触发事件

javascript - 我如何在 React.js 中返回从 axios 带来的数据?

reactjs - 当 React js 中的第一个 API 调用加载所有内容(延迟加载)时,进行第二次 API 调用

ios - 如何在 Swift 中设置类(class)结构?

firebase - Firestore模拟器: How to generate Firebase ID tokens?

node.js - Nextjs-api 路由,如何从标题中删除 cookie?