firebase使用_如何开始使用Firebase Hosting

firebase使用

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

Firebase is a mobile and web application development platform that was developed by Firebase, Inc. in 2011. It was acquired by Google in 2014 and rolled up into the Google Cloud service. Now, it’s a flagship product of the Google Cloud offering.

Firebase是由Firebase，Inc.在2011年开发的移动和Web应用程序开发平台。它于2014年被Google收购，并汇总到Google Cloud服务中。 现在，它是Google Cloud产品的旗舰产品。

Firebase is a complex and articulated product, mainly targeted at mobile applications.

Firebase是一种复杂且明确的产品，主要针对移动应用程序。

One of its lesser known features that we’ll discuss in this article is the Firebase advanced web hosting service.

我们将在本文中讨论的鲜为人知的功能之一是Firebase高级网络托管服务。

Firebase托管功能 (Firebase Hosting Features)

Firebase Hosting provides hosting for static web sites, such as

Firebase托管为静态网站提供托管，例如

• sites you can generate using static site generators
  您可以使用静态网站生成器生成的网站
• sites built with server-side CMS platforms, from which you generate a static copy of the website
  使用服务器端CMS平台构建的网站，您可以从中生成网站的静态副本

You can host anything as long as it’s not dynamic. A WordPress blog, for example, is almost always a good candidate to be a static site if you use Disqus or Facebook comments.

您可以托管任何东西，只要它不是动态的即可。 例如，如果您使用Disqus或Facebook评论，则WordPress博客几乎总是一个不错的选择，可以成为静态站点。

Firebase Hosting delivers files through the Fastly CDN, using HTTPS and provides an automatic SSL certificate, with custom domain support.

Firebase托管使用HTTPS通过Fastly CDN传递文件，并提供具有自定义域支持的自动SSL证书。

Its free tier is generous, with cheap plans available if you outgrow it. It’s very developer-friendly, provides a CLI interface tool, an easy deployment process, and one-click rollbacks.

它的免费套餐是慷慨的 ，如果您不再购买它，则可以使用便宜的计划。 它对开发人员非常友好，提供CLI界面工具，易于部署的过程以及一键式回滚。

为什么要使用Firebase托管？ (Why should you use Firebase Hosting?)

Firebase can be a good choice to deploy static websites, and Single Page Apps.

Firebase是部署静态网站和单页应用程序的不错选择。

I like to use Firebase Hosting mainly because I tested many different providers and Firebase offers an awesome speed across multiple geographic locations without the need for a separate CDN on top, since the CDN is built-in for free.

我之所以喜欢使用Firebase Hosting，主要是因为我测试了许多不同的提供商，并且Firebase在多个地理位置提供了超快的速度 ，而顶部不需要单独的CDN，因为CDN是免费内置的 。

While having your own VPS is a very good option, the overhead of managing your own server for a simple website is just not worth it. I’d prefer to focus on the content rather than on the operations, just like I’d deploy an app on Heroku.

虽然拥有自己的VPS是一个很好的选择， 但为一个简单的网站管理自己的服务器的开销却不值得。 我宁愿关注内容而不是操作，就像在Heroku上部署应用程序一样。

Firebase is even easier to setup than Heroku.

Firebase比Heroku更加容易设置。

安装Firebase CLI工具 (Install the Firebase CLI tool)

Install the Firebase CLI with

使用以下命令安装Firebase CLI

npm install -g firebase-tools

or

要么

yarn global add firebase-tools

Authenticate with the Google account (I’m assuming you already have a Google account) by running

通过运行与Google帐户(假设您已经有一个Google帐户)进行身份验证

firebase login

在Firebase中创建一个项目 (Create a project in Firebase)

Go to https://console.firebase.google.com/ and create a new project.

转到https://console.firebase.google.com/并创建一个新项目。

Now within the console, run the following from the root folder of the site you’re working on:

现在，在控制台中，从您正在工作的网站的根文件夹中运行以下命令：

firebase init

Press Space to select the “Hosting” option, then Enter to confirm your choice.

按空格键选择“托管”选项，然后按Enter确认选择。

Now you need to choose the project you want to deploy the site to.

现在，您需要选择要将站点部署到的项目。

Choose “create a new project”.

选择“创建一个新项目”。

Now you choose which folder contains the static version of your site. For example, public.

现在，您选择哪个文件夹包含站点的静态版本。 例如， public 。

