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

(NextJS Apps)

NextJS یک فریم‌ورک مبتنی بر React است که امکان پیاده‌سازی وبسایت‌های SSR و SSG را برای شما فراهم می‌کند. حال شما می‌توانید برنامه‌های NextJS خود را با ایجاد برنامه‌های Docker بر روی لیارا مستقر کنید.

در قدم اول، یک فایل با نام Dockerfile در ریشه‌ی برنامه‌‌ی‌تان بسازید و سپس قطعه‌کد زیر را در این فایل قرار دهید:

FROM node:16-alpine AS deps

RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./ 
RUN npm ci

FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

در قدم بعد، قطعه‌کد زیر را به فایل next.config.js اضافه کنید:

module.exports = {
  // ... rest of the configuration.
  experimental: {
    outputStandalone: true,
  },
}

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

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
},

در مرحله‌ی آخر دستورliara deploy --port 3000 --platform dockerرا در مسیر اصلی پروژه‌ی خود اجرا کنید تا برنامه‌ی شما در لیارا مستقر و اجرا شود.

Static HTML Export

قابلیت Static HTML Export این امکان را فراهم کرده تا شما از برنامه‌های NextJS خود، خروجی static HTML بگیرید و دیگر نیازی به سرور NodeJS نخواهید داشت. همچنین خروجی نهایی تقریبا از تمام ویژگی‌های ارائه شده در NextJS مانند dynamic routes، prefetching، preloading و dynamic imports پشتیبانی می‌کند اما این روش مناسب صفحه‌های لندینگ، وبلاگ‌ها، سامانه‌های خبری و وبسایت‌های مشابه است زیرا باید داده‌های وبسایت در زمان build در دسترس باشند.

برای استفاده از این قابلیت باید اسکریپت build برنامه‌ی خود را در فایل package.json به‌شکل زیر ویرایش کنید:

"scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
},

و درنهایت دستور npm run build را اجرا کنید تا خروجی‌های نهایی در مسیر پیش‌فرض out قرار بگیرند.

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

رفع خطای CORS

با وجود انواع مختلف فریم‌ورک‌ها، برای رفع خطای CORS راه حل‌های متفاوتی وجود دارد. برای مثال در فریم‌ورک NextJS باید طبق مستندات رسمی این فریم‌ورک، پکیج cors را نصب کرده:

$ npm i cors

و به‌شکل زیر از آن در برنامه‌ی خود استفاده کنید:

import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Run the middleware
  await runMiddleware(req, res, cors)

  // Rest of the API logic
  res.json({ message: 'Hello Everyone!' })
}

export default handler