Varför riktiga domäner slår localhost:3000 bland proffs

Tänk dig att visa upp ett verktyg för kollegorna. Alla imponeras – inte av funktionerna, utan av adressen i adressfältet. "Hur mycket betalade du för den domänen?" undrar de. Svaret? Ingenting. Allt körs lokalt på www.mittverktyg.se, inte på någon tråkig localhost:3001.

Bekvämlighetens baksida

Moderna ramverk som Node.js och Rails har gjort det enkelt. Kör npm start, och din app lever på port 3000. Inga krångliga servrar behövs.

Men det har ett pris. Flera projekt betyder flera portar: 3000, 3001, 8080. Hjärnan fylls av portnummer istället för kod. I team blir det kaos. Värre: din lokala miljö liknar inte produktionen. Där gömmer sig buggarna.

Den klassiska metoden som håller

Förr mappade utvecklare lokala domäner manuellt. Hosts-filen styrde trafiken till rätt portar. Det skapade en exakt kopia av produktionen – hemma på din dator.

Idag gör du samma med hosts-fil och en reverse proxy som Nginx. Resultatet? Rena adresser som dev.projektet.se eller qa.projektet.se. Allt pekar på lokala portar. Fördelarna: proffsig look, klarare tankar, smidigare samarbete och miljö som matchar verkligheten.

Så sätter du upp egna lokala domäner

Steg 1: Redigera hosts-filen

Hosts-filen är din privata DNS. Den styr förfrågningar innan de når nätet.

Hitta filen:

• macOS/Linux: /etc/hosts
• Windows: C:\Windows\System32\Drivers\etc\hosts

Öppna med admin-rättigheter. Lägg till:

127.0.0.1 projektet.se
127.0.0.1 dev.projektet.se
127.0.0.1 qa.projektet.se

Nu löser din webbläsare dessa till localhost.

Steg 2: Nginx som reverse proxy

Din app körs på port 3000, men webbläsaren förväntar sig port 80. Nginx fixar det. Den tar emot på 80 och vidarebefordrar.

Skapa eller editera en Nginx-konfig (t.ex. i /etc/nginx/sites-available/). Lägg till så här:

server {
    listen 80;
    server_name projektet.se;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen 80;
    server_name dev.projektet.se;

    location / {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen 80;
    server_name qa.projektet.se;

    location / {
        proxy_pass http://localhost:3002;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Starta om Nginx:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Öppna projektet.se i webbläsaren. Din localhost:3000 är nu en proffsdomän.

Extra för WSL2-användare

I WSL2 har Linux en egen IP. Hämta den med:

wsl hostname -I

Använd den IP:n i Windows hosts-fil istället för 127.0.0.1:

172.x.x.x projektet.se
172.x.x.x dev.projektet.se

Varför det gör skillnad

Det här är mer än snyggt. Det skapar miljöparity. Din lokala setup matchar produktionens reverse proxy. Buggar dyker upp tidigt.

Teamkommunikation blir enklare. "Kolla dev.projektet.se" slår "port 3000" varje gång.

Mentala fördelar: Inga portnummer att hålla koll på. Bara vanliga domäner.

Och det visar proffsstatus. Du tänker på miljön som en del av koden.

En investering som lönar sig

Tekniken är gammal men glömd. Bekvämlighet vinner ofta – men inte alltid.

Lägg 20 minuter på det här. Din workflow blir skarpare. Fokus hamnar på rätt saker: att bygga grym kod.

Nästa gång någon frågar om localhost:3000, säg sanningen. Du utvecklar som ett proffs.