محمد صبائیان
محمد صبائیان
خواندن ۳ دقیقه·۵ سال پیش

چگونه localhost خودمون رو به اشتراک بزاریم؟

فرقی نمیکنه فرانت کار با React, Vue و Angular و .. باشید یا سمت بک و Node,Pyhton و .. در تیم های برنامه نویسی همیشه این اتفاق میوفته که موقع توسعه روی localhost کار میکنیم و بقیه تیم لازمه به سرور لوکال ما request بزنن و داده هارو بررسی و کارایی کد مارو تست کنن، مخصوصا در پروژه هایی که server-side و clinet-side رو افراد مختلفی میزنن و لازمه در لحظه request و response ها با هم چک بشن که اگر ایرادی هست رفع بشه و بعدش روی سرور production بفرستن بالا، یکی از راه های که معمول اینه که ایپی (ip) همو پیدا میکنیم و با دست کاری فایروال و این داستانا به همدیگه وصل میشیم، هرچند هممون میدونیم اینکار اشتباهه و مشکلات امنیتی برامون به وجود میاد و تازه اگر به یک شبکه اینترنت هم وصل نباشیم و ریموت باشیم کار سخت تر میشه و لازم میشه port forwarding هم انجام بدیم، برای رفع این دسته از مشکلات یسری ابزار ها وجود داره که یکی از بهترین هاشون ngrok هست و در این مقاله سعی دارم خیلی ساده باهاش کار کنیم.


برای شروع از طریق این لینک نسخه مربوط به سیستم عامل خودتون رو دانلود و نصب کنید، خوشبختانه ngrok از همه سیستم عامل ها و معماری و توزیع هاشون پشتیبانی میکنه و از این نظر مشکلی نداریم.

برای ویندوز شما به CLI اون دسترسی دارید و میتونید هرکجا که خواستید یک cmd (یا powershell) باز کنید و از ngrok استفاده کنید، برای لینوکس شما حتما باید در پوشه ای که فایل ngrok هست باشید، برای حل این مشکل میتونید آدرس اون رو به alias های خودتون اضافه کنید، برای این کار ترمینال رو باز کنید (ctrl+alt+t) و:

vim .bash_aliases

و در اتهای فایل این خط رو اضافه کنید (لازمه بگم در vim قبلش i رو بزنید؟)

alias ngrok='{$HOME}/Tools/ngrok-stable-linux-amd64/ngrok'

این آدرس محل قرار گرفتن فایل هست که شما باید آدرس فایل خودتون رو جایگزین کنید(از متغیر HOME هم در ابتدای دستور استفاده کردم که اگر در آینده سیستم رو عوض کردم یا اسم کاربریم تغیر کرد این دستور همچنان کار کنه)

ذخیره کنید (:wq) و ترمینال رو ببندین و دوباره باز کنید که تغیرات اعمال بشه (البته میتونید از source .bashrc هم استفاده کنید که نیازی به باز و بسته کردن دوباره نباشه)

فرض من بر اینه که شما vim رو نصب دارید، اگر ندارید میتونید با هر ابزاری که خودتون راحت تر هستید این کار رو انجام بدید و در عمل قطعا فرقی نمیکنه

بعد از نصب یک پروژه ران کنید، مثلا من یک پروژه node رو روی پورت 5000 خودم start کردم، کد های فایل من به این صورت هست:

و با دستور node index.js این فایل رو اجرا میکنم و حالا در localhost:5000/ من میتونیم این نتیجه رو ببینیم:

حالا برای اینکه این آدرس رو در دسترس هرکسی که لازمه قرار بدیم کافیه بنویسیم:

ngrok http 5000

که خروجی زیر بهمون نشون داده میشه:

و اون url بخش forwarding رو میدیم به هرکسی که خواستیم تا به لوکال هاست و پورت 5000 ما وصل بشه، به همین راحتی :)

توجه داشته باشید شما میتونید هر نوع پروژه ای که روی پورتی از لوکال هاست شما بالا قرار داره رو به اشتراک بزارید، از پروژه های Front گرفته تا Back و یا حتی دیتابیس و ...، فقط کافیه دستور لازم رو بنویسید و لینکش رو به بقیه بدین، از این ابزار برای تست ها و نمایش های اولیه به کارفرما هم میتونید استفاده کنید.


نکته اخر ایتوه ngrok یک پکیج از ابزار های متنوع و باحال هست و متاسفانه همه امکاناتش رایگان نیست ، مثلا شما در حالت رایگان نمیتونید چند پورت رو به اشتراک بزارید (یعنی فقط یک پروژه رو میشه فرستاد به بقیه) ولی بنظر من امکانات رایگانش هم کار مارو راه میندازه.

امیدوارم این مقاله کاربردی باشه و وقتتون رو هدر نداده باشم، موفق باشید.

راه های ارتباط با من: تلگرام | توییتر | اینستاگرام

ngroklocalhostدسترسی به لوکال هاست از اینترنتوصل شدن به localhost از بیرون
برنامه نویس، دنبال یادگیری بیشتر، بیشتر و بازم بیشتر! بیشترین راه ارتباطی که چک میکنم mohammad.sabaeian@gmail.com هست :)
شاید از این پست‌ها خوشتان بیاید