You’ll be asked two questions about the app configuration. Reply “No” to both of them:

系统将询问您两个有关应用程序配置的问题。 对他们两个都回答“ 否 ”：

• Configure as a single-page app (rewrite all urls to /index.html)?
  配置为单页应用程序(将所有网址重写为/index.html)？
• File public/index.html already exists. Overwrite?
  文件public / index.html已经存在。 覆盖？

This will prevent Firebase from adding its own default index.html file.

这将阻止Firebase添加其自己的默认index.html文件。

Now, you’re good to go:

现在，您可以开始：

配置站点 (Configure the site)

The Firebase CLI app created the firebase.json file in the root site folder.

Firebase CLI应用程序在根站点文件夹中创建了firebase.json文件。

In this article, I tell how to configure a simple feature in Firebase Hosting, by adding a small bit of configuration in the firebase.json file.

在本文中，我介绍了如何通过在firebase.json文件中添加一些配置来配置Firebase Hosting中的一个简单功能。

I want to set the Cache-Control header directive on all the site assets - images, CSS and JS files.

我想在所有站点资产(图像，CSS和JS文件)上设置Cache-Control标头指令。

A clean firebase.json file contains the following:

干净的firebase.json文件包含以下内容：

{   "hosting": {    "public": "public",     "ignore": [       "firebase.json", "**/.*",       "**/node_modules/**"     ]   } }

It tells Firebase where is the site content, and which files it should ignore. Feel free to add all the folders you have, except public.

它告诉Firebase网站内容在哪里，应忽略哪些文件。 随意添加除public之外的所有文件夹。

We’re going to add a new property in there, called headers:

我们将在其中添加一个名为headers的新属性：

{   "hosting": {     "public": "public",     "ignore": [       "firebase.json",      "**/.*",       "**/node_modules/**"    ],     "headers": [       {         "source" : "**/*.@(jpg|jpeg|gif|png|css|js)",         "headers" : [ {           "key" : "Cache-Control",           "value" : "max-age=1000000" //1 week+         } ]       }     ]   } }

As you can see, we tell that for all files ending with jpg|jpeg|gif|png|css|js Firebase should apply the Cache-Control:max-age=1000000 directive, which means that all assets are cached for more than 1 week.

如您所见，我们告诉我们，对于所有以jpg|jpeg|gif|png|css|js结尾的文件，Firebase应该应用Cache-Control:max-age=1000000指令，这意味着所有资产都缓存了1个以上周。

发布网站 (Publish the site)

When you are ready to publish the site, you just run the following command and Firebase will take care of everything.

当您准备发布网站时，只需运行以下命令，Firebase就会处理一切。

firebase deploy

You can now open https://yourproject.firebaseapp.com and you should see the website running.

现在，您可以打开https://yourproject.firebaseapp.com ，您应该会看到该网站正在运行。

自定义域 (Custom Domain)

The next logical step is to make your site use a custom domain.

下一步的逻辑步骤是使您的站点使用自定义域。

Go to https://console.firebase.google.com/project/_/hosting/main and click the “Connect Domain” button:

转到https://console.firebase.google.com/project/_/hosting/main ，然后单击“连接域”按钮：

The wizard will ask you for the domain name, then it will provide a TXT record you need to add to your hosting DNS panel to verify the domain.

该向导将询问您域名，然后它将提供您需要添加到托管DNS面板以验证域的TXT记录。

If the domain is brand new, it might take some time before you can pass this step.

如果该域名是全新的，则可能需要一些时间才能通过此步骤。

Once this is done, the interface will give you two A records to add as well to your hosting DNS panel.

完成此操作后，该界面将为您提供两个A记录，以添加到您的托管DNS面板中。

If you set up yourdomain.com, don’t forget to also set up www.yourdomain.com by making it a redirect.

如果您设置了yourdomain.com ，请不要忘记通过将其设置为重定向来设置www.yourdomain.com 。

Now you just have to wait for your hosting to update the DNS records and for DNS caches to flush.

现在，您只需要等待主机更新DNS记录并刷新DNS缓存即可。

Also, keep in mind that your SSL certificate is automatically provisioned but requires a bit of time to be valid.

另外，请记住，您的SSL证书是自动配置的，但需要一点时间才能生效。

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

翻译自: https://www.freecodecamp.org/news/how-to-get-started-using-firebase-hosting-439d4bd45cb6/

firebase使用