如何在 Firebase 上部署 React 项目？

在开发任何项目时，我们必须将其托管在某个地方，以便全世界都能看到我们的辛勤工作。托管网站有时会很忙，但您不必担心，因为我们现在可以在一两分钟内通过非常简单的设置在Firebase上托管我们的 React 项目。

在 Firebase 上部署 React 项目的步骤：

按照以下步骤或特别需要为您的 React 项目设置 Firebase。

• 第一步：首先我们要建立我们的Firebase项目，去它的官网，创建一个如下图所示的项目。

  

• 第 2 步：然后我们将通过进入构建下拉列表下的托管部分来启用Firebase 托管。

  

• 第 3 步：然后我们将按照如下所述进行托管设置。

  

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app react_hosting

  第 2 步：安装 Firebase 工具：

• npm install -g firebase-tools

  项目结构：

  

  项目结构

托管网站：

• 第 1 步：首先，我们将通过在根目录的控制台中运行以下命令，在我们的 React 应用程序中初始化一个 firebase 项目。

  firebase init

  现在输入y ，因为我们准备好继续了。

  

• 第 2 步：从提供的选项中选择托管。

  

• 第 3 步：选择使用现有项目选项。

  

• 第四步：由于react应用的build文件夹默认是在build文件夹中生成的，所以我们会使用和我们的public目录一样的。

  

• 第 5 步：键入y ，因为我们要将我们的应用程序配置为单页应用程序。

  

  初始化完成，现在我们只需要运行一些命令，我们的应用程序就可以运行了。

  

• 第 6 步：现在我们将运行以下命令来构建我们的 React 应用程序。

  npm run build

• 第 7 步：现在我们只需要运行最后一条命令，我们的应用程序就会被部署。

  firebase deploy

  这将部署我们的项目，并为我们提供可以访问的托管链接。

  

输出：我们可以通过在控制台访问firebase提供的托管链接来验证我们的网站是否部署成功，如下图所示：