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

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

开始使用 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


相关文章
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
668 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
3月前
|
前端开发 Java 应用服务中间件
react自学(6) 部署到tomcat中
react自学(6) 部署到tomcat中
|
4月前
|
存储 前端开发 JavaScript
|
4月前
|
存储 前端开发 安全
|
4月前
|
前端开发
|
4月前
|
前端开发 JavaScript 中间件
|
4月前
|
存储 JSON 前端开发
如何处理 React 应用程序中的本地化
【8月更文挑战第31天】
33 0
|
4月前
|
存储 前端开发 JavaScript
处理 React 应用程序中的异步数据加载
【8月更文挑战第31天】
69 0
|
4月前
|
监控 前端开发 JavaScript
如何处理 React 应用程序中的错误处理
【8月更文挑战第31天】
35 0