Обновление: Мой подход к использованию 2 папок: функции и sr c не работают. Я начал использовать другой подход, когда папка для функций firebase находится внутри папки sr c. Этот подход реализован winzaa123 пользователем: winzaa123 / nuxt2-vuetify-ssr-on-firebase , и я мог запустить его на своей базе Google firebase.
Мои шаги: Подготовка проекта с нуля
Создание приложения Nuxt внутри папки sr c:
- Создание приложения Nuxt в sr c папка с
create-nuxt-app src - Выберите менеджер пакетов Npm
- Выберите UI framework Vuetify. js
- Выберите режим рендеринга Universal (SSR)
Создание проекта Firebase
Создать проект Firebase с
firebase init Выберите Firebase Hosting, Функции Firebase, Firebase Firestore, Firebase Storage, Эмуляторы Использовать каталог publi c? (publi c) Настроить как одностраничное приложение (да / нет) - Да
Создать пакет. json файл в папке root
{
"name": "test-nuxt",
"version": "1.0.0",
"description": "My fine Nuxt.js project",
"author": "Alex Pilugin",
"private": true,
"scripts": {
"postinstall": "cd functions && npm install",
"dev": "cd src && npm run dev",
"start": "cd src && npm run dev",
"serve": "NODE_ENV=development firebase serve",
"build": "cd src && npm run build",
"build-deploy": "firebase deploy --only hosting,functions",
"build-deployf": "firebase deploy --only functions",
"build-deployh": "firebase deploy --only hosting"
},
"dependencies": {
"nuxt": "^2.0.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.0.0"
}
}
Изменить базу данных. json файл
{
"functions": {
"source": "functions",
"predeploy": [
"rm -rf functions/nuxt && npm --prefix src run build && mkdir -p functions/nuxt/dist && cp -r src/.nuxt/dist/ functions/nuxt/dist && cp src/nuxt.config.js functions/"
]
},
"hosting": {
"public": "public",
"predeploy": [
"rm -rf public/* && mkdir -p public/_nuxt/ && cp -r functions/nuxt/dist/client/ public/_nuxt/ && cp -a src/static/. public/"
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "nuxtssr"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
}
}
Вы видите, что я планирую скопировать содержимое src / .nuxt / dist / client в папку public / _nuxt . Я делаю это, поскольку обнаружил "publicPath": "/_nuxt/" внутри src / .nuxt / dist / server / client.manifest. json
Шаг вложения редактирование функций / индекса. js файл
const functions = require('firebase-functions');
const { Nuxt } = require("nuxt");
//const { Nuxt } = require("nuxt-start");
const config = {
ssrLog: true,
dev: true, // Don't start in dev mode.
debug: true, //<----------------------- Debug logs
buildDir: "nuxt",
build: {
//publicPath: ''
//publicPath: '/_nuxt/', //Default: '/_nuxt/' <-- content of .nuxt/dist/client
/*
** You can extend webpack config here
*/
extend ( config, { isDev, isClient, isServer } ) {
if ( isServer ) {
config.externals = {
'@firebase/app': 'commonjs @firebase/app',
'@firebase/firestore': 'commonjs @firebase/firestore',
//etc...
}
}
}
}
}
const nuxt = new Nuxt(config);
let isReady = false;
async function handleRequest(req, res) {
console.log("nuxtssr is running...");
if (!isReady) {
console.log("isReady: " + isReady);
try {
console.log("waiting for nuxt.ready().......");
isReady = await nuxt.ready();
console.log("nuxt is ready");
} catch (error) {
console.log("ERROR.....................");
console.log(error);
//throw new functions.https.HttpsError('error in Nuxt', error);
process.exit(1);
}
}
console.log("waiting for nuxt.render().......");
/*
* res.set('Cache-Control', 'public, max-age=1, s-maxage=1');
* await nuxt.render(req, res);
*/
res.set("Cache-Control", "public, max-age=300, s-maxage=600");
return new Promise((resolve, reject) => {
console.log("before nuxt.render......");
nuxt.render(req, res, promise => {
console.log("inside nuxt.render......");
promise.then(resolve).catch(reject);
});
});
}
exports.nuxtssr = functions.https.onRequest(handleRequest);
Я использую $ npm start для локального запуска приложения:
Nuxt.js v2.12.2
Running in development mode (universal)
Listening on: http://localhost:3000/
Я развертываю приложение с помощью команды $ firebase deploy, но Я не вижу никакого интерфейса. Мое приложение висит. 