我正试图将我的 Universal Nuxt.js 应用部署到 Firebase。所有关于如何做这件事的信息似乎都已经过时了,而且我无法完全使其正常工作。
SSR似乎可以正常工作,静态资产也被托管。但是中间件(例如,当通过SSR首次加载时)只在客户端上执行,而不在服务器上执行,在使用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
中设置使用 Node 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
。
在 src
文件夹中的 npm run build
命令会将已构建的 Nuxt 客户端文件 (firebase/nuxt/dist/client/*
) 和应用程序的静态文件 (src/static/*
) 复制到 public
文件夹中,然后再进行部署(用于 Firebase 静态托管和 CDN)。
使用这个设置,在 Firebase 上部署时静态资源托管和 SSR 似乎都能正常工作,但是当使用 Firebase 函数进行服务器端渲染时,middleware/asyncData/nuxtServerInit/etc
没有被执行。
例如,当在本地 dev 模式下运行 (npm run dev
) 时,中间件的行为符合预期。
我错过了什么或做错了什么,无法在 Firebase 上运行它?
谢谢!