Comment démarrer avec Firebase Hosting

Firebase est un service Google Cloud, un produit articulé, principalement destiné aux applications mobiles. L'hébergement Firebase en est une petite partie.

Introduction à Firebase

Firebase est une plate-forme de développement d'applications mobiles et Web développée par Firebase, Inc. en 2011, et a été acquise par Google en 2014.

Alors maintenant, Firebase est un service Google Cloud, et pas seulement cela - c'est un produit phare de leur offre Cloud.

Firebase est un produit complexe et articulé, principalement destiné aux applications mobiles.

L'une de ses fonctionnalités est cependant un service d'hébergement Web avancé.

Fonctionnalités d'hébergement Firebase

Firebase Hosting fournit l'hébergement de sites Web statiques, tels que ceux que vous pouvez générer à l'aide de générateurs de sites statiques ou même de sites construits avec des plates-formes CMS côté serveur, à partir desquelles vous générez une copie statique du site Web.

Vous pouvez héberger n'importe quoi tant que ce n'est pas dynamique. Un blog WordPress par exemple est presque toujours un bon candidat pour être un site statique, si vous utilisez des commentaires Disqus ou Facebook.

Firebase Hosting fournit des fichiers via FastlyCDN, en utilisant HTTPS et fournit un certificat SSL automatique, avec prise en charge de domaine personnalisé.

Sonle niveau gratuit est généreux, avec des plans bon marché si vous le dépassez, et est très convivial pour les développeurs: Firebase fournit un outil d'interface CLI, un processus de déploiement facile et des restaurations en un clic

Pourquoi devriez-vous utiliser Firebase Hosting?

Firebase peut être un bon choix pour déployer des sites Web statiques et des applications à page unique.

J'aime utiliser Firebase Hosting principalement parce que j'ai testé de nombreux fournisseurs différents et que Firebase propose unvitesse impressionnanteà travers les continents sans avoir besoin d'un CDN séparé, carle CDN est intégrégratuitement.

Aussi, tout en ayant votre propre VPS est également une très bonne option,Je ne veux pas gérer mon propre serveurjuste pour un simple site Web, je préfère me concentrer sur le contenu plutôt que sur les opérations, un peu comme je déploierais une application sur Heroku.

Firebase est encore plus facile à configurer que Heroku.

Installez l'outil CLI Firebase

Installez la CLI Firebase avecnpm:

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: