استقرار اپلیکیشن Nextjs در هاست اشتراکی

برای استقرار (Deploy) اپلیکیشن Nextjs روی هاست های اشتراکی که CPanel هستند آموزش های کمی وجود داره و از قضا کار سر راستی هم نیست و پیچ و خم داره. همین انگیزه ای شد تا این مقاله رو بنویسم.

ما فرض رو بر این میگیریم که شما هاست رو خریدید و DNS های سرویس دهنده رو هم روی دامنه خودتون ست کردید. دقت کنید که هاست هایی حداقل کانفیگ رو دارن و از اپ های Nodejs پشتیبانی نمی کنند قابل استفاده نیستند. حتما هاستی تهیه کنید که اولا از Nodejs پشتیبانی کنه و ثانیا حداقل 3 هسته پردازنده و 3 گیگابایت رم داشته باشه.

همچنین فرض شده که زبان CPanel تون انگلیسی هست. اگر فارسی هست به انگلیسی تغییر بدید تا سردرگم نشید.

مرحله اول - ساخت دیتابیس

اگر اپلیکیشن شما دیتابیس نداره میتونید این مرحله رو رد کنید و مشکلی براتون پیش نمیاد.

ابتدا وارد CPanel هاستتون بشید و گزینه Manage My Database رو بزنید. در صفحه باز شده از بخش Create New Database یک دیتابیس ایجاد کنید.

بعد در همین صفحه بخش Add New User رو پیدا کنید و یک یوزر بسازید.

سپس باز در همین صفحه و پایین صفحه بخش Add User To Database رو پیدا کنید و در منوی کشویی User اسم کاربری که ساختید و در منوی کشویی Database اسم دیتابیسی که ساختید رو انتخاب کنید. حالا وارد یک صفحه دیگه میشید که اینجا تیک ALL PRIVILEGES رو بزنید و بعد دکمه Make Changes رو بزنید.

حاالا دوباره به صفحه Manage My Databases برید و در بخش Current Databases مطمئن بشید که جلوی اسم دیتابیس اسم یوزری که ایجاد کرده بودید نوشته شده باشه.

حالا از دیتابیسی که روی لوکالتون دارید یک خروجی بگیرید. بعد به صفحه اصلی CPanel برید و گزینه phpMyAdmin رو بزنید. در phpMyAdmin دیتابیس خودتون رو انتخاب و خروجی که گرفته بودید رو Import کنید. (اگر در مورد Import/Export دیتابیس اطلاعاتی ندارید میتونید سرچ کنید).

این مرحله تمومه.

مرحله دوم - کانفیگ پروژه

ابتدا در پوشه روت پروژه دو فایل با نام های env.development.local. و env.production.local. بسازید (دقت کنید که اول اسم این فایلها باید دات داشته باشه)

اول میرین سراغ فایل env.development. ابتدا مقادیر env که خودتون از قبل داشتید رو توی این فایل اضافه کنید.

سپس اول یک مقدار زیر رو وارد کنید:

NEXT_PUBLIC_BASE_URL=http://localhost:3000

حالا مقدار زیر رو هم وارد کنید (اگر اپتون دیتابیس نداره این مقدار رو نیاز ندارید) :

DATABASE_URL=&quotmysql://Username:Password@localhost:3306/DatabaseName?charset=utf8&collation=utf8_general_ci&defaultAuthPluginType=mysql_native_password&allowPublicKeyRetrieval=true&connectionLimit=10&quot

در وارد کردن مقادیر DATABASE_URL خیلی دقت کنید. به طور مثال اگر دیتابیس شما mysql نیست عوضش کنید. اگر از نرم افزار XAMPP استفاده می کنید و یوزر پسورد دیتابیس شما دیفالت هست در بخش Username مقدار root و بخش پسورد رو هم خالی بگذارید (دو نقطه بعد از یوزرنیم رو پاک نکنید). به عنوان مثال برای من که از نرم افزار XAMPP استفاده می کنم به صورت زیر هست:

DATABASE_URL=&quotmysql://root:@localhost:3306/hadi_db?charset=utf8&collation=utf8_general_ci&defaultAuthPluginType=mysql_native_password&allowPublicKeyRetrieval=true&connectionLimit=10&quot

حالا میریم سراغ فایل env.production. کل اطلاعات داخل فایل env.development رو کپی کنید داخل فایل env.production.

حالا مقدار NEXT_PUBLIC_BASE_URL رو برابر آدرس سایتتون قرار بدید. مثال:

NEXT_PUBLIC_BASE_URL=https://google.com

