Firebase上的My Vuetify Nuxt SSR（通用）应用程序正在挂起

Question

我的步骤：从头开始准备项目

在src文件夹中创建Nuxt应用程序：

1. 使用create-nuxt-app src在src文件夹中创建Nuxt应用程序>
2. 选择软件包管理器Npm
3. 选择UI框架Vuetify.js
4. 选择通用渲染模式（SSR）

创建Firebase项目

5. 使用firebase init创建Firebase项目
6. 选择Firebase托管，Firebase功能，Firebase Firestore，Firebase存储，仿真器
7. 使用公共目录？ （公开）
8. 配置为单页应用（是/否）-是

在根文件夹中创建package.json文件

{
  "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"
  }
}

编辑firebase.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文件夹中。我这样做是因为我在src / .nuxt / dist / server / client.manifest.json内发现了"publicPath": "/_nuxt/"嵌套步骤是编辑functions / index.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命令部署应用程序，但看不到任何前端。我的申请挂了。

[我的步骤：从头开始准备项目]在src文件夹中创建Nuxt应用程序：使用create-nuxt-app src在src文件夹中创建Nuxt应用程序选择包管理器Npm选择UI ...

Answer 1

only