Localhost för webbutvecklare

Inom webbutveckling spelar localhost en central roll. Det är den plats där dina webbprojekt tar form innan de släpps ut på vilda webben. Men vad är egentligen localhost och hur fungerar det? I detta inlägg kommer vi tillsammans gå igenom de teoretiska grunderna om localhost och besvara några av de frågor som kan uppstå i början.

🤓 Vad är localhost?

Localhost är den lokala adressen till din dator. En referens till sig själv.

När vi pratar om localhost i kontexten av webbutveckling så är localhost adressen till din lokala webbserver, d.v.s. den plats på din dator där du kan utveckla och testa webbplatser och applikationer innan du publicerar dem på en publik webbservern.

Du kan refererar till localhost på två sätt:

som domännamnet localhost
som IP-adressen 127.0.0.1.

Domännamnet används för att det ska vara mer läsbart och användarvänligt för oss människor, medan IP-adressen är den numeriska representationen av samma koncept och används av din dator. Båda alternativen leder i slutändan till samma plats.

🔌 Hur ansluter jag till localhost?

När du skriver http://localhost eller http://127.0.0.1 i adressfältet i din webbläsare så kommer din webbläsare utgå ifrån att det är en hemsida du vill besöka, och som standard ligger hemsidor på port 80. Din webbläsare kommer alltså i bakgrunden lägga på port 80 så att adressen ser ut så här; http://localhost:80.

Men vänta nu, vad är en port?

För att förklara en port kan vi ta ett hus som analogi. Ett hus har minst en ytterdörr, oftast fler. Inne i huset finns olika rum för olika avseenden (kök, toalett, sovrum, vardagsrum etc). Tänk dig att en port är en ytterdörr till huset som leder till ett specifikt rum.

Localhost är adressen till din dator (huset) och port 80 (dörren) talar om var webbservern (vardagsrummet) finns.

Eftersom port 80 är standard när du vill besöka en hemsida så behöver du inte ange den i URL:en i webbläsaren. Men om skulle vilja (eller behöva) lägga din hemsida på en annan port, så skulle du också behöva ange porten i URL:en för att webbläsaren ska veta var den kan hitta din hemsida.

Jag nämner detta eftersom webbservern på din dator ibland kan ligga på en annan port än just 80. T.ex. är port 8888 standard om du sätter upp en webbserver med MAMP. I detta fall skulle du inte hitta din webbserver på adressen http://localhost i webbläsaren. Du skulle istället behöva ange http://localhost:8888.

Kan jag lägga min hemsida på vilket port som helst?

Ja och nej. Det finns vissa portar som är upptagna av andra tjänster men utöver dem så skulle du kunna lägga din hemsida på vilken port som helst. Standard är som sagt port 80. Även port 8888, 8080, 3000 och 5000 är vanligt förekommande.

🧩 Bra att veta: Ovanstående gäller enbart i lokal miljö. På en publik server vill du alltid ha port 80.

Om jag har flera lokala hemsidor, ska jag lägga de på varsin port?

Nja. Porten talar om var själva webbservern ligger (d.v.s. tjänsten som hanterar hemsidor). Webbserver kan i sin tur hantera flera hemsidor samtidigt. Så om du sätter upp t.ex. Apache, Nginx eller IIS så kommer du vilja använda samma port för alla hemsidor.

Det finns dock inget som hindrar dig från att ge varje hemsida sin egna port men då måste du också sätta upp en webbserver på respektive port. Det är samma sak som att du måste installera en TV i varje rum om du vill kunna titta på TV varsomhelst i huset. Oftast är det enklare att bara sätta upp en TV i vardagsrummet och sedan gå dit när du vill titta på tv.

Men det finns, som sagt, inget som hindrar dig från att sätta upp flera webbservar på olika portar. Det kan till och med vara så att du redan har satt upp webbservrar på olika portar utan att vara medveten om det. Om du t.ex. bygger din hemsida med React så kommer du automatiskt få en temporär webbserver när du startar projektet. Du har väl noterat att det står att din hemsida är nåbar på localhost:3000 efter att du har kört npm start? Det betyder att React har startat en webbserver på port 3000 och kopplat ditt webbprojekt dit.

Värt att notera är att du inte kan starta två olika webbservrar på samma port, d.v.s. du kan inte ha två React-projekt igång samtidigt på port 3000. Om du försöker starta två webbservrar på samma port så kommer du få ett felmeddelande som säger något i stil med att porten är upptagen.

