برای ساخت رابط React در Ubuntu، ابتدا runtime سازگار را آماده کنید و سپس ابزار ساخت متناسب با معماری را انتخاب کنید. این آموزش یک برنامه ساده سمت مرورگر با Vite می‌سازد؛ برای فروشگاه یا سایتی با نیاز جدی به رندر سرور، انتخاب چارچوب و راهبرد محتوا باید پیش از ساخت انجام شود. استفاده از React به‌تنهایی سئو یا سرعت را تضمین نمی‌کند.
شروع پروژه در محیط توسعه
با کاربر عادی و Node.js 24 LTS کار کنید. به وجود نسخه قدیمی در مخزن سیستم اکتفا نکنید؛ نسخه واقعی را بخوانید. در پوشه‌ای مستقل، ابزار رسمی create-vite را اجرا و اعلان دریافت بسته را بررسی کنید.
node --version
npm --version
npm create vite@latest web-ui -- --template react
cd web-ui
npm install
npm run devساختار و وابستگی‌ها
src محل کد برنامه و public محل فایل‌های عمومی با نیاز مشخص است. فایل lock را همراه package.json نگه دارید. در ساخت تکرارپذیر پروژه دارای lock معتبر از npm ci استفاده کنید. نصب نسخه تصادفی یک وابستگی برای رفع هشدار می‌تواند ناسازگاری بسازد؛ تغییر dependency را با آزمون و بازبینی diff انجام دهید.
از توسعه به نسخه قابل انتشار
npm run build
npm run previewپس از build، صفحه‌ها، پیام‌های خطا و درخواست‌های API را در خروجی واقعی بررسی کنید. preview تنها ابزار مشاهده محلی است. برای برنامه استاتیک، وب‌سرور فایل‌های dist را سرو می‌کند و لازم نیست فرایند dev را روی سرور زنده نگه دارید.
موارد مهم انتشار
- document root و base پروژه را با دامنه یا زیرمسیر واقعی هماهنگ کنید.
- اگر history router دارید، refresh یک مسیر داخلی را آزمایش کنید؛ fallback نباید خطای API را به HTML موفق تبدیل کند.
- فایل‌های hashدار را می‌توان با سیاست کش مناسب سرو کرد، اما index.html باید به نسخه تازه assetها اشاره کند.
- گواهی HTTPS، CORS و مقصد API را از origin واقعی آزمایش کنید.
امنیت و دیده‌شدن محتوا
رازها نباید وارد bundle شوند؛ متغیرهای عمومی Vite در اختیار مرورگر قرار می‌گیرند. برای صفحات محتوایی، عنوان و محتوای قابل دسترس، URL پایدار، لینک معمولی و راهبرد رندر را بررسی کنید. خروجی خالی تا پایان اجرای JavaScript ممکن است تجربه کاربر و خزنده را پیچیده کند. پیش از انتخاب SPA برای هر نوع صفحه، نیاز محتوا را بسنجید.
عیب‌یابی کوتاه
اگر dev اجرا می‌شود ولی build شکست می‌خورد، متن خطا، بزرگی و کوچکی نام فایل در لینوکس و نسخه Node را بررسی کنید. صفحه سفید پس از بارگذاری اغلب به مسیر asset یا خطای runtime مربوط است؛ کنسول و Network را روی نسخه تولید بخوانید. تغییر ابزار ساخت نیز نباید URL عمومی صفحه‌های قبلی را بی‌برنامه عوض کند.
مطالعه مرتبط
منابع و مستندات
بازبینی محتوا و منابع: ۲۶ مهر ۱۴۰۵. دستورهای نمونه برای محیط مشخص‌شده‌اند؛ پیش از استفاده روی سرویس عملیاتی، سازگاری محیط و نسخه پشتیبان را بررسی کنید.
