{"id":29389,"date":"2021-06-10T20:27:00","date_gmt":"2021-06-10T17:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29389"},"modified":"2021-10-17T04:18:53","modified_gmt":"2021-10-17T01:18:53","slug":"distribuera-statisk-webbplats-pa-firebase-hosting-gratis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/distribuera-statisk-webbplats-pa-firebase-hosting-gratis\/","title":{"rendered":"Distribuera statisk webbplats p\u00e5 Firebase Hosting gratis"},"content":{"rendered":"

Firebase-hosting \u00e4r en tj\u00e4nst som erbjuds av Google som \u00e4r v\u00e4rd f\u00f6r statiska och dynamiska webbplatser p\u00e5 ett s\u00e4kert s\u00e4tt. Det \u00e4r den b\u00e4sta kostnadsfria tj\u00e4nsten f\u00f6r utvecklare. Du kan visa en webbdesign, en f\u00f6rproduktionsversion av en webbplats till klienten genom att distribuera den p\u00e5 Firebase-v\u00e4rd.<\/p>\n

En anv\u00e4ndare kan anv\u00e4nda den kostnadsfria planen f\u00f6r Firebase f\u00f6r att vara v\u00e4rd f\u00f6r en webbplats. Den kostnadsfria planen inkluderar st\u00f6d f\u00f6r anpassad dom\u00e4n och SSL, 1 GB lagring. Lagringsutrymmet p\u00e5 1 GB r\u00e4cker f\u00f6r mindre webbplatser. F\u00f6r att f\u00e5 en lista \u00f6ver alla funktioner som ing\u00e5r i gratis- och premiumplaner, kolla in deras prissida<\/a>.<\/p>\n

\u00c4ven om Firebase-hosting ger st\u00f6d f\u00f6r att k\u00f6ra Node.js \/ JavaScript-kod, fokuserar vi i denna artikel bara p\u00e5 att distribuera den statiska webbplatsen. F\u00f6r att distribuera en dynamisk webbplats p\u00e5 Firebase kommer jag att skriva en annan artikel i framtiden.<\/p>\n

Komma ig\u00e5ng<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du ha Node.js installerat p\u00e5 ditt system. Du kan f\u00e5 Node.js-paketet f\u00f6r installation p\u00e5 deras officiella webbplats<\/a>.<\/p>\n

N\u00e4r du har installerat Node.js p\u00e5 ditt system, g\u00e5 till Firebase-konsolen<\/a> och skapa ett projekt genom att klicka p\u00e5 rutan "L\u00e4gg till projekt". Fyll i all information enligt uppmaningen.<\/p>\n

N\u00e4r du skapar Firebase-projektet omdirigeras du sedan till projektets instrumentpanel. Klicka p\u00e5 ’Hosting’ fr\u00e5n v\u00e4nster sidof\u00e4lt och sedan p\u00e5 ’Kom ig\u00e5ng’. Det \u00f6ppnar en sida d\u00e4r du hittar instruktioner f\u00f6r distribution. Vi kommer att g\u00e5 igenom detta i n\u00e4sta del av handledningen.<\/p>\n

Distribuera statisk webbplats p\u00e5 Firebase Hosting<\/h3>\n

Efter att ha skapat ett projekt p\u00e5 Firebase, med hj\u00e4lp av n\u00e5gra kommandon, kan vi distribuera en statisk webbplats p\u00e5 Firebase-hosting. Det kr\u00e4ver att du f\u00f6rst installerar Firebase CLI och sedan konfigurerar det lokalt.<\/p>\n

Installera Firebase CLI<\/h4>\n

F\u00f6r distribution \u00e4r det f\u00f6rsta du beh\u00f6ver g\u00f6ra installationen av Firebase CLI. Du har installerat Node.js s\u00e5 anv\u00e4nd npm f\u00f6r att installera CLI. \u00d6ppna terminalen och installera Firebase CLI med npm enligt f\u00f6ljande:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Observera att vi installerar Firebase-verktygen globalt med -g<\/code>. P\u00e5 s\u00e5 s\u00e4tt kan du k\u00f6ra Firebase-kommandon fr\u00e5n vilken katalog som helst p\u00e5 din maskin. K\u00f6r nu n\u00e4sta kommando fr\u00e5n terminalen:<\/p>\n
firebase login<\/code><\/pre>\n
Det kan omdirigera dig till inloggningssidan f\u00f6r Google-kontot. F\u00f6lj bara stegen som f\u00f6reslagits. Det \u00e4r bara en auktoriseringsprocess med Firebase s\u00e5 att projektet bara distribueras p\u00e5 ditt konto.<\/p>\n
Initiera och distribuera<\/h4>\n
N\u00e4r du har godk\u00e4nt ditt Google-konto med Firebase CLI m\u00e5ste du initialisera Firebase i projektets rotkatalog. F\u00f6r detta k\u00f6r du kommandot nedan i din projektkatalog.<\/p>\n
firebase init<\/code><\/pre>\n
N\u00e4r du k\u00f6r ovanst\u00e5ende kommando fr\u00e5gar CLI om ett annat alternativ att v\u00e4lja. Du b\u00f6r v\u00e4lja alternativet "Hosting" genom att navigera i en pil och sedan trycka p\u00e5 mellanslagstangenten. Tryck p\u00e5 Enter efter att du har valt alternativet "Hosting".<\/p>\n
\"Distribuera<\/a><\/p>\n
V\u00e4lj sedan det projekt du har skapat i Firebase-konsolen. Tryck p\u00e5 Enter-tangenten. N\u00e4sta fr\u00e5ga skulle vara Vad vill du anv\u00e4nda som din offentliga katalog? (offentlig). Du beh\u00f6ver inte g\u00f6ra n\u00e5gonting h\u00e4r. Tryck bara p\u00e5 Enter-tangenten.<\/p>\n
F\u00f6r n\u00e4sta fr\u00e5ga Konfigurera som en ensidig app (skriv om alla webbadresser till \/index.html)? (y \/ N), tryck p\u00e5 N och tryck p\u00e5 Enter eftersom vi inte \u00e4r en distribuerande ensidig applikation.<\/p>\n
Efter detta kommando ser du ett par filer som skapats i din rotkatalog tillsammans med public<\/code>mappen. Den h\u00e4r public<\/code>katalogen fungerar som en rot f\u00f6r distribution. I den h\u00e4r public<\/code>katalogen m\u00e5ste du beh\u00e5lla dina projektfiler.<\/p>\n
Nu ska vi skapa statiska HTML-sidor. Eftersom den h\u00e4r guiden bara \u00e4r f\u00f6r demo\u00e4ndam\u00e5l skapar jag grundl\u00e4ggande HTML-sidor.<\/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
Det h\u00e4r \u00e4r v\u00e5ra statiska sidor som vi ska distribuera p\u00e5 Firebase-hosting.<\/p>\n
Om du vill testa projektet lokalt f\u00f6re distribution k\u00f6r du kommandot serve enligt f\u00f6ljande:<\/p>\n
firebase serve<\/code><\/pre>\n
Den startar din lokala server p\u00e5 http: \/\/ localhost: 5000<\/a>. Testa ditt projekt och om allt \u00e4r bra, distribuera det med kommandot:<\/p>\n
firebase deploy<\/code><\/pre>\n
N\u00e4r installationen \u00e4r klar b\u00f6r du se webbadressen f\u00f6r webbhotell i konsolen.<\/p>\n
\"Distribuera<\/a><\/p>\n
K\u00f6r webbadressen f\u00f6r webbhotell i webbl\u00e4saren och du b\u00f6r se att din webbplats har distribuerats framg\u00e5ngsrikt. Observera att du kan distribuera ditt projekt s\u00e5 m\u00e5nga g\u00e5nger. Efter dina \u00e4ndringar k\u00f6r du bara kommandot f\u00f6r distribution och din webbplats kommer att distribueras med den nya versionen.<\/p>\n
\u00c5terst\u00e4ll din version<\/h3>\n
Firebase har en historik \u00f6ver alla dina distributionsversioner. Du kan till och med rulla tillbaka till den \u00e4ldre versionen. G\u00e5 till sidan Firebase Hosting d\u00e4r du hittar ett \u00e5terst\u00e4llningsalternativ (f\u00f6rutsatt att du har distribuerat mer \u00e4n en version).<\/p>\n
\"Distribuera<\/a><\/p>\n
Genom att g\u00f6ra en \u00e5terg\u00e5ng till versionerna kan du v\u00e4xla mellan varje version av din webbplats direkt. Det \u00e4r enkelt och anv\u00e4ndbart under design- och utvecklingsstadiet.<\/p>\n
Jag hoppas att du l\u00e4r k\u00e4nna grunderna om distributionsprocessen f\u00f6r Firebase-hosting. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n