如何解决Firebase Hosting部署Next.js多站点均显示默认应用问题

嘿，我看出来你现在的困扰了——两个部署到Firebase的Next.js站点都只显示Accounts应用，完全没加载Admin的内容对吧？核心问题是你当前的Firebase Functions里用了同一个Next.js实例处理两个站点的请求，导致不管访问哪个站点，都会默认加载Accounts的代码。下面是一步步帮你修复的方案：

1. 给每个应用配置独立的构建目录 #

首先得让Accounts和Admin的构建产物分开存放，避免互相覆盖：

• 到src/apps/accounts/目录下，创建专属的next.config.js文件：

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

• 再到src/apps/admin/目录下，同样创建专属的next.config.js：

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

然后更新package.json里的构建脚本，确保每个应用用自己的配置文件构建：

{
  "scripts": {
    "accounts-build": "next build src/apps/accounts/",
    "admin-build": "next build src/apps/admin/",
    // 其他脚本保持不变就行
  }
}

2. 修改Firebase Functions，为每个站点创建独立的Next实例 #

这一步是关键！你现在的functions/index.js里，两个函数都用了同一个Next实例，得改成每个站点对应自己的实例：

import { https } from 'firebase-functions';

const dev = process.env.NODE_ENV !== 'production';

// 初始化Accounts应用的专属Next实例
const accountsApp = require('next')({
  dev,
  conf: {
    distDir: 'next-accounts', // 对应刚才给Accounts设的构建目录
    dir: './src/apps/accounts' // 指定Accounts应用的源码位置
  }
});
const accountsHandle = accountsApp.getRequestHandler();
export const accounts = https.onRequest((req, res) => {
  return accountsApp.prepare().then(() => accountsHandle(req, res));
});

// 初始化Admin应用的专属Next实例
const adminApp = require('next')({
  dev,
  conf: {
    distDir: 'next-admin', // 对应Admin的构建目录
    dir: './src/apps/admin' // 指定Admin应用的源码位置
  }
});
const adminHandle = adminApp.getRequestHandler();
export const admin = https.onRequest((req, res) => {
  return adminApp.prepare().then(() => adminHandle(req, res));
});

3. 检查Firebase配置文件的正确性 #

再确认下你的firebase.json和.firebaserc有没有配置错：

• firebase.json里每个hosting target的rewrites要对应正确的函数：

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

• .firebaserc里的targets要正确关联到你Firebase项目的两个托管站点：

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

4. 重新构建并部署 #

最后运行这些命令，清理旧的构建产物，重新构建部署：

npm run clean
npm run predeploy
npm run deploy

这样调整完之后，两个站点就会各自加载对应的Next.js应用内容啦！

内容的提问来源于stack exchange，提问作者grace owens