استقرار برنامه React در لیارا


توجه داشته باشید؛ تنها برنامه‌هایی که با Vite و یا create-react-app ساخته شده باشند، در پلتفرم React لیارا قابل اجرا خواهند بود.

در ابتدا، پس از ساخت برنامه بایستی تمام فایل‌ها و پوشه‌هایی که قصد ندارید در لیارا آپلود شوند را، از پروژه پاک کنید. به عنوان مثال، باید پوشه node_modules را در پروژه خود پاک کنید؛ چرا که لیارا در حین فرایند استقرار، آن را برای شما ایجاد خواهد کرد. به صورت کلی، اگر که در پروژه خود فایلی به نام gitignore. دارید، کافیست تا فایل‌های و دایرکتوری‌های اشاره شده در این فایل را، از پروژه خود پاک کنید.

همچنین، پروژه شما باید شامل فایل package.json باشد؛ لیارا، در حین فرایند استقرار، به صورت خودکار این فایل را پیدا می‌کند و عملیات زیر را انجام می‌دهد:

۱

نصب وابستگی‌های برنامه

لیارا، تمامی ماژول‌ها و وابستگی‌های برنامه که در فیلدهای dependencies و devDependencies قرار گرفته‌اند را با استفاده از دستور npm install نصب می‌کند.

۲

اجرای اسکریپت build

اگر که در این فایل، اسکریپت build وجود داشته باشد، لیارا با اجرای دستور npm run build آن را، اجرا می‌کند.

۳

اجرای اسکریپت start

لیارا برای اجرای برنامه، از اسکریپت start استفاده می‌کند؛ پس باید حتماً این اسکریپت در فایل package.json تعریف شده باشد.

قطعه کد زیر، یک نمونه از فایل package.json استاندارد برای برنامه‌های React است که با استفاده از Vite ساخته شده‌اند:

کپی
{
  "name": "my-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.15.0",
    "@typescript-eslint/parser": "^7.15.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  }
}
البته در نظر داشته باشید که برای اجرای موفق پروژه‌های مبتنی بر vite، باید قطعه کد زیر به فایل vite.config.js اضافه شود:
کپی
export default {
    // ... rest of configuration
    build: {
        outDir: "build"
    }
}

قطعه کد زیر نیز، یک نمونه از فایل package.json استاندارد برای برنامه‌های React است که با استفاده از دستور create-react-app ساخته شده‌اند:

کپی
{
  "name": "my-cra-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

در ادامه، بایستی پوشه پروژه خود را درون یک فایل zip قرار بدهید؛ سپس در برنامه خود، بر روی گزینه استقرار جدید کلیک کرده؛ فایل zip را بکشید و در باکس آپلود تعبیه شده، رها کنید تا وارد مرحله بعدی استقرار شوید:

deploy app using console

پس از آپلود پروژه، باید شخصی‌سازی‌های پروژه را در برنامه خود، لحاظ کنید:

build app on liara

در انتها، به صورت مستقیم به صفحه تاریخچه برنامه هدایت می‌شوید که می‌توانید لاگ‌های مربوط به استقرار را در آن، مشاهده بفرمایید.

پس از استقرار برنامه می‌توانید رویدادها و گزارشات مربوط به برنامه را بررسی کنید.