چگونه با برنامه وب Flutter خود در Vercel مستقر شویم

من به اینجا آمده ام تا این “راهنما” را در مورد نحوه انتشار برنامه وب فلاتر خود در وب سایت بسیار معروف به نام Vercel بیاورم.

من چند گزینه جایگزین در مورد نحوه انجام این کار ارائه کردم و در پایان مرجعی را که الهام بخش من برای نوشتن این مقاله بود را ترک می کنم (به آنجا بروید و برای همکارم کف بزنید، lol).

اول از همه…

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

اکنون به شما نشان خواهم داد که چگونه برنامه وب flutter خود را برای پلتفرم Vercel منتشر کنید.

شاخص

1. در حال آماده کردن برنامه فلاتر خود برای وب.
   • پشتیبانی وب را در پروژه Flutter خود فعال کنید.
     • نسخه وب اپلیکیشن خود را ایجاد کنید.
2. ایجاد یک حساب کاربری در Vercel.
   • به وب سایت Vercel دسترسی داشته باشید.
3. در حال آپلود برنامه شما در GitHub.
   • git را در پروژه خود راه اندازی کنید.
     • همه فایل ها را اضافه کنید و commit اولیه را انجام دهید.
     • برنامه را در GitHub آپلود کنید.
4. اتصال پروژه خود به Vercel
   • مخزن را وصل کنید.
     • گزینه های ساخت را پیکربندی کنید
     • روی deploy کلیک کنید.
5. انتشار به پایان رسید و گزینه ای برای سفارشی کردن پیوند.
   • بررسی کنید که آیا همه چیز خوب است.
     • به روز رسانی خودکار
6. فیم

ما مطمئن خواهیم شد که برنامه شما به درستی برای وب پیکربندی شده است.

پشتیبانی وب را در پروژه flutter خود فعال کنید

به ترمینال بروید (در VSCode من میانبر Ctrl + Shift + ' است) و دستور زیر را تایپ و اجرا کنید:

flutter config --enable-web

نسخه وب اپلیکیشن خود را ایجاد کنید

حال باید فایل های لازم برای استقرار را تولید کنیم. یک بار دیگر در ترمینال تایپ کرده و اجرا کنید:

flutter build web

یک پوشه ایجاد خواهد شد build\web، که پس از کامپایل پروژه شما فایل های لازم را که قبلا ذکر کردم را خواهد داشت.

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

ادامه دارد..

به وب سایت Vercel دسترسی داشته باشید

https://vercel.com/

یک حساب کاربری ایجاد کنید

می توانید با یک حساب GitHub، GitLab یا BitBucket ثبت نام کنید. این ممکن است بعدا مفید باشد.

قبل از استقرار پروژه flutter خود در Vercel، پروژه شما باید بر روی github یا برخی از پلتفرم های ذکر شده در بالا باشد.

من به شما نشان خواهم داد که چگونه در GitHub انجام می شود.

Git را در پروژه خود راه اندازی کنید

ترمینال را در پروژه خود باز کنید و تایپ کنید و اجرا کنید:

git init

همه فایل ها را اضافه کنید و commit اولیه را انجام دهید

پس از اجرای git init، تایپ و اجرا کنید:

git add .
git commit -m " sua mensagem de preferencia"

پروژه را در GitHub آپلود کنید

در نهایت آخرین مرحله برای آپلود برنامه خود در GitHub.

پس از انجام commit اولیه، به مخزن خود بروید و لینک را کپی کنید، برای این مرحله به آن نیاز خواهید داشت.

یک بار دیگر ترمینال پروژه خود را باز کنید و تایپ کنید و اجرا کنید:

git remote add origin https://github.com/seu-usuario/seu-repositorio.git
git push -u origin master

جزئیات مهم: اگر در پلتفرم های دیگر باشد، روند بسیار مشابه است.

خوب، حالا بالاخره می‌توانیم انتشار در Vercel را راه‌اندازی کنیم.

مخزن را وصل کنید

با ورود حساب کاربری خود به Vercel، دکمه را پیدا کنید پروژه جدید، پس از کلیک بر روی دکمه Github را انتخاب کنید و پروژه خود را جستجو کنید، با تایپ نام در نوار جستجو باید آن را به سرعت پیدا کنید.

پیکربندی گزینه های ساخت

در بخش Build & Development Settings، انتخاب Other به عنوان پیش فرض ساختار متأسفانه Flutter یک گزینه پیش فرض در Vercel نیست، بنابراین باید آن را به صورت دستی تنظیم کنید.

لغو تنظیمات پیش فرض:

توجه: برای این کار باید روی کلید کنار هر پیکربندی کلیک کنید تا هر فیلد فعال شود.

دستور ساخت

flutter/bin/flutter build web --release

دایرکتوری خروجی

build/web

Command را نصب کنید

if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web

روی deploy کلیک کنید

وقتی روی دکمه deploy کلیک می کنید، Vercel از این پس تمام کارها را انجام می دهد. این برنامه وب Flutter شما را به صورت خودکار کامپایل و میزبانی می کند و البته ممکن است مدتی طول بکشد.

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

خوب، حالا شما بالاخره انتشار خود را در Vercel کامل کردید. تبریک میگم!! 🎊

بررسی کنید که آیا همه چیز خوب است

برخی از مشکلات ممکن است رخ دهد، اما می توانید به مراحل دیگر برگردید و بررسی کنید که چه اتفاقی ممکن است افتاده باشد.

به روز رسانی خودکار

و فقط برای اینکه بدانید: بزرگترین مزیت استفاده از Vercel این است که به‌روزرسانی‌های آن به صورت خودکار است.

ممنون که به اینجا رسیدی اکنون برنامه وب شما فعال است، مطمئن شوید که آن را از طریق رسانه های اجتماعی، مقالات و تبلیغات شفاهی با جهان به اشتراک بگذارید. شبکه سازی قدرت است!!

اینجا خداحافظی میکنم امیدوارم لذت برده باشید و دفعه بعد ببینمتون <3

کد نویسی مبارک 🚀

مرجع:

نحوه استقرار یک برنامه وب Flutter در Vercel – Leszek W. Król