65.9K
CodeProject 正在变化。 阅读更多。
Home

如何将 Next.js 部署到 Firebase

Glenn Viroux
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2023年5月16日

CPOL

10分钟阅读

viewsIcon

18576

downloadIcon

69

关于如何将 Next.js 项目部署到 Firebase 的分步教程

引言

Next.js 是一个强大的 Web 应用程序构建框架，构建在 React.js 和 Node.js 之上。根据 Stackoverflow 2022 年开发者调查，React.js 是第二受欢迎的 Web 框架，仅次于 Node.js。Next.js 为构建生产就绪的应用程序提供了一系列强大的功能，例如服务器端渲染和静态站点生成。

另一方面，Firebase 是 Google 提供的一个易于使用的平台，可帮助您构建移动和 Web 应用程序。

如果您正在使用这两种技术开发 Web 应用程序，那么您正处于一个有利的环境中。然而，当我开发 Ballistic 时，在尝试部署应用程序时遇到了许多问题。在本文中，我们将探讨这些问题，并逐步指导您成功地将 Next.js 应用程序部署到 GCP。

Next.js：简化 SSR 和静态生成

Next.js 是一个 React 框架，它简化了构建服务器端渲染和静态生成 Web 应用程序的过程。使用 Next.js，您可以将应用程序组织成页面并利用其基于文件的路由系统。当用户请求页面时，Next.js 会在服务器上预渲染它，提供完全渲染的 HTML 内容以即时显示。Next.js 通过支持服务器端数据获取函数（如 getServerSideProps）和静态数据获取函数（如 getStaticProps）使数据获取变得容易。Next.js 还提供了客户端渲染功能和优化的生产构建以提高性能。它结合了服务器端渲染、静态生成和客户端交互性，使 Next.js 成为现代 Web 开发的强大框架。

Firebase 框架感知型 Next.js 托管

Firebase Hosting 是一个强大可靠的网站托管选项，尤其是在需要快速轻松部署时。它是由 Google 提供的一个完全托管的托管服务，开发人员可以通过一个简单的命令将 Web 应用程序和静态内容部署到全球内容分发网络 (CDN)。Firebase Hosting 的免费套餐对于小型项目特别有吸引力，因为它每天提供有限的存储和数据传输，无需任何费用。如果您的网站超出免费套餐限制，您可以使用按量付费定价，这样您只需为您使用的资源付费。

Firebase 的框架感知型托管是一项有价值的集成，可以无缝部署流行的 Web 框架，如 Angular 和 Next.js。如果您使用的是 Next.js，Firebase 将自动检测您的 next.config.js 文件并识别您正在运行 Next.js Web 应用程序。这使得 Firebase 能够以最少的配置将您的 Next.js 设置转换为 Firebase 设置。此外，如果您的应用程序包含动态服务器端逻辑，该集成将把它转换为 Cloud Functions for Firebase。这种集成可以显著简化开发人员的部署过程，使其成为托管 Web 应用程序的便捷高效选项。

这些“黑盒集成”的挑战之一是，当出现问题时，可能很难进行故障排除。在 Next.js 和 Firebase 托管的情况下，像“找不到 pages 目录。请在项目根目录下创建一个”这样的错误消息可能会让开发人员挠头。当您已经验证问题不是由您自己的代码引起的时，您可能别无选择，只能在 GitHub 上创建问题（如果是开源项目）或联系支持，并希望能够快速解决。

这就是为什么，在本博客文章中，我们将探讨如何手动将 Next.js 配置设置转换为 Firebase 设置，这样我们就无需依赖 Firebase 中 Next.js 的实验性集成。

将您的 Next.js 应用程序转换为 Firebase

Next.js 的核心优势之一是其对服务器端渲染 (SSR) 的支持，它允许在服务器上预渲染网页，而不是依赖客户端 JavaScript 来渲染页面。这大大改善了用户体验，因为用户几乎可以立即查看完全渲染的 HTML 页面，而无需等待 JavaScript 或 CSS 文件加载。

通过将您的 Next.js 应用程序转换为 Firebase，您可以进一步提高其速度和可伸缩性，因为 Firebase 为托管和提供 Web 内容提供了强大而可靠的平台。借助 Firebase Hosting，您可以轻松地将预渲染的 Next.js 应用程序部署并提供给全球受众，为他们提供快速无缝的浏览体验。

