Question

我正在尝试将Universal Nuxt.js应用程序部署到Firebase。有关执行此操作的所有信息似乎都是过时的，我无法使其完全正常运行。

SSR与托管的静态资产一起正常工作。但是，例如，当将中间件部署在具有Firebase功能/托管的firebase上（或使用firebase serve）时，中间件仅在客户端上执行，而不是在服务器上执行（例如，第一次通过SSR加载时）。

我具有以下项目结构：

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)

在firebase.json中

指示firebase使用该功能

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

我还从src/package.json到functions/package.json添加了所有依赖项。

在npm run build文件夹中的src上，已构建的Nuxt客户端文件（firebase/nuxt/dist/client/*）和应用程序的静态文件（src/static/*）被复制到{{1} }文件夹（用于Firebase静态托管和CDN）。

使用此设置，在Firebase上部署静态资产托管和SSR似乎可以正常工作，但是在使用Firebase渲染服务器端时，中间件/ public / asyncData / etc不会执行功能。

例如，在本地处于开发模式（nuxtServerInit）时，中间件可以在服务器/客户端上正常工作。

在Firebase上部署此功能时，我缺少什么或做错了什么？

谢谢！

使用SSR将Vue / Nuxt应用程序作为通用应用程序部署到Firebase

0 个答案: