Miért dobják el a profi fejlesztők a localhost:3000-at igazi domain nevekért?

Múltkor mutattam be egy belső eszközt a csapattársaimnak. A tool helyett mindenkinek a domain jött be: "Mennyibe került ez a fancy név?" Sokan azt hitték, külön vettem a demóhoz, vagy whitelisteltem a gépeiket.

Pedig nulla forintba került. Minden helyi gépen futott, csak www.internaltool.hu néven a szokásos localhost:3002 helyett.

A helyi fejlesztés nagy dilemmája

A modern keretrendszerek, mint a Node.js vagy a Rails, beépített szerverekkel kényeztetnek el. Indítsd el npm start-tal, és máris él a 3000-as porton. Nulla konfiguráció, azonnal működik.

De van itt bökkenő.

Ha három-négy projektet futtatsz párhuzamosan – 3000, 3001, 8080, 5173 –, agyalnod kell, melyik port mire való. Csapatban ez kaosz. Ráadásul a helyi környezeted nem hasonlít a productionre. Itt bujdokolnak a bogarak.

A régi módszer, ami sosem ment ki a divatból

Régebben nem volt bundlázott szerver. Fejlesztők custom domaineket használtak helyben, hosts fájllal és reverse proxyval, mint Nginx. Így pontos mása készült a éles rendszernek a gépeden.

Egyszerű trükk: hosts fájl + Nginx. Több projektet futtathatsz dev.projekt.hu, qa.projekt.hu alatt, mind külön porton.

Előny? Profi URL-ek, tiszta agy, könnyű kollab, és production-szerű setup.

Hogyan állítsd be saját helyi domaineket: Teljes útmutató

1. Lépés: Hosts fájl beállítása

A hosts fájl a saját DNS-ed: elsőként itt keres a géped, nem az interneten. Írd bele, hogy projekt.hu = helyi gép.

Hol találod:

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

Szerkeszd admin joggal (sudo), add hozzá:

127.0.0.1 projekt.hu
127.0.0.1 dev.projekt.hu
127.0.0.1 qa.projekt.hu

Ez után a böngésző helyben oldja fel őket.

2. Lépés: Nginx reverse proxy

A böngésző 80-as portot vár (HTTP), a Node app 3000-est. Nginx összekötő: 80-on figyel, továbbítja a portokra.

Írd/szerkeszd az Nginx konfigot (pl. /etc/nginx/sites-available/ Linuxon):

server {
    listen 80;
    server_name projekt.hu;

    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.projekt.hu;

    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.projekt.hu;

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

Indítsd újra:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Lépj be projekt.hu-ra – kész, profi domainen éri el a localhost:3000-at.

Extra tipp: WSL2 esetén

WSL2-ben Windows és Linux IP-je különbözik. Windows hosts fájlba írd a WSL IP-jét:

wsl hostname -I

Pl. 172.x.x.x projekt.hu – így működik.

Miért éri meg igazán

Nem csak szépítás. Mélyebb hatásai vannak.

Első: környezet-egyezőség. Helyi setup = production architektúra (reverse proxyval). Bogarak előjönnek.

Másod: csapatkommunikáció. "Menj a dev.projekt.hu-ra" helyett portos magyarázat.

Harmad: tisztább fej. Domainek mint élesben, nincs portmemóriázás.

Negyed: profi mentalitás. Aki ilyet beállít, nem casual kóder.

Örök klasszikus tudás

Ez a trükk régi motoros, de a gyorsaság miatt háttérbe szorult. Ám profizmus és skálázhatóság ennél többet kíván.

Szánj rá 20 percet – ez a legjobb befektetés a workflow-odba. Így koncentrálhatsz a lényegre: jó szoftverre.

Ha legközelebb rákérdeznek a localhost:3000 hiányára, mondd: mert profin gondolkozol a környezetedről.