为了实现这一点，我们需要将 Next.js 代码库分为两部分：客户端和服务器。服务器部分将定义一个处理 SSR 的 Firebase 函数，而客户端部分将包含我们 Next.js 代码库的其余部分。在接下来的步骤中，我们将详细介绍从头到尾创建 Next.js 项目并将其部署到 Firebase 的所有细节。

项目设置

让我们首先运行以下命令设置我们的 Next.js 项目

yarn create next-app next-firebase --typescript --eslint --src-dir --no-tailwind

接受默认的交互式选项，您应该会看到一条消息显示“成功！创建了 next-firebase”。运行此命令将创建一个名为“next-firebase”的新 Next.js 应用程序，支持 TypeScript、用于代码 linting 的 ESLint、单独的源代码目录，并且不包含 Tailwind CSS 框架。

这将为您提供一个功能齐全的 Next.js 代码库，您可以通过启动开发服务器快速测试它

yarn dev

然后，打开浏览器并导航到 https://:3000。

创建服务器和客户端分离

在上一步成功设置项目后，让我们继续将代码库拆分为负责 SSR 的服务器函数和包含所有 Next.js 代码的客户端代码库。

在 src 目录下创建 client 和 server 文件夹。将 src 目录的原始内容以及 public 文件夹、next.config.js 文件和 tsconfig.json 文件移动到 client 目录。这将使 server 文件夹暂时为空。我们将在接下来的步骤中用负责 SSR 的 Firebase 函数填充它。

next.config.js 文件是 Next.js 项目中使用的配置文件。其目的是自定义 Next.js 框架的默认行为和设置。通过创建和修改 next.config.js 文件，您可以覆盖 Next.js 提供的默认配置选项，并根据您的特定需求定制项目。

tsconfig.json 文件是 TypeScript 项目中使用的配置文件。其目的是指定和自定义 TypeScript 编译器 (tsc) 的编译器选项。

创建 SSR 服务器代码

要创建负责服务器端渲染的函数，我们首先需要安装一些依赖项。运行以下命令安装它们

yarn add firebase-admin firebase-functionscd 
yarn add @babel/core @babel/cli @babel/preset-env cross-env rimraf

安装依赖项后，在 server 文件夹中创建一个 index.js 文件，如下所示

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

admin.initializeApp();

const dev = process.env.NODE_ENV !== 'production';
const app = next({
    dev,
    // the absolute directory from the package.json file that initialises this module
    // IE: the absolute path from the root of the Cloud Function
    conf: { distDir: 'dist/client' },
});
const handle = app.getRequestHandler();

export const nextjsServer = functions.https.onRequest((request, response) => {
    // log the page.js file or resource being requested
    console.log('File: ' + request.originalUrl);
    return app.prepare().then(() => handle(request, response));
});

此 index.js 代码的总体目的是在 Firebase Cloud Functions 中使用 Next.js 创建服务器端渲染环境。当对部署的函数发出 HTTP 请求时，它使用 Next.js 处理请求，从而允许 Next.js 页面进行服务器端渲染和处理动态路由。

由于我们将使用 Babel 转译此代码，因此我们需要指示 Babel 如何编译代码。为此，我们将在 server 文件夹中创建一个 .babelrc 文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10.15.3"
        }
      }
    ]
  ]
}

更新 package.json

我们需要更新 package.json 中的脚本，以反映我们创建的新文件夹结构

"scripts": {
    "dev:client": "next src/client",
    "dev:server": "babel src/server --out-dir dist/server --source-maps --watch",
    "dev": "yarn run dev:client & yarn run dev:server",
    "build:client": "next build src/client",
    "build:server": "babel src/server --out-dir dist/server --source-maps",
    "build": "yarn run build:client && yarn run build:server"
}

让我们逐一分解这些新脚本

  1. "dev:client"

    • 此脚本运行客户端代码的 Next.js 开发服务器。
    • 它启动开发服务器并指定客户端源代码所在的目录 (src/client)。

  2. "dev:server"

    • 此脚本使用 Babel 转译服务器端代码，并将转译后的代码输出到 dist/server 目录。
    • 它包含源映射并监视更改，因此它会自动更新转译后的代码。

  3. "dev"

    • 此脚本同时运行客户端和服务器端开发服务器。
    • 它使用 & 符号 (&) 并行运行两个脚本。

  4. "build:client"

    • 此脚本为生产部署构建 Next.js 客户端代码。
    • 它触发 Next.js 构建过程并指定客户端源代码所在的目录 (src/client)。

  5. "build:server"

    • 此脚本使用 Babel 转译服务器端代码，并将转译后的代码输出到 dist/server 目录。
    • 它不包含源映射。

  6. "build"

    • 此脚本按顺序执行 "build:client" 和 "build:server" 脚本。
    • 它为生产部署构建客户端和服务器端代码。

