开始使用 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 提示:
- 选择一个 Firebase 项目以连接到您的本地项目目录。
所选的 Firebase 项目是您本地项目目录的“默认”Firebase 项目。要将其他 Firebase 项目连接到您的本地项目目录,请设置项目别名。
- 指定一个目录作为您的公共根目录。
此目录包含您所有公开提供的静态文件,包括您的index.html
文件和您要部署到 Firebase 托管的任何其他资产。
- 公共根目录的默认值称为 public。
- 您可以现在指定公共根目录,也可以稍后在配置文件中指定
firebase.json
。 - 如果您选择默认值并且还没有名为 的目录
public
,Firebase 会为您创建它。
- 如果您的公共根目录中还没有有效
index.html
文件或404.html
文件,Firebase 会为您创建它们。
- 为您的网站选择一个配置。
如果您选择制作单页应用,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