如何使用Firebase托管和部署React应用程序
如何使用Firebase主机和部署React应用程序
作为一名前端开发者，你可能使用过像Vercel、Netlify或GitHub Pages这样的免费托管平台来部署你的前端项目。
就我个人而言，我通常使用Vercel和Netlify。但我也喜欢尝试不同的Web技术，在之前的不同项目中我也曾使用Firebase的身份验证和存储功能。所以我决定使用Firebase来部署我的一个React-TypeScript项目，效果非常好。
Firebase是什么？
Firebase是由Google拥有的一种后端即服务（BaaS）平台，你可以使用它执行后端操作，比如身份验证，实时数据库功能等。
Firebase给前端开发者提供了在不需要深入了解后端开发的情况下进行后端功能开发的能力。
你还可以使用Firebase来托管和部署项目。它在部署后会提供一个托管的URL，你可以将其分享给其他人，在他们自己的设备上查看你的应用，就像其他托管和部署平台一样。
按照以下逐步说明，成功使用Firebase部署你的React项目。
创建你的React项目
根据你喜欢使用的方法来创建React项目吧。例如，你可以使用CRA：npx create-react-app app-name 或者使用Vite：npm create vite@latest（推荐）。
使用 cd app-name 命令进入到项目目录。然后使用 npm start 或 npm run dev 命令启动你的开发服务器。构建你所需的项目，创建一个GitHub仓库，并将项目推送到GitHub。
现在我们已经完成了第一部分的步骤。进入下一部分。
如何配置和安装Firebase
如果你还没有Firebase账号，请前往 这个网站 创建一个Firebase账号，或者如果你已经有一个账号了，请登录。如果你有一个Google账号，创建Firebase账号会很容易。
成功登录后，你需要在Firebase上创建一个项目。以下是如何操作：
步骤1：Firebase控制台
进入你的Firebase控制台，在你页面右上角应该会看到一个“转到控制台”的文字链接。
打开的页面上会有一个“创建项目”的按钮。点击该按钮，它会带你到输入项目详细信息的页面（步骤2）。
如果你之前使用过Firebase，那意味着你已经在Firebase上有项目。在那种情况下，它会弹出一个像下面这样的页面，显示你的项目列表和一个用于添加新项目的框。
步骤2：创建新项目
点击“添加项目”卡片。打开一个页面，提示你给项目取一个名字。
步骤3：填写项目细节
在这个示例中，我给项目取名为“我的React APP”。
如果你是第一次使用Firebase，你需要勾选“接受Firebase条款”的复选框和第二个复选框。
点击“继续”按钮。接下来打开的页面上有一个切换按钮，用于启用或禁用项目的Google Analytics。对于这个示例，禁用该按钮，因为我们不需要Google Analytics。
点击“创建项目”按钮，它应该开始创建你的Firebase项目。
如果这不是你第一次使用Firebase，请点击上面页面上的“继续”按钮，禁用Google Analytics，并创建一个新的项目。
步骤4：安装Firebase和Firebase工具
下一步是进入到你的项目终端（VS Code、命令行界面或你正在使用的任何代码编辑器），确保你在要部署的项目的主文件夹中，并使用以下命令安装Firebase到项目中：npm install firebase。
接下来，使用以下命令安装我们将用于托管和部署的Firebase工具：npm install -g firebase-tools。
第5步：使用终端登录Firebase
在配置Firebase项目和安装必要的依赖项之后，您需要使用以下命令在终端上登录Firebase：firebase login。
一个提示窗口会出现，询问您是否应该“允许Firebase收集CLI和模拟器套件的使用和错误报告信息”。选择“是”选项。
第6步：选择帐户
一个窗口将在默认浏览器中打开，要求您选择登录的Firebase帐户。
验证成功后，终端上将显示一个成功消息。
第7步：运行项目构建
使用npm run build命令来构建项目脚本。该命令将自动将所有必要的JavaScript、CSS和其他资源捆绑到项目目录中的一个名为“build”的文件夹中，生成一个适用于生产环境的构建。
这个过程很重要，因为它可以优化代码和资源以提高性能。这减小了应用程序的整体大小，使其更有效地部署。
第二部分成功完成后，我们来到了整个部署过程的下一个关键部分。
如何初始化Firebase
现在我们需要初始化Firebase，所以我们将一步一步进行操作。
第1步：初始化Firebase
通过在终端上使用以下命令来为该项目初始化Firebase：firebase init。它会告诉您即将在该目录中初始化一个Firebase项目。
此命令后将出现一些提示：“您是否准备好继续？”，您可以输入“Y”表示“是”。
接下来的提示是：“您要设置此目录的哪些Firebase功能？”。请使用键盘上的向下箭头键选择“Hosting：为Firebase Hosting配置文件并（可选）设置GitHub操作部署”的选项。按下空格键，然后按Enter键。
第2步：项目设置
该步骤将将您的项目目录与Firebase项目连接起来。当提示选择一个项目时，请选择“使用现有项目”选项。然后，在提示“为目录选择默认的Firebase项目”中选择您在本过程的第1部分中创建的特定Firebase项目。
如果您的Firebase控制台上有多个Firebase项目，您可能会看到其他项目选项。
第3步：设置托管
这个过程将会出现一些要回答的提示。
第一个是：“您要将哪个目录设置为公共目录？”，您可以选择或输入“build”。
接下来，当询问您是否要“将其配置为单页面应用（将所有URL重写为/index.html）”时，选择“Y”或“是”选项。
当被问及是否要“使用GitHub进行自动构建和部署时”，选择“是”选项。此外，当提示“文件build/index.html已存在。是否覆盖？”时，选择“否”。
第4步：使用GitHub授权Firebase
您需要使用GitHub账户授权Firebase。在浏览器中打开一个窗口，要求您授权Firebase访问您的GitHub账户，并输入GitHub密码。成功进行身份验证后，您将在终端上获得一个成功消息，显示您的GitHub用户名。
如果您成功跟随并达到了这个阶段，那么到目前为止您做得很好。现在我们已经完成了项目的一半。
如何选择GitHub仓库并设置GitHub工作流程
</p
第一步：选择GitHub Repo
首先，您需要在GitHub上输入您要用于设置Firebase部署的GitHub存储库。
输入的格式应为“用户名/存储库名称”。你在这个过程的第一部分中创建的项目并将其推送到GitHub的存储库就是你要使用的存储库。
举个例子，假设您的GitHub用户名是“CoderDev”，项目的存储库名称是“Firebase-Deployment”。您应该在终端中输入“CoderDev/Firebase-Deployment”。应该是这个样子：
第二步：GitHub秘密令牌
在设置GitHub工作流程之后，它将创建一个具有Firebase托管管理员权限的服务帐户，并将服务帐户的JSON上传到GitHub作为秘密令牌。
您还可以在GitHub上查看此秘密令牌。要做到这一点，请转到项目的存储库，切换到“设置”选项卡。在设置页面的左侧面板中，点击“Secrets and variables”下拉菜单，选择“Actions”选项。它将显示您的秘密令牌，就像这样：
第三步：设置工作流程
系统将提示您一个问题：“在每次部署之前设置运行构建脚本的工作流程？”。选择“是”。
系统还会问你：“每次部署之前应运行哪个脚本？ (npm ci && npm run build) npm run build”。在终端中键入：npm ci && npm run build。这将在项目目录中创建一个工作流文件。
现在，您将在项目文件夹结构中的“firebase-hosting-pull-request.yml”文件夹中看到一个”.github/workflows”的文件夹。
第四步：自动部署
接下来，您将被问及是否要“在合并PR时设置自动部署到您站点的生产频道”。选择“是”。
当要求您输入与站点的生产频道相关联的GitHub分支的名称时，请键入或选择“main”。这将在“.github/workflows”文件夹中创建另一个工作流文件“firebase-hosting-merge.yml”。
第五步：生成文件夹
上述两个操作将在您的项目目录中生成两个文件夹。一个名为“firebase.json”用于写入配置信息，另一个名为“.firebaserc”用于写入项目信息。
这就是您在项目中初始化Firebase所要做的了。
这些过程有点冗长，但好消息是，我们只需要将应用程序部署到Firebase。
如何部署到Firebase
运行部署命令
运行部署命令firebase deploy。等待部署完成。完成后，终端上将显示一个成功的消息，其中带有托管URL。那是项目的实时链接，具有“web.app”域名扩展名。
就这样！我们完成了使用Firebase部署React项目。
现在，每当您向该GitHub存储库添加、提交和推送新更改时，它将自动构建应用程序并重新部署到Firebase，以便更改在实时站点上反映出来。
这个自动构建和重新部署的过程是可能的，因为在 Firebase 初始化过程中，我们选择了“是”选项以设置与 GitHub 的自动构建和部署。
我们还选择了“是”的选项，以在每次部署之前设置运行构建脚本的工作流，并指定在每次部署之前应该运行的脚本。
要查看每次推送到仓库后如何执行此部署，请转到该项目的 GitHub 仓库。切换到“Actions”选项卡，查看应用程序的构建和部署过程。
部署过程中可能会遇到一些错误。好消息是，就在 GitHub 的 Actions 页面上，您可以跟踪看到错误来源于应用程序的哪个部分。
假设您在项目中使用 TypeScript，并声明了一个未使用的函数，或者调用了一个未使用的 Hook。您的应用程序可能在浏览器上按预期运行。
但在部署过程中，这可能会成为一个问题或引发警告，您需要修复它，提交并将其再次推送到仓库以修复错误。一旦您完成了这个步骤，并且部署成功，操作页面应该如下所示。
结论
使用 Firebase 部署项目起初可能看起来是一个漫长的过程。但如果你按照本文中的步骤进行操作，应该不会有问题。
您可以通过遵循本文中的简单步骤，轻松地将您的应用程序部署到 Firebase Hosting，并利用其强大的功能，如自动流程、简化的部署过程和与 GitHub 的持续集成。
如果您想了解更多 Firebase 提供给开发者的所有功能，请访问Firebase 官方文档进行探索。
Leave a Reply