这些脚本通过自动化任务（例如运行开发服务器、转译代码和构建生产就绪代码）为开发和生产工作流提供了便利。它们使项目的开发和部署过程更加顺畅。

此时，您可以启动一个本地开发服务器，该服务器托管您的客户端代码并提供您的 SSR 服务器。您还可以构建 Next.js 应用程序的生产就绪版本。

还要将以下行添加到您的 package.json 中，以覆盖服务器的主入口点

"main": "dist/server/index.js",
"engines": {
  "node": "16"
},

这些行确保当您将应用程序部署到 Firebase 时，它使用服务器代码的编译版本而不是原始源代码。它们还指定应用程序需要 Node.js 16 版本才能运行。

设置 Firebase

要将 Firebase 与我们的 Next.js 应用程序集成，我们需要在 Firebase 控制台中创建一个新的 Firebase 项目。如果您已经设置了一个项目，则可以跳过此步骤。创建项目后，您可以通过导航到项目设置页面，点击项目概述旁边的齿轮图标，然后在通用选项卡上选择添加到 Web 应用程序来将 Firebase 添加到您的 Web 应用程序中。在这里，您可以注册您的新 Web 应用程序。

接下来，在项目的 root 目录中，运行以下命令初始化 Firebase

firebase init

在项目的 root 目录中，在项目设置期间，选择以下选项

  • Firebase Hosting 和 Firebase Functions
  • 使用现有项目，并选择您刚刚创建或希望使用的 Firebase 项目
  • 您想用什么语言编写 Cloud Functions？→ JavaScript
  • 您现在想使用 npm 安装依赖项吗？→ 否
  • 在当前目录中检测到现有 Next.js 代码库，我们应该使用它吗？→ 否
  • 您想使用 Web 框架吗？（实验性）→ 否
  • 您想使用哪个目录作为公共目录？→ Public
  • 配置为单页应用程序（将所有 URL 重写到 /index.html）？→ 否
  • 使用 GitHub 设置自动构建和部署？→ 否

运行此命令后，您的 root 文件夹中将创建 .firebaserc 文件和 firebase.json 文件。您需要修改 firebase.json 文件以包含以下代码

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**/**",
        "function": "nextjsServer"
      }
    ]
  },
  "functions": {
		"runtime": "nodejs16"
    "source": ".",
    "ignore": [
      ".firebase/**",
      ".firebaserc",
      "firebase.json",
      "**/node_modules/**",
      "**/public/**",
      "**/cache/**"
    ]
  }
}

此配置设置了“public”目录中静态文件的托管，并定义了一个重写规则，将所有传入请求重定向到“nextjsServer”云函数。它还配置了云函数运行时，指定了源代码目录，并定义了部署期间要忽略的文件和目录。

前面的过程还会生成一个包含 404.html 文件和 index.html 文件的 public 文件夹。请务必在继续之前删除 index.html 文件。

测试您的网站并部署

此时，您可以在本地测试您的 Web 应用程序，与他人分享您的更改，并将应用程序部署到公共平台。要在本地测试您的应用程序，您可以使用 package.json 中的 serve 脚本

yarn serve

在通过运行 package.json 中的 serve 脚本验证您的 Web 应用程序在本地正常运行后，您就可以将其部署到公共平台了。为此，您需要将必要的部署脚本添加到 package.json 文件中

"scripts": {
    "predeploy": "rimraf dist/ && yarn run build",
    "deploy": "cross-env NODE_ENV=production firebase deploy --only functions,hosting",
 }

现在，当您准备好部署您的应用程序时，只需运行 yarn deploy 即可将您的应用程序部署到 Firebase 托管。

结论

总之，我们已经介绍了使用 Firebase Cloud Functions 和 Firebase Hosting 构建和部署 Next.js Web 应用程序的整个过程。通过遵循本文中概述的步骤，您现在应该能够使用 Firebase 创建和启动您自己的 Next.js 应用程序。

此项目的完整源代码可在 GitHub 上获取：https://github.com/GlennViroux/next-firebase-blog。

感谢您的阅读，希望本文对您有所启发和帮助。

© . All rights reserved.