如何在 Firebase 托管上部署 next.js 应用程序？

Posted 2023-03-06

【中文标题】如何在 Firebase 托管上部署 next.js 应用程序？

【英文标题】：How to deploy next.js app on Firebase Hosting?

【发布时间】：2019-10-10 13:43:41

【问题描述】：

我正在尝试在 Firebase 托管上部署 next.js 应用。但我不明白哪些文件要推送到服务器。当我运行 npm run build 并将构建文件夹推送到 firebase 时。但给出了 No index.html file found 的错误。

这是构建文件夹的输出图像。我刚刚创建了一个用于测试目的的简单组件。

Output of build command

【问题讨论】：

Firebase 托管仅接受静态文件。 NextJS 是一个运行的 NodeJS 服务器，因此您需要将其部署在 Zeit Now 或 Google Cloud 平台上。如果您有一个简单的应用程序，您可以将其导出到静态 HTML 网页并上传导出的文件。查看更多官方文档：nextjs.org/learn/excel/static-html-export

@FrederikoCesar 官方文档很奇怪。您希望 Firebase 托管提供所有静态内容，并希望 Cloud Functions for Firebase 提供动态内容。 （对于那些对“ZEIT”感到困惑的人——这是 Vercel 的旧公司名称，vercel.com/blog/zeit-is-now-vercel）

【参考方案1】：

在package.json 上，您需要添加 npm 脚本来构建和导出类似的内容。

  "scripts": 
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  ,

然后你就可以运行了

npm run build && npm run export

下一次构建将构建您的项目以进行运输，导出将准备好将您的文件托管在静态托管服务器上（如 firebase 托管）。

npm run export

将创建一个out/ 目录并将您的所有文件放在那里以供上传。

注意：

如果您的应用需要在运行时生成动态页面，则不能 将其部署为静态应用程序。

Read more

【讨论】：

这种情况下，如果你的应用页面比较多，你还需要在根目录下配置next.config.js文件，添加页面，这样你就可以正常访问了。例如：``` const paths = '/': page: '/' , '/about': page: '/about' ; ```

【参考方案2】：

先检查this。 这是 Next.js 团队在其 GitHub 存储库中提供的官方示例。

示例背后的想法：

我们的目标是使用 Firebase 托管重写规则在 Firebase Cloud Functions 上托管 Next.js 应用，以便我们的应用从我们的 Firebase 托管 URL 提供。每个单独的页面包都在对执行初始服务器渲染的 Cloud Function 的新调用中提供。

这是基于https://github.com/geovanisouza92/serverless-firebase 和https://github.com/jthegedus/firebase-functions-next-example 的工作，如此处所述。

PS：我知道发布链接作为答案不是最好的方法，但我的代表权不足以将其作为评论。

【讨论】：

如果其他人看到这个，更新中的示例不适用于 React Hooks。作者创建了一个updated simplified version here，它可以与钩子一起使用。

【参考方案3】：

在 package.json 上你需要修改 build 脚本。

"build": "next build && next export",

在 next.config.js 上你需要修改

/** @type import('next').NextConfig */
module.exports = 
  images: 
    loader: "imgix",
    path: "https://noop/",
  ,
  reactStrictMode: true,

执行npm run build并生成文件夹/out

【参考方案4】：

正如上面每个人都回答的那样，这是一个有点漫长而混乱的过程。

我已在此处请求用于 Next JS 集成的 firebase。 https://firebase.google.com/support/troubleshooter/report/features

如果我们都发送请求，那么 firebase 很快就会包含 react，下一个 js ONE CLICK DEPLOY 功能。

因此我们不需要为一个项目去 GitHub & Vercel & Firebase。