Firebase Functions在部署时不构建Next.js项目

Question

我能够按照这篇文章成功地部署我的Next.js项目到Firebase Functions。然而，当我尝试在浏览器中访问我的项目时，我得到一个Error: could not handle the request错误，并且在函数日志中我看到这个错误消息:

Error: Could not find a production build in the '/workspace/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
at Server.readBuildId (/workspace/node_modules/next/dist/next-server/server/next-server.js:151:355)
at new Server (/workspace/node_modules/next/dist/next-server/server/next-server.js:3:120)
at NextServer.createServer (/workspace/node_modules/next/dist/server/next.js:1:2935)
at process._tickCallback (internal/process/next_tick.js:68:7)

我不知道如何解决这个问题，虽然…在我的配置文件下面添加:

package.json

{
"main": "server.js", // my next.js app init file
"scripts": {
"dev": "FIREBASE_AUTH_EMULATOR_HOST=localhost:9099 next dev",
"start": "next start",
"build": "next build",
"build:functions": "tsc",
"lint": "npm run lint:next && npm run lint:functions",
"lint:functions": "eslint --ext .js",
"lint:next": "next lint",
"deploy": "firebase deploy --only database,hosting,functions:nextServer",
"emulate": "firebase emulators:start --import=./emulator-data --export-on-exit",
"test": "jest --runInBand --detectOpenHandles",
"cypress": "cypress open"
},
"dependencies": {
// including next
}
}

firebase.json

{
"functions": {
"source": ".",
"runtime": "nodejs10",
"ignore": [
"**/.next/cache/**",
"**/__tests__/**",
"**/components/**",
"**/cypress/**",
"**/emulator-data/**",
"**/functions/**",
"**/layouts/**",
"**/node_modules/**",
"**/pages/**",
"**/public/**",
"**/utils/**",
"**/.*",
"**/*.log",
"**/cypress.json",
"**/database.rules.json",
"**/firebase.json"
],
"predeploy": [
"npm --prefix "$RESOURCE_DIR" run lint",
"npm --prefix "$RESOURCE_DIR" run build:functions"
]
},
"hosting": {
"target": "my_app",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"function": "nextServer"
}]
}
}

我假设，一旦部署，Firebase Functions环境将运行npm run build和npm run start脚本。还是工作流程不同?也许我的脚本不正确?

Answer 1

与package.json文件中的脚本类似，在使用Firebase CLI(此处有文档记录)时，predeploy和postdeploy行在调用firebase deploy之前和之后执行。

当Firebase CLI将你的代码上传到Cloud Functions暂存服务器时，它应该已经被编译过了，只需要安装它的运行时依赖项。上传完成后，暂存服务器将执行npm install --production，然后准备函数来处理请求(实际上是执行冷启动，而不是实际执行函数)。如果任何一个步骤失败，您将看到一个错误。如果这两个步骤都成功，则安装了依赖项的代码将作为映像持久化并保存到Cloud Storage，以便在需要处理的请求进来时使用。

在您的情况下，错误似乎是您的.next文件夹缺少您的应用程序的编译版本。

有两个可能的原因，要么你在部署之前的构建是不完整的，要么当你的文件上传时，在你的ignore列表中，部署的代码所需要的东西丢失了。

对于第一部分，您修改了我之前回答中的predeploy钩子:

{
"functions": {
"source": ".",
"predeploy": [
"npm --prefix "$RESOURCE_DIR" run lint",
"npm --prefix "$RESOURCE_DIR" run build"
]
},
...
}

错误:

{
"functions": {
"source": ".",
"predeploy": [
"npm --prefix "$RESOURCE_DIR" run lint",
"npm --prefix "$RESOURCE_DIR" run build:functions"
]
},
...
}

通过改变这个，你不会在将代码部署到暂存服务器之前构建下一个应用程序。

关于第二部分，部署的下一个应用程序可能缺少一些依赖项—您可以对ignore列表进行微调，也可以使用package.json文件中的postinstall脚本在服务器上执行next build步骤:

{
"main": "server.js", // my next.js app init file
"scripts": {
...
"build:next": "next build",
...
"postinstall": "npm run build:next"
},
"dependencies": {
// including next
}
}

注意:如果你的main文件只是JavaScript，你不再需要在npm run build:functions中定义的typescript编译步骤，它可以被删除。

Answer 2

我是这个错误，我的解决方案是:

首先，在包中。在section脚本中，我们必须修改属性" build ": "next build &&下一个导出"和一个新属性"export";下一个导出">

第二，我们必须在项目的根目录下建立组件和数据文件夹

第三:使用命令:a)你必须登录，所以输入:firebase login

b)select de option "Configure files for Firebase Hosting and (optionally) set 
up GitHub Action deploys"
c)in the question:  if you have a build process 
for your assets, use your build's output directory?
What do you want to use as your public directory?

You must type:   out  (really important, it's a folder output) 
d) You must type:   npm run build
f) last step: type: firebase deploy

package.json从文件夹