Vue Nuxt的Firebase功能无法正常运行

时间:2019-08-13 13:56:25

标签: firebase vue.js google-cloud-functions vue-cli-3 nuxt

我正在尝试使用Firebase函数运行Vue Nuxt应用。我关注了this tutorial

我跑步时

cd src
yarn build
cd ..
firebase serve --only functions,hosting

我在控制台中收到带有一些警告的日志(最后两行):

✔  functions: Using node@10 from host.
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
✔  functions: Emulator started at http://localhost:5001
i  functions: Watching "/Users/danicuki/dev/lps/functions" for Cloud Functions...
i  functions: Beginning execution of "swarm"
✔  functions[ssrapp]: http function initialized (http://localhost:5001/lps/us-central1/ssrapp).
⚠  functions: Could not find trigger "swarm" in your functions directory.
⚠  Your function was killed because it raised an unhandled error.

然后,当我尝试访问localhost:5000时,我得到: Timed out waiting for function to respond.

我在做什么错了?

./ src / nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'lps',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: "stylesheet", href: "//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons" }
    ]
  },
  plugins: ["~/plugins/vue-material.js"],
  css: ["~/assets/theme.scss", "vue-material/dist/vue-material.min.css"],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  buildDir: '../functions/nuxt',
  build: {
    publicPath: '/public/',
    extractCSS: true,
    babel: {
      presets: ['@babel/preset-env'],
      plugins: [
        "@babel/plugin-transform-runtime"
      ]
    },
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

./ functions / package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "dependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "clone": "^2.1.1",
    "debug": "^3.1.0",
    "es6-promise": "^4.1.1",
    "express": "^4.15.4",
    "firebase-admin": "^8.3.0",
    "firebase-functions": "^3.2.0",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.4",
    "nuxt": "1.0.0-rc11",
    "vue": "~2.4.2",
    "vue-meta": "^1.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.0"
  },
  "private": true,
  "engines": {"node": "10"}
}

./ functions / index.js

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

const app = express();

const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/public/'
  }
};

const nuxt = new Nuxt(config);

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
  console.log('test');
  nuxt.renderRoute('/')
    .then(result => {
      console.log('test2');
      res.send(result.html);
    })
    .catch(e => {
      res.send(e);
    });
}

app.get('*', handleRequest);

exports.ssrapp = functions.https.onRequest(app);

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp"
    }]
  }
}

0 个答案:

没有答案