Как начать с хостинга Firebase

Firebase - это облачный сервис Google, четко сформулированный продукт, в основном ориентированный на мобильные приложения. Хостинг Firebase - лишь небольшая его часть.

Введение в Firebase

Firebase - это платформа для разработки мобильных и веб-приложений, разработанная Firebase, Inc. в 2011 году и приобретенная Google в 2014 году.

Итак, теперь Firebase - это облачный сервис Google, и не только это - это флагманский продукт их облачного предложения.

Firebase - это сложный и четко сформулированный продукт, ориентированный в основном на мобильные приложения.

Однако одной из его особенностей является расширенный сервис веб-хостинга.

Возможности хостинга Firebase

Firebase Hosting предоставляет хостинг для статических веб-сайтов, таких как те, которые вы можете создать с помощью генераторов статических сайтов, или даже сайтов, созданных с помощью серверных платформ CMS, из которых вы создаете статическую копию веб-сайта.

Вы можете разместить что угодно, если только это не динамично. Например, блог WordPress почти всегда является хорошим кандидатом на роль статического сайта, если вы используете комментарии Disqus или Facebook.

Firebase Hosting доставляет файлы через FastlyCDN, использует HTTPS и предоставляет автоматический сертификат SSL с поддержкой личного домена.

Егобесплатный уровень щедрый, с дешевыми планами, если вы перерастете его, и очень удобен для разработчиков: Firebase предоставляет инструмент интерфейса командной строки, простой процесс развертывания и откат в один клик

Почему вам следует использовать хостинг Firebase?

Firebase может быть хорошим выбором для развертывания статических веб-сайтов и одностраничных приложений.

Мне нравится использовать хостинг Firebase в основном потому, что я тестировал множество разных провайдеров, а Firebase предлагаетпотрясающая скоростьна континентах без необходимости в отдельной сети CDN сверху, посколькуCDN встроенбесплатно.

Также, хотя наличие собственного VPS - тоже очень хороший вариант,Я не хочу управлять своим серверомпросто для простого веб-сайта я предпочитаю сосредоточиться на контенте, а не на операциях, как если бы я развертывал приложение на Heroku.

Firebase даже проще настроить, чем Heroku.

Установите инструмент Firebase CLI

Установите Firebase CLI с помощьюnpm:

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: