paint-brush
在 Firebase 上部署网站并免费使用:指南经过@proflead
2,907 讀數
2,907 讀數

在 Firebase 上部署网站并免费使用:指南

经过 Vladislav Guzey4m2023/06/06
Read on Terminal Reader

太長; 讀書

Firebase 是一个移动和网络应用程序开发平台。它提供实时数据库、身份验证、托管、云存储等功能。今天,我们将使用它的“托管”功能来存储我们的 Next.JS 项目。您要做的第一件事是在 Firebase 上注册一个帐户。
featured image - 在 Firebase 上部署网站并免费使用:指南
Vladislav Guzey HackerNoon profile picture

不久前,我写了一篇题为“如何将网站性能分数从 35 提高到 100 “ 在那篇文章中,我承诺向您展示如何在 Firebase 上部署您的项目并免费使用它。我信守诺言!

什么是 Firebase?

可能你们中有些人还不熟悉 Firebase,所以让我简单地向你们解释一下它是什么。

火力地堡是一个移动和 Web 应用程序开发平台,它提供了一组工具和服务来帮助开发人员更轻松地构建和扩展他们的应用程序。


它提供实时数据库、身份验证、托管、云存储等功能。 Firebase 还提供后端功能和基础设施,使开发人员能够专注于构建他们的应用程序,而不必担心服务器管理或复杂的基础设施设置。


总的来说,Firebase 简化了开发过程,使开发人员能够快速创建高质量的应用程序。


今天,我们将使用它的“托管”功能来存储我们的 Next.JS 项目。在此示例中,我将向您展示如何托管项目的静态版本。您要做的第一件事是注册一个帐户。

如何注册 Firebase 账号

要在 Firebase 上注册一个帐户,请打开https://firebase.google.com/ ,然后点击“开始”。

How to Register an Account of Firebase

之后,您需要创建一个 Google 帐户或使用现有帐户。完成第一步后,您将进入 Firebase 控制面板。下一步是创建一个项目。

如何在 Firebase 上创建项目

要创建一个项目,您必须执行 3 个简单的步骤:


  1. 单击“添加项目”,并在新窗口中为其命名。

How to Create a Project on Firebase

  1. 为项目启用或禁用 Google Analytics 功能,然后单击“创建项目”

How to Create a Project on Firebase

几分钟后,您的项目将被创建。

如何免费使用 Firebase

创建项目后,您将能够在仪表板中看到它。默认情况下,您将使用Spark 计划。如果不是,则需要将其更改为Spark Plan


Spark 计划是一项免费计划,没有任何月费。它有一些局限性,但足以启动您的项目,特别是如果您打算将其用作静态网站的托管平台。

How to Use Firebase for Free

要查看该计划的完整说明,请访问此关联.


是时候设置 Firebase 托管了。

如何设置 Firebase 托管

设置 Firebase 托管也非常简单。登录您的帐户,然后选择您的项目。然后,在左侧菜单中,单击“构建”,然后从下拉列表中选择“托管”。

How to Set Up Firebase Hosting

在新窗口中,您会看到一个欢迎屏幕。点击“开始”。

How to Set Up Firebase Hosting

要托管您的项目,您需要先设置 Firebase CLI。


打开终端窗口,输入以下命令:

 npm install -g firebase-tools



设置完成后,在您的终端中输入以下内容:

 firebase login


它将带您到登录屏幕以授权访问。


下一步是导航到终端窗口内的项目文件夹,您已将静态网站存储在该文件夹中。


运行以下命令:

 firebase init


如果您已正确完成所有操作,您应该会在终端窗口中看到以下内容。


在选项列表中,选择“托管:为 Firebase 托管配置文件并(可选)设置 GitHub 操作部署。”使用键盘上的箭头键进行导航,按空格键进行选择,然后按回车键。

firebase init

接下来,从列表中选择一个帐户,然后按回车键。


由于我们已经有一个项目,因此从列表中选择“使用现有项目”,然后选择您在上一步中创建的项目。

firebase init

默认情况下,公共目录设置为“public”。如果你想指定另一个目录,你可以在下一步中这样做。例如,我的 Next.js 项目在“out”目录中生成网站的静态版本,因此我在这一步指定它。

firebase init

最后两个配置问题将与您的网站设置有关。


  • “配置为单页应用程序(将所有 URL 重写为 /index.html)”-


  • “使用 GitHub 设置自动构建和部署?” -没有


我们完成了设置。现在,是时候将我们的项目部署到 Firebase 了。

如何将网站部署到 Firebase

完成所有配置后,您可以将网站部署到 Firebase 托管。

在终端窗口中,在您的项目目录中,输入以下命令:

 firebase deploy --only hosting


如果一切顺利,您将看到可用于访问网站的 URL。


我希望你觉得这篇文章有用!在下一篇中,我将向您展示如何为您的 Firebase 项目设置自定义域名。


敬请关注!


也发布在这里