در این مقاله نحوه استقرار یک برنامه وب Vue را در کنترل پنل میزبانی وب cPanel خواهید آموخت. این آموزش گام به گام شما را در مورد نحوه استقرار و میزبانی برنامه وب Vue خود راهنمایی می کند.
مرحله 1
یک نسخه از برنامه وب خود ایجاد کنید.
ابتدا npm build را در ترمینال خود که در آن برنامه وب Vue.js را توسعه داده اید اجرا کنید. این دستور یک پوشه dist در ریشه پروژه Vue.js شما ایجاد می کند.
می‌توانید با اجرای npm install -g serve و سپس اجرای serve -s dist پیش‌نمایش ساخت تولید خود را در دستگاه محلی خود مشاهده کنید.
مرحله 2
پوشه dist را فشرده/زیپ کنید.
پوشه dist باید به یک فایل فشرده در دستگاه محلی شما تبدیل شود. این امر امکان آپلود آسان در سی پنل را فراهم می کند.
مرحله 3
پوشه فشرده را آپلود کنید.
وارد حساب cpanel خود شوید و به فایل منیجر بروید و فایل منیجر را باز کنید.
در فایل منیجر یک پوشه جدید در روت اصلی ایجاد کنید، آن را نامگذاری کنید و روی پوشه جدید ایجاد شده کلیک کنید. می توانید از این پوشه برای آپلود تمام پوشه هایی که می خواهید در حساب کاربری خود آپلود کنید استفاده کنید.
فایل فشرده dist zip خود را در پوشه ای که ایجاد کرده اید آپلود کنید.
مرحله 4
محتویات فایل zip dist را استخراج کرده و آنها را به پوشه public_html خود منتقل یا کپی کنید.
با کلیک راست بر روی فایل فشرده فایل ها را استخراج کنید. آنها را در همان پوشه ای که در مرحله بالا ایجاد کردید استخراج کنید.
پوشه اکسترکت شده را باز کرده و روی تب select all کلیک کنید تا تمامی فایل ها انتخاب شوند. روی فایل ها کلیک راست کرده و روی copy کلیک کنید (شما می توانید انتخاب کنید که فایل های انتخاب شده را منتقل کنید).
مسیر را به /public_html (با فرض اینکه برنامه وب برای دامنه اصلی شما است) یا /subdomain.domain.com تغییر دهید فقط در صورتی که یک زیر دامنه از طریق cPanel ایجاد کرده باشید (به جای subdomain.domain.com نام پوشه زیر دامنه را جایگزین کنید. که هنگام ایجاد یک زیر دامنه از طریق کنترل پنل cPanel ایجاد شد.
مرحله 5
فایل پیکربندی وب سایت خود را ویرایش کنید (فایل htaccess.).
اگر از Vue Router در حالت تاریخچه استفاده می کنید، سرور فایل استاتیک ساده از کار می افتد. برای مثال، اگر از Vue Router با مسیری برای /todos/42 استفاده کرده باشید، سرور توسعه دهنده طوری پیکربندی شده است که به localhost:3000/todos/42 به درستی پاسخ دهد، اما یک سرور استاتیک ساده که یک ساخت تولید را ارائه می دهد، با 404 پاسخ می دهد. .
برای رفع این مشکل، باید سرور تولید خود را به صورت بازگشتی به index.html برای هر درخواستی که با فایل ایستا مطابقت ندارد پیکربندی کنید.
ابتدا بررسی کنید که آیا فایل .htaccess را در /public_html دارید یا در پوشه زیر دامنه خود /subdomain.domain.com (فایل .htaccess یک فایل مخفی است، بنابراین مطمئن شوید که گزینه مشاهده فایل های مخفی خود را با استفاده از تنظیمات موجود در سمت راست بالای فایل منیجر را انتخاب کنید).
اگر حتی پس از انتخاب نمایش فایل های مخفی فایل را ندارید، با انتخاب دکمه + File در سمت چپ بالای فایل منیجر، آن را ایجاد کنید و نام فایل را htaccess.
روی فایل .htaccess کلیک کنید و سپس روی ویرایش کلیک کنید:
موارد زیر را به آن اضافه کنید:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
فایل را ذخیره کنید و ویرایشگر را ببندید.
می توانید URL خود را در مرورگر خود وارد کنید تا بررسی کنید که آیا همه چیز درست است یا خیر.
ممنون که تا انتهای این مقاله با ما همراه بودید. تیم پشتیبانی و تیم مشاور فروش ما به صورت آنلاین و تلفنی در خدمت شما هستند تا در صورت نیاز به هرگونه راهنمایی و به منظور رفع چالش های شما اقدامات لازم را انجام دهند.
