如何在 firebase 上部署 react 应用程序？

如何在 firebase 上部署 react 应用程序？

我们正在制作我们的 React 应用程序，但我们只能在我们自己的计算机上查看它们。我们如何公开发布它？一起来看看吧

首先，让我们在发布应用程序之前对应用程序进行必要的调整。

这些是什么 ？

步骤1 ： 测试您的代码，最简单的方法是我们可以在浏览器中测试我们所有的功能和组件。我们可以通过 try-catch 来测试我们的函数、api 请求等，以获得更健康的错误结果。如果有错误，我们可以在控制台中看到我们的错误输出。

第2步 ： 优化代码，让我们进行性能改进。例如，使用 React.memo 功能进行的改进。简单总结一下 React.memo 的特性，React.memo 是一个顶级组件。如果您的组件使用相同的 props 以相同的结果呈现，我们可以使用 React.memo 存储和调用它，这个过程将提高应用程序的性能。

第 3 步： 为生产构建应用程序

第4步 ： 部署应用程序

这些是我们必要的设置。现在，在我们继续发布步骤之前，让我们进行我在步骤 2 中提到的性能改进。

我们通常将组件直接导入到我们的应用程序中，但这样做的缺点是 App.js 在首次加载时将所有组件直接下载到本地，这是我们不希望的，因为如果它下载所有组件，则会出现性能损失.好吧，如果我们只在必要时将组件下载到本地，我们将提高我们的应用程序性能，对吧？如果我们为此使用 React.lazy 函数，我们会得到我们想要的。

App.js

我们在第 6 行和第 7 行中调用我们的组件。因此，当第一次安装应用程序时，我们不会下载所有组件，我们只下载所需的组件。

当我们点击第二个组件时，我们会看到遇到 spinner 并且我们的第二个组件正在下载，因此我们在第一次加载应用程序时不会遇到性能损失。

现在我们可以构建我们的应用程序（ 第 3 步 ) .使用终端运行我们的构建命令并获取我们的构建文件。

Terminal

Terminal Output

在终端上运行我们的代码后，我们的构建文件就创建好了。这个文件（build）包含了你最终需要部署的所有代码。现在我们所有的测试和优化都完成了，最后一步是通过 firebase 部署应用程序.打开firebase并创建一个项目。

Create a project

Build a hosting

现在我们将看到安装包的代码，复制此代码然后转到终端并粘贴，运行。

现在让我们初始化自己的项目。与第一步一样，使用终端运行我们的代码，如果您没有登录，您将看到登录屏幕，您必须登录。

登录和firebase初始化后，你会看到这条消息你需要写“y”然后按回车

选择您的应用程序和公共目录而不是公共文件，您需要 写构建（文件） .我之前提到过

步骤是这样的，现在让我们部署。

复制代码打开终端并粘贴，运行。此代码将部署您的反应应用程序

是的，我们现在完成了单击托管 url，您将看到您的应用程序 😃

我的基本申请网址： https://deploy-app-test-3aa60.web.app

对本文的参考：

[

Firebase 文档

构建强大的应用程序。在不管理服务器的情况下启动您的后端。轻松扩展以支持数百万用户……

firebase.google.com

](https://firebase.google.com/docs)

我向您解释了如何在 firebase 上发布您的 react 应用程序。希望对您有所帮助，如果您能将您认为缺失或错误的部分发送给我，我将不胜感激。

接触 ： 领英

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12416/30450412