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

Question

I'm trying to host a Nuxt.js app on Firebase, and I've followed this tutorial , and I got stuck at #10 , when trying to do sudo firebase serve --only functions, hosting . I kept getting this Timed out waiting for function to respond. .

Upon further investigating I found out that the problem is in /functions/index.js. The line nuxt.renderRoute('/').then(...) is taking forever to run, because the console.log('After render') is never called. Here's how the /functions/index.js looks like

/functions/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)

And this is how my terminal output looks like:

Answer 1

I am a little late, but glad to share my approach:

This is how my index.js looked like, after I got it to work with Firebase hosting. Note: I ended up taking an entirely different approach by simply using prerendering instead of ssr for hosting my nuxt app on firebase. However if you need to use SSR for your project, this works nicely:

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

You have two approach, the first one is request the page and create a behavior based on json or api .

Try using:

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

For example:

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 }
})

The second approach is generating the route:

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

Or so simple like:

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

Answer 3

You're expecting your console.log to fire after, but in fact it may fire even before the promise is called ( .then ). It might be that your logger is overwriting its output. Try writing it like this:

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

Alternatively rewrite the whole function using promises like this:

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')
})