در این مقاله
پروژه روی لپ‌تاپ شما اجرا می‌شود؛ بعد از انتشار، رفرش یک صفحه داخلی خطا میدهد یا Nuxt اصلاً بالا نمی‌آید. در دیپلوی vue، پیش از انتخاب هاست مشخص کنید چه چیزی را منتشر می‌کنید: فایل‌های آماده برای مرورگر یا برنامه‌ای که باید روی سرور اجرا بماند. این تفاوت، فرمان ساخت، تنظیمات محیطی و هزینه نگهداری را تعیین میکند. شناخت خروجی پروژه به شما کمک میکند مسیر استقرار را انتخاب کنید و هنگام خطا، سراغ بخشی بروید که شواهد نشان می‌دهند.
پاسخ سریع: خروجی استاتیک دارید یا سرور لازم است؟
برای Vue مبتنی بر Vite، معمولاً خروجی dist را روی وب‌سرور منتشر می‌کنید. خروجی استاتیک Nuxt پیش‌رندرشده در .output/public قرار دارد. هیچ‌کدام برای ارائه فرانت‌اند به اجرای دائمی Node نیاز ندارند. راهنمای Vite، پیش‌رندر Nuxt
اگر Nuxt هنگام درخواست HTML تولید میکند یا API سمت سرور دارد، خروجی سرور را با Node اجرا کنید. آپلود .output/public کافی نیست. ابتدا اسکریپت‌های package.json و تنظیمات nuxt.config.ts را بررسی کنید. حالت‌های رندر Nuxt
برای دیپلوی vue کدام مدل اجرا مناسب است؟
استاتیک‌بودن فایل‌های فرانت‌اند به معنی ثابت‌بودن رابط نیست؛ برنامه می‌تواند در مرورگر از API داده بگیرد. معیار انتخاب، محل و زمان ساخت HTML اولیه است.
|
مدل |
زمان ساخت رابط یا HTML |
خروجی قابل انتشار |
کاربرد مناسب |
|
Vue SPA |
عمدتاً در مرورگر |
معمولاً dist |
پنل و اپلیکیشن متصل به API |
|
Nuxt پیش‌رندرشده |
هنگام Build |
.output/public |
صفحات عمومی با محتوای قابل تولید از قبل |
|
Nuxt با SSR |
هنگام درخواست، با توجه به کش |
کل .output با Runtime سازگار |
HTML وابسته به درخواست و قابلیت‌های سرور |
منابع جدول: مدل‌های رندر Nuxt و خروجی استاندارد Vite.
SSR را صرفاً به‌خاطر عمومی‌بودن سایت انتخاب نکنید. اگر محتوا هنگام Build در دسترس است، پیش‌رندر هم HTML آماده تحویل میدهد. SSR را برای نیاز مشخص به اجرای سرور انتخاب کنید.
Vue با Vite را با خروجی Build منتشر کنید
این نمونه برای پروژه‌ای با npm، فایل package-lock.json و اسکریپت build برابر با vite build است:
npm ci
npm run build
npm ci وابستگی‌ها را مطابق lockfile نصب و پوشه موجود node_modules را جایگزین میکند؛ lockfile را تغییر نمی‌دهد. ناسازگاری آن با package.json نصب را متوقف میکند. مستندات npm
خروجی مورد انتظار، پوشه dist شامل index.html و فایل‌های برنامه است. با تنظیمات پیش‌فرض، Build مجدد خروجی را بازسازی میکند، ولی سایت منتشرشده را تغییر نمی‌دهد. vite preview فقط برای بررسی محلی است. مستندات استقرار Vite
در حالت Historyِ Vue Router، وب‌سرور باید مسیرهای رابط را به index.html برگرداند. نمونه حداقلی در پیکربندی موجود Nginx:
location / {
try_files $uri $uri/ /index.html;
}
این تنظیم، fallback مسیرهای رابط را تغییر میدهد؛ مسیرهای API را جدا مسیریابی کنید. پس از اعمال، صفحه‌ای داخلی را مستقیم باز و رفرش کنید. ذخیره دوباره همین تنظیم، قاعده‌ای اضافه نمی‌کند. راهنمای Vue Router
برای مقایسه با فرانت‌اند دیگر، «دیپلوی اپلیکیشن React روی ابر ایران؛ راهنمای عملی» را ببینید.
Nuxt استاتیک را بسازید و مسیرهای واقعی را آزمایش کنید
در پروژه Nuxt فعلی، اسکریپت زیر را با اسکریپت‌های package.json ادغام کنید؛ کل فایل را جایگزین نکنید:
{
"scripts": {
"generate": "nuxt generate"
}
}
پس از نصب وابستگی‌ها اجرا کنید:
npm run generate
خروجی قابل انتشار .output/public است. اجرای مجدد، صفحات را از روی کد و داده هنگام Build بازتولید میکند. مسیرهای پویا را بررسی کنید؛ crawler لزوماً صفحه‌ای را که کشف نمی‌کند، پیش‌رندر نمی‌کند. مستندات پیش‌رندر Nuxt
صفحه اصلی، یک مسیر پویا و یک آدرس ناموجود را آزمایش کنید. fallback مربوط به Vue SPA را بدون بررسی روی Nuxt کپی نکنید؛ HTML صفحات تولیدشده و وضعیت صفحات ناموجود باید حفظ شود. راهنمای استقرار Nuxt
Nuxt با SSR به خروجی سرور و تنظیمات Runtime نیاز دارد
اگر اسکریپت build برابر nuxt build و خروجی برای Node تنظیم شده است:
npm run build
node .output/server/index.mjs
فرمان اول خروجی را بازسازی میکند؛ دومی سرور را اجرا نگه می‌دارد. برای اجرای مجدد روی همان پورت، پردازش قبلی را متوقف کنید. در Production مقدار NODE_ENV را روی production بگذارید. پورت پیش‌فرض خروجی استاندارد Node برابر 3000 است؛ پورت پلتفرم باید با پورت برنامه مطابقت داشته باشد. مستندات Nuxt
تنظیمات خصوصی و عمومی را جدا تعریف کنید:
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '',
public: {
apiBase: 'https://api.example.com'
}
}
})
مقدار NUXT_API_SECRET را در بخش Secret وارد کنید و برای آدرس عمومی از NUXT_PUBLIC_API_BASE استفاده کنید. مرورگر به بخش public دسترسی دارد. سرور ساخته‌شده Nuxt فایل .env را خودکار نمی‌خواند؛ متغیرها باید به محیط اجرا برسند. راهنمای Runtime Config
در Vue/Vite هم مقادیر VITE_ وارد خروجی مرورگر می‌شوند. قراردادن رمز در تنظیمات Secret پلتفرم، استفاده از آن در کد مرورگر را امن نمی‌کند. متغیرهای محیطی Vite
برای مقایسه با فریم‌ورک دیگری که اجرای سرور دارد، «دیپلوی Next.js روی زیرساخت ابری ایران» را ببینید.
نظرات کاربران (۰)
هنوز نظری ثبت نشده است. اولین نفر باشید.