Miksi ammattikehittäjät hylkäävät localhost:3000:n ja siirtyvät aitoihin domain-nimiin

Viime viikolla esittelin työkavareille uutta sisäistä työkalua. Huomio ei kuitenkaan kohdistunut itse sovellukseen. Kaikki halusivat tietää saman: "Paljonko tuo domain maksoi?" Jotkut luulivat, että ostin sen pelkästään demoon. Toiset epäilivät, että heillä on joku erikoisoikeus IP-osoitteidensa takia.

Totuus oli paljon yksinkertaisempi. En käyttänyt penniäkään. Sovellus pyöri paikallisesti, mutta osoitteessa www.internaltool.com – ei localhost:3002:ssa.

Nykyajan kehitystyön sudenkuoppa

Node.js, Rails ja muut frameworkit toivat mukanaan valmiit web-palvelimet. npm start käynnistää kaiken hetkessä portissa 3000. Ei konffailua, ei palvelimen pystytystä.

Tämä mukavuus maksaa kuitenkin hintansa.

Kun pyörität kolmea tai neljää projektia yhtä aikaa eri porteissa (3000, 3001, 8080, 5173...), päässäsi pyörii porttien muistilista. Koodaaminen unohtuu. Tiimissä homma muuttuu kaaokseksi.

Suurin ongelma on tämä: paikallinen kehitysympäristö ei muistuta tuotantoa. Ja juuri sieltä bugit hiipivät esiin.

Vanha kunnon tapa, joka pitää pintansa

Aiemmin kehittäjät käyttivät paikallisesti omia domaineja. Ne ohjattiin järjestelmän asetuksilla oikeille porteille.

Tämä ei ollut pelkkää kauneutta silmälle. Se loi tuotantoa muistuttavan ympäristön omalle koneelle.

Toteutus on helppo: hosts-tiedosto ja reverse proxy, kuten Nginx. Näin saat useita projekteja pyörimään siisteillä domaineilla – dev.yourproject.com, qa.yourproject.com ja tuotantodomain kaikki paikallisilla porteilla.

Hyödyt? Ammattimaiset URL:t, selkeä pää, parempi tiimityö ja ympäristö, joka vastaa tuotantoa.

Oma paikallinen domain paikalleen: Opas askel askeleelta

Vaihe 1: Muokkaa hosts-tiedostoa

Hosts-tiedosto on kuin oma DNS-palvelimesi. Se ohjaa domainit paikalliselle koneelle ennen nettiin kyselyä.

Etsi tiedosto:

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

Avaa editorilla (tarvitset admin-oikeudet tai sudo). Lisää rivit:

127.0.0.1 myproject.com
127.0.0.1 dev.myproject.com
127.0.0.1 qa.myproject.com

Nyt selain ohjaa nämä kaikki 127.0.0.1:een.

Vaihe 2: Nginx reverse proxy paikalleen

Selain yrittää porttia 80, mutta sovelluksesi pyörii 3000:ssa. Nginx kuuntelee 80:ttä ja ohjaa liikenteen eteenpäin.

Muokkaa Nginx-konffia (yleensä /etc/nginx/sites-available/ Linuxissa). Lisää server-lohkot:

server {
    listen 80;
    server_name myproject.com;

    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.myproject.com;

    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.myproject.com;

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

Käynnistä Nginx uudelleen:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

Valmista. Mene selaimeen: myproject.com lataa localhost:3000:n.

Vinkki WSL2:lle

WSL2:ssä Linuxilla on oma IP. Hae se komennolla:

wsl hostname -I

Käytä tätä IP:tä Windowsin hosts-tiedostossa 127.0.0.1:n sijaan:

172.x.x.x myproject.com
172.x.x.x dev.myproject.com

Miksi tämä on iso juttu

Pinnallisesti tämä on kosmetiikkaa. Todellisuudessa paljon enemmän.

Ensinnäkin ympäristöjen samankaltaisuus. Paikallinen setup vastaa tuotantoa. Reverse proxy -bugit nousevat esiin heti.

Toiseksi tiimiviestintä. "Mene dev.internaltool.com:iin" on selkeämpi kuin "portti 3000".

Kolmanneksi pään selkeys. Unohda portit. Käytä domaineja kuten tuotannossa.

Lopuksi ammattimaisuus. Tämä erottaa sinut satunnaiskoodarista. Se on ajattelua, miten ympäristö rakennetaan.

Taito, joka ei vanhene

Tämä metodi on vanha, mutta mukavuus on syrjäyttänyt sen. Mukavuus ei kuitenkaan ole sama kuin ammattimaisuus tai skaalautuvuus.

Käytä 20 minuuttia tähän setuppiin. Se voi olla paras investointi kehitystyöhösi tällä kuulla. Saat keskittyä olennaiseen: hyvän softan rakentamiseen.

Kun seuraavaksi joku kysyy, miksi et käytä localhost:3000:a, vastaus on valmis. Et tee niin, koska ajattelet kuin ammattilainen.