پلتفرم Vue

(VueJS Platform)

فهرست عناوین:

ویدیوی آموزشی استقرار با مرورگر
پنج گام استقرار برنامه با مرورگر

ویدیوی آموزشی استقرار با مرورگر

در صورتی که تمایلی به خواندن آموزش متنی ندارید می‌توانید ویدیوی آموزشی زیر ‌را مشاهده کنید.

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

پنج گام استقرار برنامه با مرورگر

توجه داشته باشید؛ تنها برنامه‌هایی که با دو روشVite و یاvue-cliساخته شده باشند، در پلتفرم Vue لیارا قابل اجرا خواهند بود.

گام اول) کافیست به بخش ایجاد برنامه‌ها در لیارا بروید و با انتخاب پلتفرم VUE و نوشتن شناسه برنامه‌ی موردنظرتان و در نهایت انتخاب پلن، برنامه خود را ایجاد کنید. برای نمونه، ما در این آموزش برای برنامه آزمایشی‌مان، شناسه vue-starter را انتخاب کردیم.

گام دوم) داخل فایلpackage.jsonیک فیلد با نامscriptsوجود دارد. شما باید حتما یک اسکریپت در این بخش با نامstartتعریف کنید.

نمونه فایل package.json استفاده شده از vue-cli:

{
  "name": "vue-getting-started",
  "version": "0.1.0",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.3.11"
  }
}

نمونه فایل package.json استفاده شده از Vite:

{
  "name": "vue-getting-started",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.10"
  }
}

بعد از این‌که برنامه‌ی شما آپلود شد، لیارا برای شما دستورnpm startرا اجرا می‌کند. شما باید داخل این اسکریپت، دستوری بنویسید که باعث اجرا شدن برنامه‌ی‌تان شود.(مانند نمونه‌ی بالا)

توجه داشته باشید که اگر اسکریپت build را در فایل package.json خود تعریف کرده باشید، لیارا به‌طور خودکار در فرایند استقرار برنامه‌های Vue دستور npm run build را اجرا می‌کند.

گام سوم) در این گام، بایستی پوشه پروژه خود را حتماً درون یک فایل با فرمت zipقرار دهید؛ سپس فایل zip را کشیده و در مرورگر رها کنید؛ یا می‌توانید بر روی گزینه انتخاب فایل کلیک کرده و فایل zip مد نظر خود را انتخاب کنید.

گام چهارم) پس از اینکه فایل zip پروژه‌تان به صورت کامل در لیارا آپلود شد، به صفحه جدیدی هدایت می‌شوید؛ در این صفحه کافیست تا بخش‌های زیر را نیز بر اساس نیازهای برنامه خود، تنظیم کنید:

تنظیمات پلتفرم: برای تجربه استقرار سریع‌تر، توصیه می‌شود که از mirror اختصاصی لیارا برای نصب پکیج‌های npm استفاده کنید.
تنظیمات build: در این بخش می‌توانید موقعیت build برنامه خود را مشخص کنید.

گام پنجم و پایانی) در نهایت، کافیست که بر روی گزینه شروع عملیات استقرار کلیک کنید تا استقرار برنامه‌تان آغاز شود

برنامه‌ی شما حتما باید دارای فایلpackage.json باشد تا بتواند در لیارا مستقر شود.

لیارا به صورت خودکار پکیج‌هایی که در فایلpackage.jsonلیست شده‌اند را برای شما نصب می‌کند. پس نیازی ندارید که به دنبال اجرای دستورnpm installباشید. از آن‌جایی که اجرای این دستور زمان‌بر است، برای سرعت بیشتر، این دستور را روی سرورهای قدرتمندمان اجرا می‌کنیم تا زمان زیادی را منتظر نمانید.

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

https://vue-starter.liara.run

متوجه شدم، برو گام بعدی!