آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین

قطعا کسانی که در بحث فرانت اند مشغول به کار هستند ، برای گرفتن دمو و نمونه از پروژه های Next  و React  خودشان با مشکلاتی روبرو هستند، زیرا متاسفانه در حال حاظر نمیتوان از گیت هاب دمو آنلاین برای پروژه های Next  و React دریافت کرد.

Vercel یک پلتفرم ابری است که به شما امکان می دهد تا برنامه های وب خود را به سرعت و به آسانی استقرار دهید. Vercel بر روی Next.js، یک چارچوب محبوب React، بنا شده است، اما می توانید از آن برای استقرار هر نوع برنامه وب استاتیک یا پویای دیگری نیز استفاده کنید.

دراین مقاله قصد داریم که نحوه گرفتن دمو آنلاین از پروژه های Next  و React  را آموزش دهیم.

ورسل (vercel) چیست؟

ورسل یک کمپانی امریکایی است که در سال 2015 تاسیس شده و خدمات فضای ابری را ارائه میدهد.

این سایت خدمات رایگان و اشتراکی را ارائه میدهد که ما از خدمات رایگان آن برای گرفتن دمو از پروژه هایمان استفاده میکنیم.

مزایای استفاده از Vercel:

• استقرار سریع و آسان: می توانید برنامه خود را با چند کلیک ساده در Vercel مستقر کنید.
• عملکرد بالا: Vercel برای ارائه عملکرد بالا طراحی شده است.
• مقیاس بندی: Vercel به راحتی می تواند با برنامه های بزرگ و پیچیده مقیاس بندی شود.
• امنیت: Vercel از زیرساخت های امن و قابل اعتماد AWS استفاده می کند.
• ویژگی های قدرتمند: Vercel شامل ویژگی های قدرتمندی مانند پیش نمایش، محیط های استقرار، و تجزیه و تحلیل است.

موارد استفاده از Vercel:

• استقرار وب سایت های استاتیک: Vercel برای استقرار وب سایت های استاتیک مانند وب سایت های شخصی، وب سایت های شرکتی و وبلاگ ها ایده آل است.
• استقرار برنامه های وب پویا: Vercel می تواند برای استقرار برنامه های وب پویا مانند برنامه های React، برنامه های Vue.js و برنامه های Svelte استفاده شود.
• استقرار API ها: Vercel می تواند برای استقرار API ها استفاده شود.
• استقرار صفحات وب: Vercel می تواند برای استقرار صفحات وب مانند صفحات فرود و صفحات محصول استفاده شود.

دلیل انتخاب این سایت اتصال راحت به GitHub  برای Manage کردن پروژه ها و رابط کاربری راحت و آسان آن میباشد.

نحوه ساخت اکانت در سایت vercel

• درمرحله اول وارد سایت Vercel.com  میشویم
• بر روی SingUp کلیک میکنید

در مرحله بعد بر روی hobby  کلیک میکنیم و اسم خود را وارد میکنیم:

در مرحله بعد بر رویwith GitHub  Continue کلیک میکنیم:

در این مرحله بعد از اتصال اکانت گیت هاب خود با استفاده از رمز و یا تایید دو مرحله ای وارد محیط زیر میشویم:

نحوه آپلود پروژه ریکت بر روی گیت هاب

• برای آپلود پروژه  reactبر روی گیت هاب که با استفاده ازvite  نصب شده است در ابتدا لازم است که با استفاده از دستور yarn dev  درCMD وارد محیطDevelop   شوید.

با اجرای دستور yarn run build و موفیقت امیز بودن کار (مانند عکس زیر) یک پوشه به نام dist ساخته شده خروجی پروژه ما میباشد.

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

نحوه گرفتن دمو از پروژه در سایت vercel

• وارد پنل کاربری خود در سایت vercel  شوید
• بر روی گزینه  (Add a repo from your Github) Import Project کلیک کنید.

بر روی ریپازیتوری اپلود شده کلیک کنید ( من برای مثال پروژه ی اسنپ خود را انتخاب میکنم)

دراین مرحله بر روی Name  کلیک کرده  و اسم پروژه خود را وارد میکنیم و در مرحله بعد بدون انجام تغییری در تنظیمات بر روی deploy  کلیک میکنید.

در این مرحله بر روی عکس پروژه خود کلیک میکنید:

• در صفحه باز شده شما پروژه خود را بر روی فضای ابری vercel  مشاهده میکنید
• برای استفاده از این فضای ابری بر روی قسمت url  سایت کلیک کرده و آن را کپی کرده و برای دمو های گیت هاب خود استفاده کنید.

حالا میتوانید با استفاده از روش بالا برای پروژه های خود دمو ساخته و ان را استفاده کنید.

این مقاله توسط دانشجوی دوره چهاردهم، عرشیا فرخی نوشته شده است و ویدیو آموزشی آن هم توسط خانم پرستو عسگری، از بچه های دوره چهاردهم تهیه شده است.

امیدواریم از این مقاله ساخت آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.