Nega professional dasturchilar localhost:3000 dan voz kechib, haqiqiy domainlarga o'tmoqda?

O'tgan hafta hamkasblarimga ichki tool ko'rsatdim. Ular tool haqida emas, balki domain haqida so'rashdi: "Bu domain qancha turdi?" Ba'zilariga bu faqat prezentatsiya uchun olingan deb o'yladi.

Haqiqat shuki, men hech qanday pul sarflamadim. Hammasi lokalda ishlagan, faqat www.internaltool.com orqali, localhost:3002 o'rniga.

Zamonaviy dev muammosi

Node.js, Rails kabi frameworklar osonlik berdi. npm start bos, 3000-portda tayyor. Server sozlash shart emas.

Lekin bu osonlikning narxi bor.

Bir necha loyiha ochsangiz, har biri boshqa portda: 3000, 3001, 8080... Qaysi port qaysi loyihaga tegishli, eslab qolish mushkul. Jamoada ishlasangiz, yanada betartib.

Eng muhimi, lokal muhit productionga o'xshamaydi. Buglar shu yerda yashirinadi.

Eski usul, ammo abadiy

Ilgari frameworklar server bilan birga kelmas edi. Dasturchilar hosts file va reverse proxy orqali custom domain ishlatgan.

Bu faqat chiroy emas. Bu productionni lokalda nusxalash.

Nginx kabi proxy bilan dev.yourproject.com, qa.yourproject.com qilib, portlarni bog'lash mumkin. Natija: chiroyli URL, miya toza, jamoa oson ishlaydi, muhit productionga yaqin.

Lokal custom domain qo'yish: To'liq qo'llanma

1-qadam: Hosts file sozla

Hosts file - bu shaxsiy DNS. U internetga chiqmasdan, domainni lokal IPga bog'laydi.

Hosts faylni toping:

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

Admin huquqi bilan oching. Quyidagilarni qo'shing:

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

Endi brauzer bu domainlarni lokal mashinaga yo'naltiradi.

2-qadam: Nginx reverse proxy qiling

Brauzer myproject.com ni 80-portda izlaydi. Appingiz 3000-da. Nginx 80-portda tinglab, 3000-ga yo'naltiradi.

Nginx config faylini oching (/etc/nginx/sites-available/ da). Quyidagi bloklarni qo'shing:

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

Nginxni qayta ishga tushiring:

# macOS
brew services restart nginx

# Linux
sudo systemctl restart nginx

myproject.com ga kiring - localhost:3000 ochiladi.

Pro maslahat: WSL2 uchun

WSL2 da ishlasangiz, Linux IP sini toping:

wsl hostname -I

Natija masalan 172.x.x.x. Windows hosts faylida 127.0.0.1 o'rniga shuni yozing:

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

Nega bu muhim?

Yuzaki ko'rinsa ham, chuqurroq foyda bor.

Birinchidan, muhit tengligi. Lokal production kabi bo'ladi. Proxy buglari lokalda ko'rinadi.

Ikkinchidan, jamoa aloqasi. "3000-portga kir" o'rniga "dev.internaltool.com ga bor". Aniqroq.

Uchinchidan, miya tozaligi. Portlarni eslamaysiz, oddiy domain kabi.

Oxir-oqibat, bu oddiy devdan professionalga ajratadi.

Abadiy skill

Bu usul yillar davom etdi, ammo osonlik uchun unutildi. 20 daqiqa sarflab, dev workflowingizni yaxshilang.

Keyingi safar "nima uchun localhost emas?" desalar, "professional ishlayman" deb javob bering.