استقرار برنامه‌های NuxtJS

(NuxtJS Apps)

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

• استقرار برنامه‌های NuxtJS
• قابلیت Static Site Generation
• رفع خطای CORS

استقرار برنامه‌های NuxtJS

NuxtJS یک فریم‌ورک مبتنی بر Vue است که بسیاری از قابلیت‌ها مانند SSR را برای شما به ارمغان می‌آورد. حال شما می‌توانید برنامه‌های NuxtJS خود را با ایجاد برنامه‌های NodeJS بر روی لیارا دیپلوی کنید.

توجه داشته باشید که برای دیپلوی برنامه‌های Nuxt 2 نیازی به ایجاد تغییر در فایل package.json نیست و لیارا به‌طور کامل از این فریم‌ورک پشتیبانی می‌کند بنابراین تغییری در بخش scripts ایجاد نکنید.

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
},

ولی برای دیپلوی برنامه‌های Nuxt 3 باید در بخش scripts فایل package.json مقدار start را به شکل زیر تغییر دهید:

"scripts": {
    "start": "node .output/server/index.mjs"
},

در نهایت دستورliara deploy --port 3000 --platform nodeرا اجرا کنید تا برنامه‌ی شما به لیارا منتقل شده و اجرا شود.

قابلیت Static Site Generation

Static Site Generation این امکان را فراهم کرده تا شما از برنامه‌های NuxtJS خود، خروجی استاتیک بگیرید و دیگر نیازی به سرور NodeJS نخواهید داشت.

برای گرفتن خروجی استاتیک در برنامه‌های NuxtJS بایستی مقدار target را در فایل nuxt.config.js برابر با static قرار دهید:

export default {
  target: 'static'
}

درنهایت با هر بار اجرای دستور nuxt generate، خروجی استاتیک برنامه‌ی شما اعم از فایل‌های HTML، CSS و JavaScript در مسیر dist قرار خواهد گرفت. همچنین توجه داشته باشید که در این روش تمام درخواست‌های مورد نیاز برای دریافت اطلاعات از APIها در زمان اجرای دستور nuxt generate ارسال شده و اطلاعات دریافت شده نیز در پوشه‌ای با نام static در مسیر dist قرار داده می‌شود.

حال برای استقرار خروجی نهایی در لیارا کافیست که یک برنامه‌ی Static در پنل کاربری خود ایجاد کرده و برنامه‌ی خود را با اجرای دستور liara deploy --path dist بر روی لیارا مستقر کنید.

Proxy کردن درخواست‌ها در برنامه‌های NuxtJS (رفع خطای CORS)

برای رفع خطای CORS در زمان Proxy کردن درخواست‌ها در برنامه‌های NuxtJS باید در قدم اول با اجرای دستور زیر، پکیج nuxtjs/proxy را در پروژه‌ی خود نصب کنید:

npm i @nuxtjs/proxy

در قدم بعد باید nuxtjs/proxy را در بخش modules فایل nuxt.config.js، اضافه کرده و پیکربندی موردنظر را اعمال کنید:

modules: [
  ...,
  '@nuxtjs/proxy'
],

axios: {
  proxy: true
},

proxy: {
  '/api/': {
      target: 'https://api.example.com/',
      pathRewrite: {'^/api/': ''},
      changeOrigin: true
    }
}