Javascript 如何使用Nextjs设置Firebase托管多站点

我正在尝试将nextjs应用程序部署到firebase主机，并希望支持多个站点。当我部署它时，所有应用程序都会呈现默认应用程序。我怎样才能解决这个问题

我遵循了使用AngularJs将多个站点部署到firebase的教程，并尝试用NextJs替换AngularJs

package.json中的脚本

{
  "scripts": {
    "accounts": "next \"src/apps/accounts/\"",
    "accounts-build": "next build \"src/apps/accounts/\"",

    "admin": "next \"src/apps/admin/\"",
    "admin-build": "next build \"src/apps/admin/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  }
}

{
  "hosting": [
    {
      "target": "accounts",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "accounts"
        }
      ]
    },
    {
      "target": "admin",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "admin"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist/functions"
  }
}

"scripts": {
   "accounts": "next \"src/apps/accounts/\"",
   "accounts-build": "next build \"src/apps/accounts/\"",
   "accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",

   "admin": "next \"src/apps/admin/\"",
   "admin-build": "next build \"src/apps/admin/\"",
   "admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C", 
   ...

module.exports = {
  distDir: '../../../dist/functions/admin/next'
}

firebase.json

{
  "scripts": {
    "accounts": "next \"src/apps/accounts/\"",
    "accounts-build": "next build \"src/apps/accounts/\"",

    "admin": "next \"src/apps/admin/\"",
    "admin-build": "next build \"src/apps/admin/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  }
}

{
  "hosting": [
    {
      "target": "accounts",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "accounts"
        }
      ]
    },
    {
      "target": "admin",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "admin"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist/functions"
  }
}

"scripts": {
   "accounts": "next \"src/apps/accounts/\"",
   "accounts-build": "next build \"src/apps/accounts/\"",
   "accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",

   "admin": "next \"src/apps/admin/\"",
   "admin-build": "next build \"src/apps/admin/\"",
   "admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C", 
   ...

module.exports = {
  distDir: '../../../dist/functions/admin/next'
}

.firebaserc

{
  "projects": {
    "default": "example-app"
  },
  "targets": {
    "example-app": {
      "hosting": {
        "accounts": [
          "example-accounts"
        ],
        "admin": [
          "example-admin"
        ]
      }
    }
  }
}

函数中的index.js

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const app = require('next')({dev, conf: {distDir: 'next'}})
const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

export {accounts, admin}

module.exports = {
  distDir: '../../../dist/functions/accounts/next'
}

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const appAdmin = require('next')({dev, conf: {distDir: 'admin/next'}});

const appAccounts= require('next')({dev, conf: {distDir: 'accounts/next'}});

const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    appAccounts.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    appAdmin.prepare().then(() => handle(req, res)))

export {accounts, admin}

next.config.js将其移动到根文件夹

module.exports = {
  distDir: '../../../dist/functions/next'
}

---

所有应用程序呈现默认帐户应用程序。希望管理员呈现管理员应用程序。

我在package.json中复制了build public，并相应地更新了firebase.json，它成功了

package.json

{
  "scripts": {
    "accounts": "next \"src/apps/accounts/\"",
    "accounts-build": "next build \"src/apps/accounts/\"",

    "admin": "next \"src/apps/admin/\"",
    "admin-build": "next build \"src/apps/admin/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  }
}

{
  "hosting": [
    {
      "target": "accounts",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "accounts"
        }
      ]
    },
    {
      "target": "admin",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "admin"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist/functions"
  }
}

"scripts": {
   "accounts": "next \"src/apps/accounts/\"",
   "accounts-build": "next build \"src/apps/accounts/\"",
   "accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",

   "admin": "next \"src/apps/admin/\"",
   "admin-build": "next build \"src/apps/admin/\"",
   "admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C", 
   ...

module.exports = {
  distDir: '../../../dist/functions/admin/next'
}

firebase.json

{
  "scripts": {
    "accounts": "next \"src/apps/accounts/\"",
    "accounts-build": "next build \"src/apps/accounts/\"",

    "admin": "next \"src/apps/admin/\"",
    "admin-build": "next build \"src/apps/admin/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  }
}

{
  "hosting": [
    {
      "target": "accounts",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "accounts"
        }
      ]
    },
    {
      "target": "admin",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "admin"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist/functions"
  }
}

"scripts": {
   "accounts": "next \"src/apps/accounts/\"",
   "accounts-build": "next build \"src/apps/accounts/\"",
   "accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",

   "admin": "next \"src/apps/admin/\"",
   "admin-build": "next build \"src/apps/admin/\"",
   "admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C", 
   ...

module.exports = {
  distDir: '../../../dist/functions/admin/next'
}

---

将

“public”：“dist/public”

更新为

“public”：“dist/admin/public”

和

“public”：“dist/accounts/public”
< p>因为你在应用程序目录中有不同的文件夹作为管理员和帐号，所以当你为它们中的每一个做构建时，NEX.JS总是考虑你正在构建的最后一个构建并为最后一个构建页面服务，所以为了克服这个问题，我们必须在目录中创建不同的目录来管理目录。是

dist/functions/admin/next

对于客户，目录将是

dist/functions/accounts/next

您必须为此定义不同的distDir，以便在为页面提供服务时，它将在指定的目录中查找，因此请更改您的

管理员的next.config.js

{
  "scripts": {
    "accounts": "next \"src/apps/accounts/\"",
    "accounts-build": "next build \"src/apps/accounts/\"",

    "admin": "next \"src/apps/admin/\"",
    "admin-build": "next build \"src/apps/admin/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  }
}

{
  "hosting": [
    {
      "target": "accounts",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "accounts"
        }
      ]
    },
    {
      "target": "admin",
      "public": "dist/public",
      "rewrites": [
        {
          "source": "**/**",
          "function": "admin"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist/functions"
  }
}

"scripts": {
   "accounts": "next \"src/apps/accounts/\"",
   "accounts-build": "next build \"src/apps/accounts/\"",
   "accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",

   "admin": "next \"src/apps/admin/\"",
   "admin-build": "next build \"src/apps/admin/\"",
   "admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C", 
   ...

module.exports = {
  distDir: '../../../dist/functions/admin/next'
}

帐户的next.config.js

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const app = require('next')({dev, conf: {distDir: 'next'}})
const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

export {accounts, admin}

module.exports = {
  distDir: '../../../dist/functions/accounts/next'
}

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const appAdmin = require('next')({dev, conf: {distDir: 'admin/next'}});

const appAccounts= require('next')({dev, conf: {distDir: 'accounts/next'}});

const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    appAccounts.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    appAdmin.prepare().then(() => handle(req, res)))

export {accounts, admin}

将此next.config.js分别保存在src/apps/admin和src/apps/customer目录中，并更改您的

函数中的index.js

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const app = require('next')({dev, conf: {distDir: 'next'}})
const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    app.prepare().then(() => handle(req, res)))

export {accounts, admin}

module.exports = {
  distDir: '../../../dist/functions/accounts/next'
}

import {https} from 'firebase-functions'

const dev = process.env.NODE_ENV !== 'production'
const appAdmin = require('next')({dev, conf: {distDir: 'admin/next'}});

const appAccounts= require('next')({dev, conf: {distDir: 'accounts/next'}});

const handle = app.getRequestHandler()

const accounts = https.onRequest((req, res) =>
    appAccounts.prepare().then(() => handle(req, res)))

const admin = https.onRequest((req, res) =>
    appAdmin.prepare().then(() => handle(req, res)))

export {accounts, admin}