مقدار DATABASE_URL رو بر اساس اطلاعاتی که در مرحله اول انجام دادید پر کنید. یعنی یوزرنیم و پسورد و نام دیتابیس رو به مقادیری که توی هاستتون هست تغییر بدید.

کارمون با فایل های env تمومه. ساخت این دو فایل env باعث این میشه تا شما زمانی که روی سیستم خودتون پروژه رو اجرا می کنید و یا برای هاست خروجی میگیرید مشکلی پیش نیاد و هرکدوم میره از فایل env مربوط به خودش اطلاعات رو میخونه.

الان میریم سراغ فایل next.config.mjs که در روت پروژه هست. محتوای فایلتون باید بصورت زیر باشه:

sad
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'standalone',
images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
      {
        protocol: 'http',
        hostname: '**',
      },
    ],
    unoptimized: true,
  },
};

export default nextConfig;

خوب کانفیگ فایلهامون انجام شد.

مرحله سوم - بیلد کردن پروژه

ترمینال رو باز کنید و مطمئن بشید داخل آدرس روت پروژه خودتون هستید.دستورات زیر رو به ترتیب اجرا کنید. هر کامندی که میزنید باید با موفقیت اجرا بشه و اگر اون کامند خطا داشت سرچ کنید و خطاش رو رفع کنید و مجدد اون دستور رو اجرا کنید.

npm i
npx prisma generate // اگر پریزما استفاده نمی کنید نیازی به اجرای این دستور نیست
npm run build
cp -r public .next/standalone/
cp -r .next/static .next/standalone/.next/

این مرحله هم تموم شد.

مرحله چهارم - بارگزاری پروژه روی هاست

بعد از اینکه مرحله 3 رو انجام دادید، در داخل پوشه روت پروژه شما یک پوشه به نام next. ایجاد میشه، بازش کنید. در داخل این پوشه یک پوشه به نام standalone وجود داره که محتویات داخلش همون فایل های بیلد شده پروژه هست. همه فایلهای داخل پوشه standalone رو انتخاب و zip کنید.

حالا CPanel رو باز کنید و گزینه File Manager رو بزنید. در فایل منیجر به آدرس پوشه public_html برید. اینجا یک پوشه با نام دلخواه (به عنوان مثال app) بسازید. وارد پوشه ساخته شده بشید و فایل zip که ساخته بودید رو اینجا آپلود کنید. بعد از آپلود فایل رو extract کنید. مطمئن بشید فایلی با نام server.js در داخل پوشه ای که ساختید وجود داره. پس شد public_html > app > server.js و مابقی فایلها.

مرحله پنجم (پایانی) - ایجاد اپ Nodejs

در مرحله آخر به صفحه اصلی CPanel برید و گزینه Setup Nodejs App رو انتخاب کنید. اگر این گزینه رو ندارید یعنی که هاست شما از اپ های Nodejs پشتیبانی نمیکنه و باید هاست دیگه ای تهیه کنید و یا به پشتیبانی درخواست بدید تا براتون این گزینه رو فعال کنند و بعد احتمالا تمامی مراحل رو از اول انجام بدید. (ابتدای مقاله تذکر داده بودم بابت این مورد).

بعد از زدن این گزینه ، در صفحه ای که باز میشه باید دکمه Create Application رو بزنید. سپس یکسری تنطیمات رو اینجا باید انجام بدید که در ادامه توضیح میدم.

ابتدا Nodejs Version رو روی بالاترین نسخه انتخاب کنید.

و Application Mode رو production انتخاب کنید.

در Application Root مقدار public_html/XXX رو وارد کنید. به جای XXX اسم پوشه ای که در مرحله قبل ساختید رو وارد کنید. مثلا برای من اینطوره: public_html/app

در قسمت Application Url باید از منوی کشویی آدرس Url مورد نظری که میخواید اپ شما روش اجرا بشه رو انتخاب و در کادرش هم هیچ مقداری وارد نکنید.

حالا در کادر مقابل Application startup file صرفا مقدار server.js رو وارد کنید.

در نهایت در بخش Environment variables باید به تعداد مقادیری که در فایل env.production دارید دکمه Add variable رو بزنید و اون مقادیر رو وارد کنید. به عنوان مثال در ستون Name مقدار NEXT_PUBLIC_BASE_URL و در ستون Value آدرس سایتتون رو وارد کنید. این کار رو برای تمام مقادیری که داخل فایل env دارید انجام بدید و دکمه Done که مقابل هر سطر هست رو بزنید.

در آخر دکمه Save رو بزنید، بعد صفحه مرورگرتون رو رفرش کنید و یکبار روی دکمه Restart کلیک کنید. تمام. سایت شما آمادس.

اگر سایتتون رو باز کنید باید بدون هیچ ایرادی کار کنه.