آموزش دیپلوی کردن پروژه طراحی سایت با فریمورک VUE در سایت vercel

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

دیپلوی یا استقرار دادن پروژه چیست؟

deploy یا معادل فارسی آن یعنی استقرار کردن در طراحی سایت به این معنی هست که وقتی میخواهیم سایت رو چه از لحاظ فرانت اند و چه بک اند به نمایش بگذاریم اصطلاحا می‌گوییم پروژه رو دیپلوی کردیم.به عبارت دیگ مستقر کردن پروژه در هاست رو دیپلوی کردن می‌گویند.

پیشنهاد مقاله :

نصب همزمان فریمورک Tailwind ورژن 4 و VueJS با ابزار Vite

معرفی سایت vercel

سایت vercel یک پلتفرم هاستینگ برای استقرار پروژه‌های فرانت اند و همچنین فول‌استک هست، در واقع این پلتفرم به طراحان سایت این امکان رو می‌دهد که پروژهای خود را به سادگی و با سرعت بالا روی سرورهای ابری در اینترنت مستقر کنند.

از ویژگی‌های مهم این سایت می‌توان به:

1. پشتیبانی از فرانت‌اند
2. پشتیبانی از SSR
3. Serverles Function
4. استقرار خودکار از طریق Git hub
5. بهینه سازی CDN
6. SSL  و دامنه اختصاصی

نام برد که این سایت را نسبت به موارد مشابه متمایز کرده است.

آموزش دیپلوی کردن پروژه طراحی سایت در سایت Vercel

برای دیپلوی کردن در سایت VERCEL دو روش وجود دارد:

1. از طریق گیت‌هاب
2. به صورت مستقیم از کامپیوتر و پروژه

در این آموزش من روش دوم یعنی دیپلوی مستقیم از سیستم رایانه شخصی رو به شما آموزش خواهم داد.

خب در ابتدا شما باید وارد سایت vercel  شوید. و سپس وارد صفحه‌ی ثبت نام این سایت شوید.

در این سایت می‌توانید به چند روش ثبت نام کنید:

با اکانت‌های:

1. github
2. gitlab
3. bitbucket
4. email

ساده ترین روش میتونه ایمیل باشه، گرچه اگر اکانت github داشته باشید راحت‌تر ثبت نام ‌می‌کنید.

بعد از اینکه ثبت نام‌ شما تکمیل شد. اگر با نرم افزار VScode برای کدنویسی استفاده می‌کنید، وارد مسیر پروژه خود شوید. و با دستور:

npm run build

پروژه خود رو به حالت build تبدیل کنید.

من این آموزش رو برای vue جلو می‌برم گرچه همه مراحل آموزش برای همه فریمورک‌ها یکی هست بجز یک قسمت که بهش اشاره می‌کنم.

وقتی خروجی گرفتید از پروژه خود، سپس وارد فایل dist می‌شوید یا هر نام فایلی که که خروجی فایل‌هاتون درونش قرار دارد، حالا تو ترمینال vscode فرمان زیر رو که نصب vercel CLI هست رو وارد می‌کنید که vercel  نصب شود:

npm install -g vercel

بعد از اینکه نصب شد نوبت به لاگین کردن از طریق vscode در سایت vercel  هست. که با فرمان زیر این کار رو انجام می‌دهیم.

vercel login

بعد از اینکه دستور بالا رو اجرا کردید از شما ایمیلی که با اون در سایت ثبت نام کردید رو درخواست می‌کند، وقتی ایمیل رو دادید، یک ایمیل  حاوی لینک برای شما ارسال می‌شود، که روی اون کلیک بکنید و کمی صبر کنید تا تایید بشه سپس به صورت خودکار در ترمینال vscode شما نیز این کار انجام خواهد شد.

سپس فرمان زیر رو اجرا کنید:

vercel

وقتی فرمان بالا رو اجرا کردید، از شما چند سوال می‌پرسد :

1. Set up and deploy “your-project”? => جواب : Y
2.  Which scope do you want to deploy to ? => حساب کاربری رو باید انتخاب کنیم
3. Link to existing project? => جواب : N
4. What’s your project’s name ? => یک اسم برای پروژه خودمون انتخاب کنیم
5. Which framework are you using? => باید نام فریموک خودتون رو اینجا بنویسید در اینجا من چون از ویو استفاده می‌کنم : vue.js
6. Want to override settings? => جواب : N
7. In which directory is your code located? این رو جا ما باید تو فایل نهایی باشید و فقط دکمه اینتر رو بزنید

خب وقتی همه مواد بالا رو به درستی انجام دادید به شما یک لینک می‌دهد که در واقع لینک پروژه فرانت‌اند یا فول‌استک شماست.

و در واقع پروژه شما مستقر یا همان دیپلوی شده است.

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

ادامه مطلب