如何開始使用Firebase託管

Firebase是一項Google Cloud服務,是一項明確的產品,主要針對移動應用程序。 Firebase託管只是其中的一小部分。

Firebase簡介

Firebase是Firebase,Inc.在2011年開發的移動和Web應用程序開發平台,於2014年被Google收購。

因此,現在Firebase不僅是Google Cloud服務,而且是Google Cloud服務的旗艦產品。

Firebase是一種複雜且明確表達的產品,主要針對移動應用程序。

但是,它的功能之一是高級的Web託管服務。

Firebase託管功能

Firebase Hosting為靜態網站提供託管,例如您可以使用靜態網站生成器生成的網站,甚至是使用服務器端CMS平台構建的網站,您都可以從中生成網站的靜態副本。

您可以託管任何東西,只要它不是動態的即可。例如,如果您使用Disqus或Facebook評論,則WordPress博客幾乎總是一個不錯的選擇,可以成為靜態站點。

Firebase託管可通過快速交付文件CDN,使用HTTPS並提供具有自定義域支持的自動SSL證書。

它的免費套餐是慷慨的,價格便宜的方案(如果您不再購買的話),並且對開發人員非常友好:Firebase提供了CLI界面工具,易於部署的過程以及一鍵式回滾

為什麼要使用Firebase託管?

Firebase是部署靜態網站和單頁應用程序的不錯選擇。

我之所以喜歡使用Firebase Hosting,主要是因為我測試了許多不同的提供商,並且Firebase提供了驚人的速度遍及各大洲,而無需在頂部放置單獨的CDN,因為CDN是內置的免費。

同樣,擁有自己的VPS也是一個很好的選擇,我不想管理自己的服務器僅僅對於一個簡單的網站,我更喜歡關注內容而不是操作,就像我在Heroku上部署應用程序一樣。

Firebase比Heroku更加容易設置。

安裝Firebase CLI工具

使用以下命令安裝Firebase CLInpm

npm install -g firebase-tools

or

yarn global add firebase-tools

and authenticate with the Google account (I assume you already have a Google account) by running

firebase login

Create a project on Firebase

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

A new project on Firebase

Now back to the console, from the site you’re working on, in the root folder, run

firebase init

Firebase initialized

Choose “Hosting” by pressing space, then enter to go on.

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

Choose firebase project

Choose “create a new project”.

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

Reply “No” to the Configure as a single-page app (rewrite all urls to /index.html)? question, and also reply “No” to File public/index.html already exists. Overwrite? to avoid Firebase to add its own default index.html file.

You’re good to go:

Project created

Configure the site

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

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.

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

A clean firebase.json file contains the following:

{
  "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.

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

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*[email protected](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 all assets are cached for more than 1 week.

Publish the site

When you are ready to publish the site, you just run

firebase deploy

and Firebase takes care of everything.

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

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:

Setup a custom domain

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.

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.

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

Connect a domain

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

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


More services tutorials: