Proč profíci opouštějí localhost:3000 a sahají po skutečných doménách

Minule jsem ukázal kolegům svůj lokální nástroj. Reakce byla rychlá. Nikoho nezajímal kód. Všichni se ptali na doménu. Kolik to stálo? Mysleli si, že jsem ji koupil jen na demo. Nebo že mají speciální přístup.

Realita? Nic jsem neplatil. Běželo to na mém stroji. Jen pod www.nastroj.cz místo localhost:3002.

Paradox dnešního vývoje

Díky Node.js nebo Rails máme vestavěné servery. Stačí npm start a jsi online na portu 3000. Žádné nastavování. Žádný hosting.

Pohodlné? Jasně. Ale má to háček.

Přepínáš mezi projekty na portech 3000, 3001, 8080. Mozek ti slouží jako mapa portů. Zapomínáš na kód. V týmu? Chaos.

Největší problém: tvůj lokální setup se vůbec nepodobá production. A tam se bugs schovávají.

Starý trik, který funguje dodnes

Dříve vývojáři mapovali domény lokálně přes hosts soubor. Ne kvůli vzhledu. Aby měli production-like prostředí na svém PC.

Dnes to děláš s hosts + reverse proxy jako Nginx. Takto poběží více projektů pod čistými doménami: dev.projekt.cz, qa.projekt.cz. Vše směřuje na různé porty.

Výhody? Profi URL, jasná hlava, lepší týmová práce. A setup jako v produkci.

Jak nastavit lokální domény krok za krokem

Krok 1: Uprav hosts soubor

Hosts soubor je tvůj osobní DNS. Říkáš počítači: "Tuto doménu řeš lokálně, ne na netu."

Kde ho najdeš:

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

Otevři s admin právy. Přidej:

127.0.0.1 mujprojekt.cz
127.0.0.1 dev.mujprojekt.cz
127.0.0.1 qa.mujprojekt.cz

Teď browser tyto domény pošle na tvůj stroj.

Krok 2: Nginx jako reverse proxy

Browser volá port 80. Tvůj app jede na 3000. Neshoduje se, tak to nefunguje.

Nginx poslouchá na 80 a přesměruje. Vytvoř config (např. v /etc/nginx/sites-available/):

server {
    listen 80;
    server_name mujprojekt.cz;

    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.mujprojekt.cz;

    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.mujprojekt.cz;

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

Restartuj Nginx:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Hotovo. Otevři mujprojekt.cz a jedeš na localhost:3000 pod doménou.

Tip pro WSL2

V WSL2 má Linux vlastní IP. Získej ho:

wsl hostname -I

Vypíše třeba 172.x.x.x. Použij to v Windows hosts místo 127.0.0.1:

172.x.x.x mujprojekt.cz
172.x.x.x dev.mujprojekt.cz

Proč to má smysl

Není to jen kosmetika.

Shoda prostředí. Lokálně máš reverse proxy jako v produkci. Bugs se objeví hned.

Týmová komunikace. Místo "port 3000" řekneš "dev.nastroj.cz". Jednodušší, bez chyb.

Mentální pohodlí. Žádné pamatování portů. Používáš domény jako v reálu.

Profi mindset. Oddělíš se od "rychlých" vývojářů. Myslíš na strukturu workflow.

Technika, která nevyšla z módy

Tenhle setup známe roky. Zapomněli jsme na něj kvůli pohodlí. Ale pohodlí není profismus.

Vem 20 minut na nastavení. Nejlepší investice do tvého workflow. Soustřeď se na kód, ne na porty.

Příště, když se tě zeptají na localhost:3000, odpovíš: "Protože pracuju jako profík.