Hur hanterar jag flera hemsida på samma webbserver?

Om du har satt upp en lokal webbserver och går till http://localhost i webbläsaren så kommer du bara se enda hemsida. För att hantera flera hemsidor från samma lokala webbserver behöver du sätta upp s.k virtuella värdar (“Virtual hosts” på engelska).

Beroende på vilken webbserver du använder så ser processen olika ut, men rent principiellt så behöver du ange följande saker för varje virtuell värd (hemsida):

document_root – En sökväg till mappen på din dator där hemsidans kod finns.
server_name / domain – Det domännamn som du kommer använda i webbläsaren för att peka referera till en specifik hemsida.

För att din dator sedan ska veta att domänen går att nå på den lokala webbservern, behöver du koppla ihop domänen med IP-adressen till din webbserver. Som nämnt tidigare är IP-adressen till din lokala webbserver alltid 127.0.0.1.

Mappningen gör du i en fil som heter hosts. Beroende på vilket operativsystem du använder så ligger denna fil på olika ställen. På Mac och Linux brukar den finnas under /etc/hosts och på Windows finns den under C:\Windows\System32\drivers\etc\hosts.

Enkelt förklarat är hosts-filen som en liten DNS. För att kunna redigera filen behöver du oftast öppna den som administratör.

Här är ett exempel på hur din hosts-fil skulle kunna se ut när du har lagt in dina egna domäner:

127.0.0.1 localhost
127.0.0.1 min-hemsida.local
127.0.0.1 min-andra-hemsida.local

Varför kan ingen annan se min lokala hemsida?

Som nämnt tidigare är localhost adressen till din dator. Om du skulle skicka URL:en http://localhost (eller http://min-hemsida.local) till någon annan i hopp om att ska se din hemsida, så kommer du bli besviken. Allt de kommer se är sin egna lokala webbserver, inte din hemsida.

Det är samma sak som att utan kontext säga “Boken finns i vardagsrummet”. Personen du säger det till kommer då utgå ifrån sin egna kontext och gå till sitt egna vardagsrum, och där finns inte den bok du refererar till.

För att personen ska veta vilket vardagsrum du menar, behöver du tala om på vilken adress du bor. Adressen i detta fall skulle behöva vara en publik IP-adress och localhost refererar som sagt till en lokal IP-adress (127.0.0.1).

Hur löser jag detta? – Det korta svaret är att du inte gör det. Generellt så vill du inte öppna upp för att vem som helst ute på nätet ska kunna komma åt din lokala webbserver. Det är som att riva ytterväggen till vardagsrummet så att vem som helst på gatan utanför kan se vad du gör - samt ta sig in. Ganska onajs.

Det finns dock sätt som du kan göra din lokala webbserver åtkomligt utifrån men jag skulle inte rekommendera det om du inte vet vad du gör. Istället skulle jag rekommendera att du sätter upp en publik webbserver (t.ex. via ett webbhotell) och laddar upp din hemsida där.

🚀 Kom igång med localhost

Här kommer lite guidning för hur du kommer igång med en lokal utvecklingsmiljö. Jag kan tyvärr inte ge en steg-för-steg guide eftersom det varierar beroende på vilket operativsystem du använder samt vilken typ av utvecklingsmiljö du behöver.

Exempelvis så jobbar jag på en Mac och bygger mina webbprojekt med PHP, Apache/Nginx och MySQL. Du kanske jobbar med .NET på en PC. Eller med Python på Linux.

Om du vill ha ett allt-i-ett-paket och jobbar med PHP, Apache/Nginx och MySQL, så kan du kika på MAMP (Mac, Windows) eller XAMP (Mac, Windows och Linux).
Om du är bekväm med att jobba med terminalen (och jobbar på en Mac) kan du installera Homebrew. Via Homebrew kan du sedan installera Nginx, Apache (nämns som httpd), MySQL och PHP.
Om du snabbt behöver sätta upp en lokal server (och använder PHP) kan du öppna terminalen, gå till mappen för ditt projekt och köra php -S localhost:5000. Om du sedan går till webbläsaren och skriver http://localhost:5000 i adressfältet så kommer du se ditt projekt.
Om du jobbar med .NET i Windows så så kan du kika på webbservern IIS.

Lycka till!