{"id":25616,"date":"2021-06-10T20:28:00","date_gmt":"2021-06-10T17:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25616"},"modified":"2021-10-17T20:20:03","modified_gmt":"2021-10-17T17:20:03","slug":"ota-staattinen-verkkosivusto-firebase-hosting-palveluun-ilmaiseksi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/ota-staattinen-verkkosivusto-firebase-hosting-palveluun-ilmaiseksi\/","title":{"rendered":"Ota staattinen verkkosivusto Firebase Hosting -palveluun ilmaiseksi"},"content":{"rendered":"

Firebase-is\u00e4nn\u00f6inti on Googlen tarjoama palvelu, joka is\u00e4nn\u00f6i staattisia ja dynaamisia verkkosivustoja turvallisella tavalla. Se on hienointa ilmaista palvelua kehitt\u00e4jille. Voit n\u00e4ytt\u00e4\u00e4 sivuston suunnittelun, esituotannon version asiakkaalle asentamalla sen Firebase-is\u00e4nt\u00e4\u00e4n.<\/p>\n

K\u00e4ytt\u00e4j\u00e4 voi k\u00e4ytt\u00e4\u00e4 Firebasen ilmaista suunnitelmaa verkkosivuston yll\u00e4pitoon. Ilmainen suunnitelma sis\u00e4lt\u00e4\u00e4 tuen mukautetulle verkkotunnukselle ja SSL: lle, 1 Gt tallennustilaa. 1 Gt: n tallennustila riitt\u00e4\u00e4 pienemmille verkkosivustoille. Saat luettelon kaikista ilmaisten ja premium-pakettien ominaisuuksista tutustumalla niiden hinnoittelusivulle<\/a>.<\/p>\n

Vaikka Firebase-is\u00e4nn\u00f6inti tukee Node.js \/ JavaScript-koodin suorittamista, keskitymme t\u00e4ss\u00e4 artikkelissa vain staattisen verkkosivuston k\u00e4ytt\u00f6\u00f6nottoon. Dynaamisen verkkosivuston k\u00e4ytt\u00f6\u00f6notosta Firebasessa kirjoitan uuden artikkelin tulevaisuudessa.<\/p>\n

P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n

Aloittamiseksi sinun on oltava asennettuna Node.js j\u00e4rjestelm\u00e4\u00e4si. Voit saada Node.js-paketin asennettavaksi heid\u00e4n virallisilta verkkosivustoilta<\/a>.<\/p>\n

Kun Node.js on asennettu j\u00e4rjestelm\u00e4\u00e4n, siirry Firebase-konsoliin<\/a> ja luo projekti napsauttamalla Lis\u00e4\u00e4 projekti -ruutua. T\u00e4yt\u00e4 kaikki tiedot kehotusten mukaisesti.<\/p>\n

Kun luot Firebase-projektin, sinut ohjataan sitten projektin hallintapaneeliin. Napsauta vasemmassa sivupalkissa ’Hosting’ ja sitten ’Aloita’. Se avaa sivun, josta l\u00f6yd\u00e4t asennusohjeet. K\u00e4ymme t\u00e4m\u00e4n l\u00e4pi opetusohjelman seuraavassa osassa.<\/p>\n

Ota staattinen verkkosivusto k\u00e4ytt\u00f6\u00f6n Firebase Hostingissa<\/h3>\n

Kun olemme luoneet projektin Firebaseen muutaman komennon avulla, voimme ottaa staattisen verkkosivuston k\u00e4ytt\u00f6\u00f6n Firebase-is\u00e4nn\u00f6inniss\u00e4. Se edellytt\u00e4\u00e4, ett\u00e4 asennat ensin Firebase CLI: n ja m\u00e4\u00e4rit\u00e4t sen sitten paikallisesti.<\/p>\n

Asenna Firebase CLI<\/h4>\n

Asennusta varten sinun on ensin asennettava Firebase CLI. Olet asentanut Node.js: n, joten k\u00e4yt\u00e4 CLP: t\u00e4 npm: ll\u00e4. Avaa p\u00e4\u00e4te ja asenna Firebase CLI k\u00e4ytt\u00e4m\u00e4ll\u00e4 npm: t\u00e4 seuraavasti:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Huomaa, ett\u00e4 asennamme Firebase-ty\u00f6kaluja maailmanlaajuisesti -g<\/code>. N\u00e4in voit suorittaa Firebase-komennot mist\u00e4 tahansa koneen hakemistosta. Suorita seuraava komento terminaalista:<\/p>\n
firebase login<\/code><\/pre>\n
Se voi ohjata sinut Google-tilin kirjautumissivulle. Seuraa vain ehdotettuja ohjeita. Se on vain Firebasen valtuutusprosessi, joten projekti otetaan k\u00e4ytt\u00f6\u00f6n vain tilill\u00e4si.<\/p>\n
Alusta ja ota k\u00e4ytt\u00f6\u00f6n<\/h4>\n
Kun olet valtuuttanut Google-tilisi Firebase CLI: ll\u00e4, sinun on alustettava Firebase projektin juurihakemistossa. Suorita t\u00e4t\u00e4 varten alla oleva komento projektin juurihakemistossa.<\/p>\n
firebase init<\/code><\/pre>\n
Suoritettaessa yll\u00e4 olevaa komentoa CLI pyyt\u00e4\u00e4 eri vaihtoehtoa. Valitse ’Hosting’ -vaihtoehto siirtym\u00e4ll\u00e4 nuolella ja painamalla v\u00e4lily\u00f6nti\u00e4. Paina Enter, kun olet valinnut ’Hosting’ -vaihtoehdon.<\/p>\n
\"Ota<\/a><\/p>\n
Valitse seuraavaksi luomasi projekti Firebase-konsolista. Napsauta Enter-n\u00e4pp\u00e4int\u00e4. Seuraava kysymys olisi Mit\u00e4 haluat k\u00e4ytt\u00e4\u00e4 julkisena hakemistona? (julkinen). Ei tarvitse tehd\u00e4 mit\u00e4\u00e4n t\u00e4\u00e4ll\u00e4. Napsauta vain Enter-n\u00e4pp\u00e4int\u00e4.<\/p>\n
Seuraava kysymys M\u00e4\u00e4rit\u00e4 yksisivuisena sovelluksena (kirjoita kaikki URL-osoitteet uudelleen tiedostoon \/index.html)? (y \/ N), paina N ja paina Enter, koska emme ole yhden sivun sovellus.<\/p>\n
T\u00e4m\u00e4n komennon j\u00e4lkeen n\u00e4et pari juurihakemistoon luotua tiedostoa public<\/code>kansion kanssa. T\u00e4m\u00e4 public<\/code>hakemisto toimii p\u00e4\u00e4k\u00e4ytt\u00e4j\u00e4n\u00e4. T\u00e4ss\u00e4 public<\/code>hakemistossa sinun on pidett\u00e4v\u00e4 projektitiedostosi.<\/p>\n
Luodaan nyt staattiset HTML-sivut. Koska t\u00e4m\u00e4 opetusohjelma on tarkoitettu vain demotarkoituksiin, luon HTML-perussivuja.<\/p>\n
public \/ index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ about.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ style.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
N\u00e4m\u00e4 ovat staattisia sivujamme, jotka aiomme ottaa k\u00e4ytt\u00f6\u00f6n Firebase-is\u00e4nn\u00f6inniss\u00e4.<\/p>\n
Jos haluat testata projektia paikallisesti ennen k\u00e4ytt\u00f6\u00f6nottoa, suorita serve-komento seuraavasti:<\/p>\n
firebase serve<\/code><\/pre>\n
Se k\u00e4ynnist\u00e4\u00e4 paikallisen palvelimesi osoitteesta http: \/\/ localhost: 5000<\/a>. Testaa projektisi ja jos kaikki on kunnossa, ota se k\u00e4ytt\u00f6\u00f6n komennolla:<\/p>\n
firebase deploy<\/code><\/pre>\n
Kun k\u00e4ytt\u00f6\u00f6notto on valmis, sinun pit\u00e4isi n\u00e4hd\u00e4 is\u00e4nn\u00f6innin URL-osoite konsolissa.<\/p>\n
\"Ota<\/a><\/p>\n
Suorita hosting-URL selaimessa ja sinun pit\u00e4isi n\u00e4hd\u00e4 verkkosivustosi k\u00e4ytt\u00f6\u00f6notto onnistuneesti. Huomaa, ett\u00e4 voit ottaa projektisi k\u00e4ytt\u00f6\u00f6n niin monta kertaa. Suorita muutosten j\u00e4lkeen vain asennus-komento ja sivustosi otetaan k\u00e4ytt\u00f6\u00f6n uuden version kanssa.<\/p>\n
Palauta versiosi<\/h3>\n
Firebase yll\u00e4pit\u00e4\u00e4 kaikkien k\u00e4ytt\u00f6\u00f6nottoversioiden historiaa. Voit jopa palata takaisin vanhempaan versioon. Siirry Firebase Hosting -sivulle, josta l\u00f6yd\u00e4t palautusvaihtoehdon (olettaen, ett\u00e4 olet ottanut k\u00e4ytt\u00f6\u00f6n useita versioita).<\/p>\n
\"Ota<\/a><\/p>\n
Palauttamalla versiot, voit vaihtaa verkkosivustosi jokaisen version v\u00e4lill\u00e4 suoraan. Se on yksinkertainen ja hy\u00f6dyllinen suunnittelu- ja kehitysvaiheessa.<\/p>\n
Toivon, ett\u00e4 sait tiet\u00e4\u00e4 Firebase-is\u00e4nn\u00e4n k\u00e4ytt\u00f6\u00f6nottoprosessin perusteista. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n