Развертывание приложения Vue / Nuxt в Firebase как универсального приложения с SSR - PullRequest
0 голосов
/ 08 февраля 2019

Я пытаюсь развернуть свое приложение Universal Nuxt.js в Firebase.Похоже, что вся информация об этом устарела, и я не могу заставить ее работать полностью.

SSR, кажется, работает вместе с размещением статических ресурсов.Однако промежуточное ПО, например, выполняется только на клиенте, а не на сервере (например, когда он впервые загружается через SSR), когда оно развернуто на firebase с функциями / хостингом firebase (или с использованием firebase serve).

У меня есть следующая структура проекта:

project
└─ /functions (firebase functions including `nuxt/` built files)
└─ /src (nuxt app, using `create-nuxt-app` starter template)
└─ /public (includes static files and built nuxt client files)
└─ firebase.json

в src/nuxt.config.js установить параметры сборки

mode: 'universal',
...
buildDir: process.env.NODE_ENV === 'development' ? '.nuxt' : '../functions/nuxt',
build: {
  publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/',
  extractCSS: true,

  ...
}

в functions/package.json установить использование узла v8

"engines": {
  "node": "8"
},
...

и следующие к functions/index.js

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

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

const app = express()

// Set Nuxt.js options
const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/'
  },
}

const nuxt = new Nuxt(config)

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=300, s-maxage=600')
  nuxt.renderRoute('/')
    .then(result => {
      res.send(result.html)
    })
    .catch(e => {
      res.send(e)
    })
}
app.get('*', handleRequest)
exports.nuxtapp = functions.https.onRequest(app)

in firebase.json дают команду firebase использовать функцию

"rewrites": [
  {
    "source": "**",
    "function": "nuxtapp"
  }
]

Я также добавил все зависимости от *От 1025 * до functions/package.json.

При npm run build в папке src встроенные файлы клиента Nuxt (firebase/nuxt/dist/client/*) и статические файлы приложения (src/static/*) копируются в public папка перед развертыванием (для статического хостинга Firebase и CDN).

При использовании этой настройки хостинг статических ресурсов и SSR, как представляется, работают при развертывании в Firebase, но промежуточное ПО / asyncData / nuxtServerInit / etcне выполняется, когда он выполняется на стороне сервера с использованием функции Firebase.

Промежуточное программное обеспечение, например, работает как на сервере, так и на клиенте, когда работает локально в режиме разработки (npm run dev).

Что я пропускаю или делаю неправильно, чтобы это работало при развертывании в Firebase?

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...