在Google Firebase上部署Nuxt 2通用(SSR)应用程序

时间:2020-03-12 13:40:29

标签: javascript firebase nuxt.js

[开始更新3] ----------------------------
好消息:我已经构建并部署了Web应用程序,但是有错误: Errors in Console with Vuetify

Screenshot of the folder structure
1.我已将所有Nuxt项目移到src文件夹中。
2.我已将功能文件夹移至产品文件夹中,并将其重命名为服务器。
3.我创建了一个新的/ prod / user文件夹。
4.我创建了nuxt.config.js文件的副本,并将其复制到/ prod / server文件夹中,以便使用/prod/server/index.js文件。
5.我编辑了package.js。
6.我已经编辑了firebase.json文件。
7.最后,我编辑了/src/nuxt.config.js文件

package.js

{
  "name": "ap-test-vue-nuxt",
  "version": "1.0.0",
  "description": "My first badass Nuxt.js project",
  "author": "Alex Pilugin",
  "private": true,
  "scripts": {
    "postinstall": "cd prod && cd server && npm install",
    "start": "cd src && npm run dev",
    "serve": "NODE_ENV=development firebase serve",
    "build": "cd src && npm run build && cd .. && npm run copystatic && npm run copydist",
    "generate": "cd src && npm run generate",
    "deploy": "firebase deploy --only hosting,functions",
    "copystatic": "cp -R src/static/ prod/client",
    "copydist": "cp -R prod/server/nuxt/dist/ prod/client/assets",
    "all": "npm run build && firebase deploy --only hosting,functions"
  }
}

firebase.json

{
  "functions": {
    "source": "prod/server"
  },
  "hosting": {
    "public": "prod/client",
    "rewrites": [
      {
        "source": "**",
        "function": "nuxtssr"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

nuxt.config.js

//Error when deploy functions: import colors from 'vuetify/es5/util/colors'
const colors = require('vuetify/es5/util/colors').default;

module.exports = {
  mode: 'universal',
  buildDir: "./../prod/server/nuxt",
  ssrLog: true,
  /*
  ** Build configuration
  */
  build: {
    publicPath: "/assets/",
    cache: true,
    extractCSS: true,
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      if (process.browser) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    }
  }, ...

/prod/server/package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "8"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.9.5",
    "@nuxtjs/vuetify": "^1.11.0",
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.3.0",
    "nuxt-start": "^2.11.0",
    "vuetify": "^2.2.17"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

/prod/server/index.js

// functions/index.js

const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");

const nuxtConfig = require("./nuxt.config.js");

const config = {
  ...nuxtConfig,
  dev: false,
  debug: false,
  buildDir: "nuxt",
  build: {
    publicPath: "/assets/"
  }
};

const nuxt = new Nuxt(config);

let isReady = false;

async function handleRequest(req, res) {
  if (!isReady) {
    try {
      isReady = await nuxt.ready();
    } catch (error) {
      process.exit(1);
    }
  }
  await nuxt.render(req, res);
}

exports.nuxtssr = functions.https.onRequest(handleRequest);

[更新3结束] -------------------------------

Nuxt.js版本2没有 server 文件夹,并且在将所有文件夹移动到新的 src 文件夹之后-我无法执行"npm run build"命令。 ,因为:

找不到

nuxt build命令!

我尝试在Google Firebase上部署我的第一个通用(SSR)Nuxt应用程序。 我几乎完成了Udemy课程Nuxt.js - Vue.js on Streroids的学习,现在该将我的应用程序上传到Google Firebase上了。

我发现了两种不同的实现方法:
1. dev.to: Deploy nuxt on Firebase
2. dev.to: How to host Nuxt.js application on firebase with a single command

第二种方法-创建一个 src 文件夹并将所有项目移到 src 文件夹github.com/slushnys/dealas中,并且它在服务器端不使用Express.js(它使用nuxt-start

第一种方法-仅将文件夹移动到 src 文件夹中,但将所有主要文件保留在外面。在这种情况下,我们在服务器端使用Express.js-我现在不想使用。

我尝试在没有Express.js的情况下实现第一种方法(使用Nuxt-start库)。

//package.js
{
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
   },
}

//firebase.json
{
  "hosting": {
    "public": "functions/.nuxt",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

//nuxt.config.js
import colors from 'vuetify/es5/util/colors'

export default {
  //https://dev.to/kiritchoukc/deploy-nuxt-on-firebase-4ad8
  srcDir: 'src', //move all folder into the src folder
  buildDir: 'functions/.nuxt', //for firebase-functions
  mode: 'universal',
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    },
    extractCSS: true //https://dev.to/kiritchoukc/deploy-nuxt-on-firebase-4ad8
  },

package.js中脚本的问题-我在 src 文件夹中找不到 server 文件夹: screenshot of the package.js

当我尝试执行npm run build时,我也看到错误:

> nuxt build

sh: nuxt: command not found

Nuxt版本:“ nuxt”:“ ^ 2.0.0”

我需要脚本“ dev”,“ start”,“ build”的命令来修复我的应用程序:(

Screenshot of package.js Screenshot of functions/index.js Screenshot of firebase.js

0 个答案:

没有答案