استقرار برنامه‌های 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"
},

یکی از بهترین روش‌ها برای تنظیم پویای متغیرهای محیطی بدون نیاز به اجرای مجدد دستور npm run build، استفاده از روش زیر است:

۱. فرض کنید که قصد دارید از یک متغیر به نام API_BASE به‌صورت public (در دسترس در فرانت‌اند) و از یک متغیر به نام API_SECRET به صورت private (در دسترس فقط برای بک‌اند)، استفاده کنید. بنابراین در ابتدا، باید در فایل nuxt.config خود، قطعه کد زیر را قرار دهید:

export default defineNuxtConfig({
          runtimeConfig: {
            apiSecret: '',
            public: {
              apiBase: '', 
            }
          },
        })

به شکل فوق، متغیرهای محیطی در برنامه شناخته می‌شوند.

۲. در ادامه، باید متغیرهای NUXT_PUBLIC_API_BASE و NUXT_API_SECRET را به همراه مقادیرشان، طبق مستندات تنظیم متغیر محیطی، به برنامه خود در لیارا، اضافه کنید.

در NuxtJS، باید قوانین زیر را برای متغیرهای public رعایت کنید:

• متغیرها باید با عبارت NUXT_PUBLIC شروع شوند
• تمامی حروف متغیرها، UPPERCASE (حروف انگلیسی بزرگ) باشند
• در صورتی که متغیر چندکلمه‌ای است، به جای ساختار camelCase، قبل از شروع هر کلمه جدید، علامت _ گذاشته شود

مثال:

apiBase --> NUXT_PUBLIC_API_BASE
myOwnVar --> NUXT_PUBLIC_MY_OWN_VAR
some --> NUXT_PUBLIC_SOME

همچنین، باید قوانین زیر را برای متغیرهای private رعایت کنید:

• متغیرها باید با عبارت NUXT شروع شوند
• تمامی حروف متغیرها، UPPERCASE (حروف انگلیسی بزرگ) باشند
• در صورتی که متغیر چندکلمه‌ای است، به جای ساختار camelCase، قبل از شروع هر کلمه جدید، علامت _ گذاشته شود

مثال:

apiBase --> NUXT_API_BASE
myOwnVar --> NUXT_MY_OWN_VAR
some --> NUXT_SOME

بعد از انجام کارهای فوق، می‌توانید از متغیر محیطی در برنامه خود استفاده کنید و در صورت نیاز، تنها کافیست تا متغیر محیطی را تغییر دهید و دیگر نیازی به build مجدد برنامه، نخواهد بود.