Проблема размещения приложения Nuxt.js SSR на Firebase - PullRequest
Новая
       14

Проблема размещения приложения Nuxt.js SSR на Firebase

0 голосов
/ 14 октября 2018

Я пытаюсь разместить приложение Nuxt.js на Firebase, и я следовал этому учебнику , и я застрял на # 10 , когда пытался сделать sudo firebase serve --only functions, hosting.Я продолжал получать это Timed out waiting for function to respond..

После дальнейшего изучения я обнаружил, что проблема в /functions/index.js.Линия nuxt.renderRoute('/').then(...) работает вечно, потому что console.log('After render') никогда не вызывается.Вот как выглядит /functions/index.js

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

И вот как мой терминалвывод выглядит так: enter image description here

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Вы ожидаете, что ваш console.log сработает после, но на самом деле он может сработать даже до того, как обещание будет вызвано (.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)
})

В качестве альтернативы перепишите всю функцию, используя обещания, подобные этому: 

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')
})
0 голосов
/ 18 октября 2018

У вас есть два подхода, первый - запросить страницу и создать поведение на основе 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')
})
...