首页 > 解决方案 > 将 nextjs 应用程序部署到 firebase 失败,但在模拟器中工作正常

问题描述

我的 next.js 应用程序在使用具有以下配置的 firebase 模拟器时工作正常,但在部署到 firebase 时同样不起作用。

firebase 函数日志中的错误

Error: Failed to load /500
    at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async Server.renderErrorToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:138:198)
    at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:1629)
    at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672)
    at async Router.execute (/workspace/node_modules/next/dist/next-server/server/router.js:25:67)
    at async Server.run (/workspace/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async Server.handleRequest (/workspace/node_modules/next/dist/next-server/server/next-server.js:32:504) 


Error: Failed to load /
    at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:542)
    at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672) 

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "public",
    "cleanUrls": true,
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrServer"
      }
    ]
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "ui": {
      "enabled": true
    },
    "hosting": {
      "port": 5008,
      "host": "0.0.0.0",
      "public": "public"
    }
  }
}

火力基地功能

import * as functions from 'firebase-functions';
import next from 'next';

const firebaseFunction = functions;

const server = next({
  dev: false,
  dir: __dirname + '/public',
  conf: {
    distDir: '.next',
    experimental: {
      reactRoot: false,
      turboMode: false,
    },
    future: {},
  },
});

const nextjsHandle = server.getRequestHandler();

exports.ssrServer = firebaseFunction.https.onRequest(async (req, res) => {
  return server.prepare().then(() => nextjsHandle(req, res));
});

我错过了什么?

标签: firebasegoogle-cloud-functionsnext.js

解决方案


您正在运行 Next 10.2 吗?可能与这个问题有关。


推荐阅读