Hvorfor erfarne udviklere dropper localhost:3000 til fordel for ægte domæner

Forestil dig at præsentere dit værktøj for kolleger. I stedet for at fokusere på funktionaliteten, spørger de: "Hvor meget kostede det domæne?" De tror, det er en rigtig side med betalt hosting. Sandheden? Alt kører lokalt på www.mitvaerktoj.dk – uden en øre udgivet.

Bekvemmelighedens pris i udvikling

Moderne frameworks som Node.js og Rails har gjort det superenkelt at starte projekter. Kør npm start, og din app lever på port 3000. Ingen besvær med servere.

Men det har en hagepind. Flere projekter betyder flere porte: 3000, 3001, 8080. Du bliver port-jæger i stedet for kodemaskine. På holdet bliver det kaos.

Værre: Dit lokale setup ligner ikke produktionen. Fejl gemmer sig der.

Den klassiske metode, der stadig holder

Tidligere mappede udviklere egne domæner lokalt via hosts-filen og en reverse proxy som Nginx. Det skaber et præcist billede af den live-miljø.

Fordelene? Klare URL'er som dev.mitprojekt.dk eller qa.mitprojekt.dk. Bedre overblik, nemmere samarbejde og et setup, der matcher produktionen.

Sådan opsætter du dine egne lokale domæner trin for trin

Trin 1: Rediger hosts-filen

Hosts-filen er din private DNS. Den siger til din maskine: "Denne domæne peger på localhost."

Placering:

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

Tilføj med admin-rettigheder:

127.0.0.1 mitprojekt.dk
127.0.0.1 dev.mitprojekt.dk
127.0.0.1 qa.mitprojekt.dk

Nu løser browseren disse til din egen maskine.

Trin 2: Nginx som reverse proxy

Din app kører på port 3000, men browseren forventer port 80. Nginx fikser det ved at videresende trafik.

Opret eller rediger en Nginx-konfig (f.eks. i /etc/nginx/sites-available/):

server {
    listen 80;
    server_name mitprojekt.dk;

    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.mitprojekt.dk;

    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.mitprojekt.dk;

    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;
    }
}

Genstart Nginx:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Åbn mitprojekt.dk i browseren. Dit lokale projekt ser professionelt ud.

Ekstra tip: WSL2 på Windows

I WSL2 har Linux sin egen IP. Find den med:

wsl hostname -I

Brug den IP i Windows' hosts-fil i stedet for 127.0.0.1:

172.x.x.x mitprojekt.dk
172.x.x.x dev.mitprojekt.dk

Hvorfor det gør en forskel

Det handler ikke kun om udseende.

Lige miljøer. Dit lokale setup spejler produktionen med reverse proxy. Fejl dukker op tidligt.

Bedre kommunikation. Sig "gå til dev.mitprojekt.dk" i stedet for "port 3000". Mindre fejl, mere pro.

Mental ro. Domæner er intuitive – ligesom i virkeligheden.

Pro-niveau. Det adskiller seriøse udviklere fra dem, der nøjes med localhost.

En investering i din workflow

Denne opsætning er gammel, men glemt i jakten på hurtighed. 20 minutter her sparer timer senere.

Næste gang nogen undrer sig over dit domæne, sig: "Det er pro-udvikling." Din kode bliver bedre af det.