گردو
راهنمای استقرار React

دیپلوی react و Vite روی گردو

دیپلوی react و Vite روی سکوی ابری گردو از Git یا CLI؛ بیلد خودکار، متغیرها، دامنه و SSL برای پنل‌ها و سایت‌های SPA. پروژه‌ی React را منتشر کنید.

پاسخ کوتاه

برای دیپلوی react و پروژه‌های ساخته‌شده با Vite، بیلد خودکار کدهای جاوااسکریپت روی بستر ابری اجرا شده و صفحات در دیسک‌های پرسرعت کش می‌شوند. برای مقایسه با فریم‌ورک‌های دیگر می‌توانید صفحه هاست react، راهنمای دیپلوی nextjs و صفحه آموزش دیپلوی را ببینید.

آخرین بازبینی: ۱۴۰۵/۰۶/۱۵

آماده‌سازی پروژه برای دیپلوی react

فایل‌های وابستگی پروژه یعنی package.json و lockfile را در مخزن گیت قرار دهید. مقادیر پیش‌فرض دستور ساخت و دستور اجرا برای این استک:

# دستور ساخت
npm ci && npm run build

# دستور اجرا
npx serve -s dist -l $PORT

متغیرهای Vite در زمان build خوانده می‌شوند و معمولاً پیشوند VITE_ دارند.

استقرار خودکار مستقیم از مخزن Git

  1. در پنل کاربری گردو کلاد یک پروژه و محیط جدید ایجاد کنید.
  2. سرویس را به مخزن GitHub یا GitLab و شاخه مورد نظر متصل نمایید.
  3. دستور ساخت و دستور اجرا را مطابق با نیازمندی‌های پروژه تنظیم کنید.
  4. متغیرهای محیطی ضروری را تعریف کرده و فرآیند استقرار را آغاز نمایید.
  5. در بخش دامنه‌ها، دامنه‌ی اختصاصی خود را متصل کرده و از SSL رایگان بهره‌مند شوید.

استقرار از پوشه محلی با Gerdoo CLI

curl -fsSL https://get.gerdoo.cloud/install.sh | sh
gerdoo login
cd your-project
gerdoo deploy
gerdoo logs

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

در Windows (PowerShell) به‌جای دستور نصب از irm https://get.gerdoo.cloud/install.ps1 | iex استفاده کنید.

نکات مهم محیط عملیاتی برای React

  • fallback مسیرهای SPA را به index.html فعال کنید.
  • کلید محرمانه را داخل bundle مرورگر قرار ندهید.
  • API را سرویس جداگانه مستقر و CORS را محدود کنید.
  • بررسی سلامت و زمان شروع به کار سرویس را پیش از هدایت ترافیک واقعی تست کنید.
  • داده‌های دائمی و فایل‌های کاربران را روی دیسک‌های ماندگار یا ذخیره‌سازی ابری نگه دارید.

سوالات پرتکرار

دیپلوی react و دیپلوی ری اکت روی هاست ابری چگونه انجام می‌شود؟

در دیپلوی react و دیپلوی ری اکت، کدهای پروژه با ابزارهایی مانند Vite یا Webpack بیلد شده و خروجی پوشه dist با وب‌سرور پرسرعت و کش مناسب در بستر ابری منتشر می‌شود.

آپلود پروژه react روی هاست و دیپلوی پروژه react برای روت‌های SPA چگونه حل می‌شود؟

در آپلود پروژه react روی هاست و دیپلوی پروژه react، تنظیمات بازنویسی آدرس‌ها (Fallback Routing) فعال است تا در رفرش صفحات مرورگر با خطای ۴۰۴ مواجه نشوید.