Hvorfor erfarne utviklere dropper localhost:3000 til fordel for ekte domener

Tenk deg å vise frem en intern app til teamet. Alle imponert. Men spørsmålene handler ikke om koden. "Hvor mye betalte du for domenet?" De tror det er en live-side med ekte hosting.

Sannheten? Alt kjørte lokalt på www.minapp.no. Ikke en krone brukt. Bare et rent domene i stedet for portkaos.

Den moderne fellen med porter

Node.js, React og andre rammeverk ga oss rask oppstart. Kjør npm start, og du er live på port 3000. Superpraktisk. Ingen server-trøbbel.

Men prisen kommer senere. Flere prosjekter? Plutselig jonglerer du 3000, 3001, 8080. Hjernen din blir en portliste. I team blir det verre – hvem husker hva?

Større problem: Lokalt ser det ikke ut som produksjon. Der dukker feilene opp.

Den klassiske metoden som funker alltid

Før bundlet servere tok over, brukte utviklere hosts-fil og reverse proxy. Som Nginx. Dermed fikk du dev.app.no som pekte til lokal port.

Fordelene? Klare URL-er. Bedre oversikt. Team deler lenker uten port-rot. Og miljøet matcher produksjon.

Slik setter du opp egne lokale domener

Trinn 1: Fiks hosts-filen

Hosts-filen er din lokale DNS. Legg til domener her, så peker de til maskinen din.

Finn filen:

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

Bruk sudo eller admin-rettigheter. Legg til:

127.0.0.1 minapp.no
127.0.0.1 dev.minapp.no
127.0.0.1 staging.minapp.no

Nå løser browseren disse lokalt.

Trinn 2: Nginx som reverse proxy

Appen din kjører på 3000. Browser vil ha port 80. Nginx fikser det – lytter på 80 og videresender.

Lag eller endre Nginx-konfig (f.eks. i /etc/nginx/sites-available/). Slik:

server {
    listen 80;
    server_name minapp.no;

    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.minapp.no;

    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 staging.minapp.no;

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

Restart Nginx:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Åpne minapp.no. Du er på localhost:3000 via ekte domene.

Tips for WSL2

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

wsl hostname -I

Bruk den IP-en i Windows hosts-fil i stedet for 127.0.0.1.

Hvorfor dette endrer spillet

Ser ut som kosmetikk. Er det ikke.

Miljømatch. Proxy i produksjon? Nå har du det lokalt. Feil dukker opp tidlig.

Team-arbeid. "Gå til dev.minapp.no" slår "sjekk port 3000".

Hodeklarhet. Domener som i virkeligheten. Null port-hukommelse.

Proff-følelse. Skiller deg fra hobbykode. Tenker strukturert.

En ferdighet for livet

Denne trikset er gammelt, men gull. Bekvemmelighet taper mot profesjonalitet.

Bruk 20 minutter nå. Bedre workflow hele måneden. Fokus på kode, ikke porter.

Neste gang de spør om localhost: "Fordi jeg jobber som proffer.