اشتراک گذاری لوکال هاست

صورت مسئله:
پروژه هنوز به مرحله‌ای نرسیده که بشه ازش بیلد گرفت و روی سرور دیپلوی کرد اما نیاز هست کاربر که میتونه مدیر، طراح رابط کاربری، کارفرما و... باشه از روی سیستم خودش به محصول در حال دولوپ دسترسی پیدا کنه و بتونه باهاش کار کنه

اینکه بشه قبل از بیلد گرفتن پروژه اون با دیگران به اشتراک گذاشت موردی هست که میتونه در زمان و انرژی تیم صرفه جویی کنه و به افراد اون سمت میز درک بهتری از پروژه بده، پس بریم سراغ راه حل‌‌ها ⛷️

• اشتراک گذاری آی پی آدرس؛

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

خوب شما به عنوان میزبان برای پیدا کردن آی پی آدرس خودتون میتونید بعد از وصل شدن به شبکه‎‌ای که با بقیه هماهنگ کردید داخل ترمینال بزنید ipconfig و برای شماره پورت هم (که معمولا 3000 یا 5000 یا 80) باید به اعداد انتهای لوکال هاستتون نگاه کنید مثلا http://localhost:3000 که یعنی پورت 3000 است.

حالا اون ور مهمان ها باید بعد از وارد کردن آدرس آی پی شما بزنن 3000: تا براشون لوکال هاست شما بالا بیاد ?

تجربه خود من که منجر به شکست شد ? و امیدوارم برای شما هم زیاد منجر به موفقیت نشه چون تو این روش احتمال بروز مشکلات امنیتی وجود داره و زیاد توصیه نمیشه ازش استفاده کنید

• برنامه ngrok؛

یک برنامه کوچک اما باحال که شعارش "وقت بیشتری را صرف برنامه نویسی کنید" هست و می تونید از اینجا دانلود کنیدش،از برنامه میتونید حتی بدون ثبت نام در وبسایت‌اش به راحتی با زدن یک خط استفاده کنید اما من ثبت نام می‌کنم تا ببینم چه چیزهایی داره ?

بعد از ثبت نام از طریق دستور ****** ngrok authtoken توکن خودن در برنامه ذخیره کنید تا بتونید از داشبوردی که در وبسایت براتون باز شده استفاده کنید، حالا بریم سراغ چیزی که اصلا این برنامه رو به خاطرش دانلود کردیم.

اول پروژه با هر ابزاری که باهاش کار میکنید اجرا کنید، اینجا من با vs code کار میکنم و پروژه هم ری اکت هست پس داخل ترمینال دستور yarn start وارد میکنم و پروژه برام روی پورت 3000 اجرا میشه، اگر هم خواستید پورت رو تغییر بدید میتونید برید داخل package.json و scripts و بعد مقدار start برابر با set PORT=**** && react-scripts start بذارید که به جای ستاره پورتی که دوست دارید وارد میکنید.

حالا برنامه ngrok باز میکنیم و طبق راهنما دستور ngrok http 3000 وارد میکنیم، دیگه لازم نیست که اینجا بگم مقدار 3000 از کجا آوردم ?

خوب همین جور که می‌بینید دوتا لینک با پروتکل‌های http و https برام ساخته، دستش درد نکنه حالا نوبت من هست که یکی از این لینک‌ها رو برای مهمان‌های لوکال هاستم ارسال کنم ?

خوش آمدید به لوکال هاست من ? الان مهمان‌ها از هر جایی با هر سیستمی که بتونه به اینترنت وصل بشه به لوکال هاست و طبعا به پروژه دسترسی دارن و میتونن آب و هوای شهر خودشون بررسی کنن، اما یه سوال من از کجا بدونم چه کسایی و چه مقدار به لوکال هاست من دسترسی دارن؟؟ ?

بالاتر گفتم که داخل ngrok ثبت نام کردم تا ببینم چه چیزهایی ارائه میده اما اکثر مواردی که داخل داشبورد بود هنوز تو نسخه بتا هست و برای استفاده باید درخواست ارسال کنید تا براتون کلید ارسال کنن و خوب بقیه موارد مثل اینکه بتونید ساب دامین داشته باشید و... جز پلن‌های پولی حساب میشه اما داخل خود برنامه تعداد درخواست‌هایی که به لوکال هاستتون زده میشه به همراه وضعیت آنها رو بهتون نشون میده.

• پکیج localtunnel؛

این پکیج رو می‌تونید با دستور npm install -g localtunnel در ترمینال به صورت سراسری روی سیستم خودتون یا با دستور yarn add localtunnel فقط روی پروژه مورد نظرتون نصب کنید و لینک گیت هابش هم این هست.

بعد از اجرا کردن پروژه داخل ترمینال با یه خط کد لوکال هاست شما آنلاین میشه ?

lt --port **** --subdomain ****

قسمت پورت که همون پورت لوکال هاست شما هست و قسمت ساب دامین هم (همونی که ngrok تو پلن پولی قرار داده بود ?) اختیاری هست و میتونه مثلا نام شرکت یا خود شما باشه یا میتونید نذارید و به صورت رندرم آدرس ساخته بشه و ادامه داستان هم مثل قبل هست که لینک ساخته شده برای مهمان ها ارسال میکنید و محدودیتی در تعداد و محل قرارگیری آنها نداره.