如何使用 Firebase 托管部署 React 应用程序

happyEnding
229 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情

开始使用 Firebase 托管

Firebase 托管为您提供了一种快速、安全且可靠的方式来托管应用的静态资产（HTML、CSS、JavaScript、媒体文件等）以及提供[动态内容和托管微服务]。

我们的生产级托管由全球内容分发网络 (CDN) 提供支持。默认情况下，托管通过 SSL 提供您的内容，并且可以在 web.app 和 firebaseapp.com 上免费用于您自己的[自定义域或项目的子域。]

在你开始之前

在设置 Firebase 托管之前，您需要创建一个 Firebase 项目。要将项目部署到 firebase 服务器，请按照以下步骤操作。

第 1 步：安装 Firebase CLI

访问 Firebase CLI 文档以了解如何安装[Firebase CLI 工具] 或更新到其最新版本。

更新到最新的 CLI 版本

通常，您希望使用最新的 Firebase CLI 版本。如何更新 CLI 版本取决于您的操作系统和安装 CLI 的方式。

在许多情况下，新功能和错误修复仅适用于最新版本的 Firebase CLI。经常将 CLI 更新到最新版本是一种很好的做法。

首先，使用 NPM 在当前项目中安装 Firebase CLI 工具包。您可以在 Firebase 文档中找到安装或更新它的替代方法。

$ npm install -g firebase-tools

成功安装此工具后，登录 Firebase 平台：

$ firebase login

输入命令后，终端中将显示类似于以下控制台结果的措辞。系统将提示您登录 Firebase 并允许此应用程序从终端运行。如果一切顺利，控制台上将显示成功的身份验证消息。


i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=000000-feejsdfjdfjdfjdsfjdfoef342265225622626.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=182344245&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

✔  Success! Logged in as johndoe@gyourmailprovider.com

访问提供的 URL，然后使用 Google 帐户登录。成功登录 Firebase 平台后，查看当前链接到该帐户的项目列表。为此，您需要输入以下命令：

$ firebase projects:list

将显示链接到您帐户的项目列表，其中包含类似于以下信息的内容：

$  ✔ Preparing the list of your Firebase projects...
项目显示名称项目编号项目编号资源位置 ID
firebase-项目名称firebase-项目名称45632833938美国中央
$  1 project(s) total.

第 2 步：初始化您的项目

要将本地项目文件连接到 Firebase 项目，请从本地项目目录的根目录运行以下命令：

$ firebase init hosting

控制台将显示类似于以下代码的内容：


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/ComputerUserName/Documents/FolderName/local_project_name

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project firebase-project-name (firebase-project-name)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote n/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

在项目初始化期间，Firebase CLI 提示：

  1. 选择一个 Firebase 项目以连接到您的本地项目目录。

所选的 Firebase 项目是您本地项目目录的“默认”Firebase 项目。要将其他 Firebase 项目连接到您的本地项目目录，请设置项目别名。

  1. 指定一个目录作为您的公共根目录。

此目录包含您所有公开提供的静态文件，包括您的index.html文件和您要部署到 Firebase 托管的任何其他资产。

  • 公共根目录的默认值称为 public。

    • 您可以现在指定公共根目录，也可以稍后在配置文件中指定firebase.json。
    • 如果您选择默认值并且还没有名为 的目录public，Firebase 会为您创建它。

  • 如果您的公共根目录中还没有有效index.html文件或404.html文件，Firebase 会为您创建它们。

  1. 为您的网站选择一个配置。

如果您选择制作单页应用，Firebase 会自动为您添加重写配置。

在初始化结束时，Firebase 会自动创建两个文件并将其添加到本地应用程序目录的根目录：

  • firebase.json列出项目配置的配置文件。在配置[托管行为页面]上了解有关此文件的更多信息。
  • .firebaserc存储项目别名的文件。

准备好配置文件以进行部署

firebase.json 文件

firebase init 命令在项目目录的根目录中创建一个 firebase.json 配置文件。使用 Firebase CLI 部署资产需要 firebase.json 文件，因为它指定将项目目录中的哪些文件和设置部署到 Firebase 项目。

对于我们本地项目中生成的firebase.json文件，必须添加一个名为“public”的新属性或使用构建文件夹名称的值进行更新。这可能会有所不同，具体取决于您在构建配置中指定的名称。以下是此配置文件及其默认属性的示例：

{
  "hosting": {
    "public": "/build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

第 3 步：部署到您的站点

要部署到您的站点，请从本地项目目录的根目录运行以下命令：

$  firebase deploy --only hosting

注意： 通过使用 --only hosting 标志运行此命令，您只会部署您的托管内容和配置。如果您还想部署其他项目资源或配置（如函数或数据库规则），请在标志中使用逗号分隔列表运行此命令（例如，--only hosting,functions）。

此命令将您的托管内容和配置部署到以下 Firebase 提供的子域：

  • PROJECT_ID .web.app
  • PROJECT_ID .firebaseapp.com

如果此命令一切顺利，终端将显示类似于以下控制台结果的内容：


=== Deploying to 'firebase-project-name'...

i  deploying hosting
i  hosting[firebase-project-name]: beginning deploy...
i  hosting[firebase-project-name]: found 16 files in /build
✔  hosting[firebase-project-name]: file upload complete
i  hosting[firebase-project-name]: finalizing version...
✔  hosting[firebase-project-name]: version finalized
i  hosting[firebase-project-name]: releasing new version...
✔  hosting[firebase-project-name]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/firebase-project-name/overview
Hosting URL: https://firebase-project-name.web.app
avatar
文章
阅读
粉丝