دسترسی به LocalHost از دستگاه دیگر: Vite ، Next.js ، React & Express راهنما

دسترسی به localhost (vite ، next.js ، واکنش ، بیان) از دستگاه دیگری در همان شبکه

هنگام تهیه برنامه های وب ، ممکن است لازم باشد آنها را بر روی یک دستگاه تلفن همراه واقعی یا رایانه دیگری که به همان شبکه متصل است ، آزمایش کنید. به طور پیش فرض ، سرورهای توسعه محلی (به عنوان مثال ، vite ، next.js ، React ، Express) به localhost، آنها را فقط در دستگاه خود در دسترس قرار دهید. این راهنما به شما در دسترسی به سرور محلی خود از دستگاه دیگر کمک می کند.

localhost چیست و چگونه کار می کند؟

localhost (127.0.0.1) یک آدرس ویژه است که توسط رایانه شما برای مراجعه به خودش استفاده می شود. وقتی یک سرور توسعه محلی را اجرا می کنید ، به طور معمول به آن متصل می شود localhost، به این معنی که فقط از همان رایانه قابل دسترسی است.

با این حال ، هنگامی که شما نیاز به آزمایش برنامه خود در دستگاه دیگری دارید ، باید سرور خود را در شبکه محلی قرار دهید. این کار با اتصال سرور به 0.0.0.0 (که به معنی “گوش دادن به تمام رابط های شبکه موجود”) و دسترسی به آن از طریق خود آدرس IP محلیبشر

🌍 یافتن آدرس IP محلی خود

برای دسترسی به سرور توسعه خود از دستگاه دیگر ، به آدرس IP محلی خود نیاز دارید. این مراحل را دنبال کنید:

🖥 ویندوز:

1. باز اعلان فرمان (Win + R -> نوع cmd -> Enter را فشار دهید).

2. دستور را اجرا کنید:

   ipconfig
   
   

3. جستجو کردن IPv4 Address تحت اتصال شبکه فعال شما (به عنوان مثال ، 192.168.1.100).

🍎 macOS / Linux:

1. باز پایانهبشر

2. اجرا:

   ifconfig | grep "inet "
   
   

   یا

   ip a
   
   

3. پیدا کردن inet آدرس برای شبکه فعال خود (به عنوان مثال ، 192.168.1.100).

🚀 اجرای یک سرور توسعه در دسترس در دستگاه دیگر

🛠 سریع:

به طور پیش فرض ، Vite به localhostبشر برای افشای آن ، خود را به روز کنید vite.config.js:

// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    port: 5173, // or any available port
  }
};

سپس سرور را شروع کنید:

vite

یا در package.json:

"scripts": {
  "dev": "vite --host"
}

سپس با استفاده از دستگاه دیگری به آن دسترسی پیدا کنید http://YOUR_LOCAL_IP:5173/بشر

⚡ React (ایجاد برنامه React – CRA):

برای دسترسی به سرور CRA:

HOST=0.0.0.0 npm start

یا ، به صورت دستی میزبان را مشخص کنید:

npm start -- --host 0.0.0.0

سپس ، بازدید کنید http://YOUR_LOCAL_IP:3000/بشر

⏭ next.js:

next.js اجازه می دهد تا هنگام شروع سرور میزبان را تنظیم کنید:

next dev -H 0.0.0.0

سپس ، باز http://YOUR_LOCAL_IP:3000/بشر

🏗 Express.js:

هنگام اجرای یک سرور اکسپرس ، آن را به همه رابط ها وصل کنید:

app.listen(3000, '0.0.0.0', () => {
  console.log('Server running at http://YOUR_LOCAL_IP:3000/');
});

🔧 عیب یابی

❌ آیا نمی توانید از دستگاه دیگری به سرور دسترسی پیدا کنید؟

1. تنظیمات فایروال را بررسی کنید – اطمینان حاصل کنید که فایروال سیستم عامل شما امکان اتصالات ورودی را در بندر فراهم می کند.
2. از IP صحیح استفاده کنید -بررسی کنید که از IP محلی خود استفاده می کنید ، نه localhostبشر
3. VPN را غیرفعال کنید – برخی از اتصالات LAN VPN.
4. در دسترس بودن درگاه را تأیید کنید – اطمینان حاصل کنید که بندر توسط روتر شما مسدود نشده است.

🔒 سرور خود را ایمن کنید (در صورت لزوم)

اگر سرور محلی شما در یک شبکه عمومی باز است ، از ابزارهایی مانند استفاده کنید غوغا یا تونل ابری برای افشای ایمن

ngrok http 5173

✅ نتیجه گیری

دسترسی به localhost از دستگاه دیگر هنگامی که سرور توسعه خود را به آن وصل می کنید ساده است 0.0.0.0 و از IP محلی خود استفاده کنید. این امر به ویژه برای آزمایش در دستگاه های واقعی و همکاری با دیگران در همان شبکه مفید است.

🚀 کدگذاری مبارک!

برای اطلاعات بیشتر دنبال کنید