在 Firebase 上托管 Nuxt.js SSR 应用时出现问题

Question

我正在尝试在 Firebase 上托管 Nuxt.js 应用程序，并且我已经按照本教程进行了操作，但在尝试执行sudo firebase serve --only functions, hosting卡在了#10处。 我一直在Timed out waiting for function to respond. .

经过进一步调查，我发现问题出在 /functions/index.js 中。 线nuxt.renderRoute('/').then(...)永远运行，因为console.log('After render')永远不会被调用。 这是 /functions/index.js 的样子

/功能/index.js

const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')

const app = express()

const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/public/'
  }
}
const nuxt = new Nuxt(config)

app.get('**', function (req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  console.log('it still works here')

  nuxt.renderRoute('/').then(result => {
    console.log(result.html)
    res.send(result.html)
  }).catch(e => {
    console.log(e)
    res.send(e)
  })
  console.log('After render')
})

module.exports.nuxtApp = functions.https.onRequest(app)

这就是我的终端输出的样子：

Answer 1

我有点晚了，但很高兴分享我的方法：

这就是我的 index.js 在使用 Firebase 托管后的样子。 注意：我最终采用了一种完全不同的方法，只需使用预渲染而不是 ssr 在 firebase 上托管我的 nuxt 应用程序。 但是，如果您需要为您的项目使用 SSR，这很有效：

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')
const admin = require('firebase-admin')

const app = express()

// Initialize Firebase (only if you use the Admin SDK, otherwise not needed)
admin.initializeApp({
  credential: admin.credential.cert(require('YOUR_KEY'))
});

// Nuxt Server Side Render Setup

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

Answer 2

您有两种方法，第一种是请求页面并基于json或api创建行为。

尝试使用：

const Nuxt = require('nuxt')
const nuxt = new Nuxt()
nuxt.build()
.then(() => {
  // here you can use nuxt.renderRoute() or nuxt.render(req, res)
});

例如：

nuxt.build()
.then(() => nuxt.renderRoute('/'))
.then(({ html, error, redirected }) => {
  // Use Html as string

  // `error` not null when the error layout is displayed, the error format is:
  // { statusCode: 500, message: 'My error message' }

  // `redirected` is not `false` when `redirect()` has been used in `data()` or `fetch()`
  // { path: '/other-path', query: {}, status: 302 }
})

第二种方法是生成路线：

app.get( '/', ( req, res, next ) => {
        doThePromise( req.query )
                .then( data => {
                        console.log( "rendering", res.renderRoute );
                        res.renderRoute( 'pages/foo', { data: data } );
                } );
} );

或者像这样简单：

app.get('/route', (req, res) => {
  res.render('foo')
})

Answer 3

你期望你的console.log在之后触发，但实际上它甚至可能在调用 promise 之前触发（ .then ）。 可能是您的记录器正在覆盖其输出。 试着这样写：

nuxt.renderRoute('/').then(result => {
  console.log(result.html)
  res.send(result.html)
  console.log('After render')
}).catch(e => {
  console.log(e)
  res.send(e)
})

或者，使用如下 Promise 重写整个函数：

app.get('**', async function (req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  console.log('it still works here')

  try {
    let result = await nuxt.renderRoute('/')
    console.log(result.html)
    res.send(result.html)
  } catch (e) {
    console.log(e)
    res.send(e)
  }
  console.log('After render')
})