راه‌اندازی React روی لینوکس خانواده CentOS؛ توسعه و انتشار با Vite

React برای ساخت رابط کاربری است و نصب آن به معنی راه‌اندازی سرویس تولید نیست. Create React App دیگر گزینه پیشنهادی ساخت پروژه تازه نیست. برای یک رابط ساده سمت مرورگر، Vite مسیر سبکی فراهم می‌کند؛ اگر پروژه به رندر سمت سرور و مسیریابی یکپارچه نیاز دارد، چارچوب مناسب را جداگانه انتخاب کنید. CentOS Linux منقضی نیز باید پیش از راه‌اندازی تازه جایگزین شود.

پیش‌نیاز و محدوده آموزش

نمونه برای پروژه مستقل React روی یک توزیع فعال خانواده RHEL و Node.js 24 LTS است. داشتن نسخه سازگار Node و npm را کنترل کنید. فرمان npm create یک ابزار بیرونی را دریافت و اجرا می‌کند؛ نام بسته و اعلان نصب را پیش از تأیید بخوانید.

node --version
npm --version
npm create vite@latest hostnegar-ui -- --template react
cd hostnegar-ui
npm install
npm run dev

نام پوشه نمونه باید تازه باشد. آدرس توسعه در خروجی ترمینال اعلام می‌شود؛ فرض نکنید همیشه یک پورت آزاد و ثابت دارد. سرور توسعه را بدون نیاز روی همه interfaceها و اینترنت باز نکنید.

ویرایش و ساخت خروجی

مؤلفه نمونه را در src ویرایش کنید و نتیجه را در مرورگر ببینید. تغییرات را در کنترل نسخه ثبت کنید. پس از پایان توسعه، build بسازید؛ پوشه dist خروجی پروژه ساده Vite است.

npm run build
npm run preview

preview برای بازبینی محلی خروجی است، نه سرویس امن دائمی تولید. خطاهای build را پیش از بارگذاری حل کنید؛ موفقیت dev تضمین‌کننده ساخت تولید نیست.

انتشار روی هاست یا وب‌سرور

1. محتوای خروجی build را در document root درست و با امکان بازگشت به نسخه قبلی قرار دهید.
2. اگر برنامه زیرمسیر دارد، base در Vite و مسیرهای router را با همان مقصد هماهنگ کنید.
3. برای router سمت مرورگر، fallback وب‌سرور را فقط در محدوده همین برنامه تنظیم کنید؛ مسیر API نباید به index.html برگردد.
4. HTTPS، پاسخ مستقیم مسیرهای داخلی و بارگذاری assetها را در مرورگر خارج از حساب آزمایش کنید.

رازها و پیکربندی

هر متغیری که وارد bundle مرورگر می‌شود برای بازدیدکننده قابل مشاهده است. رمز دیتابیس، کلید خصوصی یا توکن مدیریتی را در متغیرهای VITE_ نگذارید. عملیات دارای راز باید روی backend با احراز هویت مناسب انجام شود؛ مخفی‌کردن دکمه در React مجوز دسترسی سرور نیست.

انتقال پروژه قدیمی

برای پروژه CRA موجود، ابتدا وابستگی‌ها، متغیرها و مسیر assetها را فهرست کنید و تبدیل را در شاخه جدا آزمایش کنید. این راهنما دستور حذف پروژه قبلی نیست. پس از تغییر ابزار build، URL صفحه‌ها و رفتار refresh را با نسخه پیشین مقایسه کنید.

مطالعه مرتبط

• آموزش نصب Node.js بر روی CentOS
• نحوه نصب ReactJS در اوبونتو

منابع و مستندات

• پایان توصیه Create React App برای پروژه تازه
• شروع پروژه با Vite
• پایان عمر CentOS Linux

بازبینی محتوا و منابع: ۲۶ مهر ۱۴۰۵. دستورهای نمونه برای محیط مشخص‌شده‌اند؛ پیش از استفاده روی سرویس عملیاتی، سازگاری محیط و نسخه پشتیبان را بررسی کنید.