Kuinka aloittaa Firebase Hosting -palvelun käyttö

Haluatko oppia JavaScriptiä? Hanki ilmainen e-kirjani osoitteesta jshandbook.com

Firebase on Firebase, Inc: n vuonna 2011 kehittämä mobiili- ja verkkosovellusten kehitysalusta. Google osti sen vuonna 2014 ja otettiin osaksi Google Cloud -palvelua. Nyt se on Google Cloud -tarjonnan lippulaiva.

Firebase on monimutkainen ja nivelletty tuote, joka on suunnattu pääasiassa mobiilisovelluksiin.

Yksi sen vähemmän tunnetuista ominaisuuksista, joista tässä artikkelissa keskustellaan, on Firebase-edistyksellinen web-hosting-palvelu.

Firebase-hosting-ominaisuudet

Firebase-hosting tarjoaa staattisten verkkosivustojen, kuten

  • sivustoja, joita voit luoda staattisilla sivustogeneraattoreilla
  • sivustoja, jotka on rakennettu palvelinpuolen CMS-alustoilla, joista luot staattisen kopion verkkosivustosta

Voit isännöidä mitä tahansa, kunhan se ei ole dynaamista. Esimerkiksi WordPress-blogi on melkein aina hyvä ehdokas staattiseksi sivustoksi, jos käytät Disqus- tai Facebook-kommentteja.

Firebase Hosting toimittaa tiedostot nopeasti CDN: n kautta käyttämällä HTTPS: ää ja tarjoaa automaattisen SSL-varmenteen mukautetulla verkkotunnuksen tuella.

Sen ilmainen taso on runsas, ja halpoja suunnitelmia on saatavana, jos ylität sen. Se on erittäin kehittäjäystävällinen, tarjoaa CLI-käyttöliittymätyökalun, helpon käyttöönottoprosessin ja yhden napsautuksen palautukset.

Miksi sinun pitäisi käyttää Firebase-hosting-palvelua?

Firebase voi olla hyvä valinta käyttää staattisten verkkosivustojen ja Yhden sivun sovellusten käyttöönottoa.

Haluan käyttää Firebase-hosting-palvelua pääasiassa siksi, että testasin monia eri tarjoajia ja Firebase tarjoaa mahtavaa nopeutta useilla maantieteellisillä alueilla tarvitsematta erillistä CDN-levyä päälle, koska CDN on sisäänrakennettu ilmaiseksi.

Vaikka oman VPS: n omaaminen on erittäin hyvä vaihtoehto, oman palvelimen hallinta yksinkertaisella verkkosivustolla ei yksinkertaisesti ole sen arvoista. Pidän parempana keskittyä sisältöön kuin toimintoihin, aivan kuin asentaisin sovelluksen Herokuun.

Firebase on jopa helpompi asentaa kuin Heroku.

Asenna Firebase CLI -työkalu

Asenna Firebase CLI -sovelluksella

npm asenna -g firebase-työkalut

tai

lanka globaalisti lisää firebase-työkaluja

Todenna Google-tilillä (oletan, että sinulla on jo Google-tili) suorittamalla

firebase kirjautuminen

Luo projekti Firebaseen

Siirry osoitteeseen https://console.firebase.google.com/ ja luo uusi projekti.

Suorita nyt konsolin sisällä työskentelemäsi sivuston juurihakemistossa seuraavat tiedot:

firebase init
firebase init

Paina ”Space” valitaksesi ”Hosting” -vaihtoehdon ja vahvista sitten valinta Enter.

Nyt sinun on valittava projekti, johon haluat ottaa sivuston käyttöön.

Valitse ”luo uusi projekti”.

Nyt voit valita, mikä kansio sisältää sivustosi staattisen version. Esimerkiksi julkinen.

Sinulta kysytään kaksi sovelluksen kokoonpanoa koskevaa kysymystä. Vastaa "ei" molemmille:

  • Määritäkö yhden sivun sovellukseksi (kirjoita kaikki URL-osoitteet uudelleen /index.html)?
  • Tiedosto public / index.html on jo olemassa. Korvataanko?

Tämä estää Firebasea lisäämästä omaa oletusindeksi.html-tiedostoa.

Nyt sinulla on hyvä mennä:

Määritä sivusto

Firebase CLI -sovellus loi firebase.json-tiedoston juurihakemistokansiossa.

Tässä artikkelissa kerron kuinka määrittää yksinkertainen ominaisuus Firebase Hosting -palvelussa lisäämällä pieni määritys firebase.json-tiedostoon.

Haluan asettaa Cache-Control-otsikkadirektiivin kaikille sivuston varoille - kuville, CSS- ja JS-tiedostoille.

Puhdas firebase.json-tiedosto sisältää seuraavat:

{
  "isäntä": {
    "julkinen": "julkinen",
    "jättää huomiotta": [
      "firebase.json", "** /. *",
      "** / node_modules / **"
    ]
  }
}

Se kertoo Firebase-sivustolle, missä sivuston sisältö on ja mitä tiedostoja sen tulisi sivuuttaa. Lisää vapaasti kaikki kansiosi, paitsi julkiset.

Lisäämme sinne uuden ominaisuuden, nimeltään otsikot:

{
  "isäntä": {
    "julkinen": "julkinen",
    "jättää huomiotta": [
      "Firebase.json",
      "** /. *",
      "** / node_modules / **"
    ],
    "otsikot": [
      {
        "lähde": "** / *. @ (jpg | jpeg | gif | png | css | js)",
        "otsikot": [{
          "avain": "välimuistin hallinta",
          "arvo": "korkein ikä = 1000000" // 1 viikko +
        }]
      }
    ]
  }
}

Kuten näette, kerromme, että kaikille tiedostoille, jotka päättyvät jpg | jpeg | gif | png | css | js Firebaseen tulisi soveltaa Cache-Control: max-age = 1000000 -direktiiviä, mikä tarkoittaa, että kaikki varat ovat välimuistissa enemmän kuin 1 viikko.

Julkaise sivusto

Kun olet valmis julkaisemaan sivuston, suorita vain seuraava komento ja Firebase huolehtii kaikesta.

palotietokannan käyttöönotto

Voit nyt avata https://yourproject.firebaseapp.com ja sinun pitäisi nähdä verkkosivusto käynnissä.

Muokattu verkkotunnus

Seuraava looginen vaihe on saada sivustosi käyttämään mukautettua verkkotunnusta.

Siirry osoitteeseen https://console.firebase.google.com/project/_/hosting/main ja napsauta Yhdistä verkkotunnus -painiketta:

Ohjattu toiminto kysyy verkkotunnusta, sitten se tarjoaa TXT-tietueen, joka sinun on lisättävä isäntä-DNS-paneeliin verkkotunnuksen varmentamiseksi.

Jos verkkotunnus on aivan uusi, tämän vaiheen ohittaminen voi viedä jonkin aikaa.

Kun tämä on tehty, käyttöliittymä antaa sinulle kaksi A-tietuetta, jotka voidaan lisätä myös isäntä-DNS-paneeliin.

Jos määrität verkkotunnuksesi.com, älä unohda määrittää myös www.verkkotunnus.com tekemällä siitä uudelleenohjaus.

Nyt sinun on vain odotettava isännöintiäsi DNS-tietueiden päivittämiseen ja DNS-välimuisien tyhjentymiseen.

Muista myös, että SSL-varmenne otetaan käyttöön automaattisesti, mutta sen voimassaoloaika vaatii vähän aikaa.

Haluatko oppia JavaScriptiä? Hanki ilmainen e-kirjani osoitteesta jshandbook.com