Build به‌جای Dev Server
نسخهٔ بهینهٔ انتشار را از محیط توسعه تفکیک کنید.
پلتفرم ابری PaaS / Frontend و SPA
هاست ابری Reactمیزبانی ری‌اکت در ابر آراد
رابط کاربری React را به یک خروجی قابل‌انتشار تبدیل کنید. برای داشبورد، پنل مشتری یا وب‌اپلیکیشن، نحوهٔ Build، مدیریت مسیرها و اتصال API را کنار هم طراحی کنید.
نسخهٔ Runtime و منابع را متناسب با نیاز پروژه انتخاب کنید.
ARADCLOUD / APPLICATION PLATFORMنمای پروژه
محیط اجرای پروژهٔ شماReactFrontend Build
my-react-app
package.jsonsrc/App.jsxاز کد به اجراوابستگی‌ها · تنظیمات · انتشار
- 01Sourceکد پروژه
- 02Buildآماده‌سازی
- 03Runtimeانتشار برنامه
جزئیات فنی، پیش از استقرار
ویژگی‌های هاست React و تنظیمات محیط اجرا
محیط اجرا باید با معماری برنامه هماهنگ باشد؛ این موارد را در آماده‌سازی نسخهٔ انتشار لحاظ کنید.
اطلاعات سمت کاربر
Secret و کلید خصوصی را وارد بستهٔ JavaScript مرورگر نکنید.
انتخاب معماری
برای نیاز به SSR یا قابلیت‌های سروری، گزینهٔ Next.js را جداگانه بررسی کنید.
معماری پیشنهادی برای بررسی
اجزای اجرای React را کنار هم ببینید
برنامه و چرخهٔ انتشار
برای «پنل مشتریان»، کد، وابستگی‌ها و تنظیمات React را از هم تفکیک کنید. خروجی انتشار باید با همان نسخه‌ای آزمایش شود که در محیط اصلی اجرا خواهد شد.
داده و سرویس‌های وابسته
در سناریوی «داشبوردهای تحلیلی»، محل فایل‌های ماندگار و اتصال داده را مشخص کنید. تغییر نسخهٔ برنامه نباید تنها نسخهٔ دادهٔ موردنیاز شما را از بین ببرد.
ورودی ترافیک و سلامت برنامه
برای «وب‌اپلیکیشن تعاملی»، مسیر پاسخ‌گویی، نام دامنه و نشانهٔ سلامت برنامه را تعریف کنید. پاسخ صحیح یک مسیر ساده، به‌تنهایی عملکرد همهٔ مسیرها را تأیید نمی‌کند.
از فناوری تا کاربرد
کاربردهای هاست React
این سناریوها نقطهٔ شروع‌اند؛ منابع و روش اجرا به جزئیات پروژهٔ شما وابسته‌اند.
پنل مشتریان
مسیرهای اصلی کاربر و حجم درخواست را به نیاز منابع تبدیل کنید.
داشبوردهای تحلیلی
ارتباط با داده و سرویس‌های دیگر را در طرح استقرار مشخص کنید.
وب‌اپلیکیشن تعاملی
رفتار برنامه در شروع، اجرای عادی و توقف را جداگانه آزمایش کنید.
راهنمای استقرار روی هاست ابری
راه‌اندازی React در ابر آراد
پیش از انتقال React، این سه مورد را در پروژه آماده کنید. تنظیمات نهایی باید با نسخه و روش استقرار محیط مقصد سازگار باشند.
آماده‌سازی
ابزار Build و دستور انتشار
نسخه‌ها و وابستگی‌ها را مشخص کنید تا فرایند آماده‌سازی برنامه قابل‌تکرار باشد.
پیکربندی
پوشهٔ خروجی و فایل‌های استاتیک
تنظیمات محیط اصلی را از توسعه جدا کنید و مسیر شروع برنامه را پیش از انتقال آزمایش کنید.
اعتبارسنجی
آدرس API و مسیرهای داخلی
اتصال سرویس‌های وابسته و رفتار برنامه پس از راه‌اندازی مجدد را بررسی کنید.
DEPLOYMENT PIPELINEمسیر استقرار React
نمونهٔ استقرارReact / EXAMPLE
پایداری، امنیت و نگه‌داری
پس از انتشار چه چیزهایی را دنبال کنیم؟
مصرف منابع و زمان پاسخ
مصرف حافظه و CPU برنامهٔ React را در بار عادی و زمان اوج مقایسه کنید. کندی ممکن است از مسیر داده، وابستگی بیرونی یا تنظیمات برنامه باشد؛ افزایش منابع تنها گزینه نیست.
تنظیمات محرمانه و دسترسی
اطلاعات اتصال و کلیدها را از مخزن کد جدا نگه دارید. دسترسی اعضای تیم را به نیاز کاری محدود کنید و تغییرات تنظیمات را همراه نسخهٔ برنامه ثبت کنید.
انتشار و بازگشت
پیش از انتشار نسخهٔ جدید React، مسیرهای مهم و سازگاری داده را بررسی کنید. نسخهٔ قبلی و روش بازگشت را مشخص نگه دارید؛ بازگرداندن کد لزوماً تغییرات داده را برنمی‌گرداند.
راهنمای انتخاب و هزینه
کدام پلن برای هاست React مناسب است؟
انتخاب پلن را از نیاز واقعی برنامه شروع کنید. نوع پردازش، حجم داده و اجزای وابسته، مبنای مقایسهٔ منابع هستند.
مقایسهٔ پلن‌های هاست ←01Compute
پردازش و حافظه
CPU و RAMبرای پنل مشتریان، مصرف برنامه را در بار عادی و اوج اندازه بگیرید.
02Storage
داده و فایل
ذخیره‌سازی ماندگارحجم دیتابیس و فایل‌های کاربر را از فایل‌های قابل‌بازسازی برنامه جدا کنید.
03Services
اجزای پروژه
آدرس API و مسیرهای داخلیهزینهٔ سرویس‌های وابسته را کنار برنامهٔ اصلی ببینید؛ همهٔ اجزا لزوماً در یک پلن نیستند.
04Runtime
شیوهٔ اجرا
پوشهٔ خروجی و فایل‌های استاتیکخروجی ایستا، فرایند وب و پردازش پس‌زمینه نیازهای یکسانی ندارند.
پلن‌های پلتفرم PaaS
منابع اجرای React را مقایسه کنید
همان الگوهای منابع صفحهٔ پلتفرم PaaS؛ پیکربندی نهایی و قیمت جاری در پنل بررسی می‌شود. نام فریم‌ورک به‌تنهایی تعیین‌کنندهٔ منابع موردنیاز نیست.
| پلن‌های PaaSمنابع موردنیازتان را مقایسه کنیداز شروع پروژه تا توسعهٔ منابع | آغازشروع اقتصادی |
پایهپروژه کم‌مصرف |
توسعهمحیط توسعه فعال |
رشدProduction آماده رشد |
حرفهایبار کاری پایدار |
مقیاسمنابع پرترافیک |
سازمانیمعماری چندسرویسی |
|---|---|---|---|---|---|---|---|
| قیمت ماهانه | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل |
| قیمت ساعتی | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل | استعلام در پنل |
| RAM (GB) | 1 GB | 2 GB | 4 GB | 8 GB | 16 GB | 32 GB | 64 GB |
| vCPU (CORE) | 0.5 Core | 1 Core | 2 Core | 4 Core | 8 Core | 16 Core | 32 Core |
| Disk (GB SSD) | 10 GB | 20 GB | 40 GB | 80 GB | 160 GB | 320 GB | 640 GB |
| بررسی و انتخاب | بررسی در پنل | بررسی در پنل | بررسی در پنل | بررسی در پنل | بررسی در پنل | بررسی در پنل | بررسی در پنل |
سه گام تا انتشار برنامه
مراحل استقرار React
مسیر آماده‌سازی، اجرا و انتشار را با اسکرول دنبال کنید.
۱مرحلهٔ در حال نمایش از ۳ مرحله
- آماده‌سازی پروژه
- تنظیم و اجرای برنامه
- انتشار و نگه‌داری
۰1
گام اول
آماده‌سازی پروژه
ابزار Build و دستور انتشارنسخه و وابستگی‌های React را مشخص و خروجی قابل‌تکرار تولید کنید.
۰2
گام دوم
تنظیم و اجرای برنامه
پوشهٔ خروجی و فایل‌های استاتیکمسیرهای اصلی «پنل مشتریان» را در محیط آزمایشی اجرا کنید؛ تنظیمات نمونه را با ساختار پروژه جایگزین کنید.
۰3
گام سوم
انتشار و نگه‌داری
آدرس API و مسیرهای داخلیماندگاری داده، حفاظت از کلیدها و روش بازگشت نسخه را پیش از انتقال اصلی بررسی کنید.
آیا کلید API را می‌توان در متغیر محیطی React نگه داشت؟
اگر مقدار وارد خروجی سمت مرورگر شود، برای کاربر قابل‌مشاهده است. عملیات نیازمند کلید خصوصی باید از Backend امن عبور کند.
کدام نسخه‌های React قابل استفاده‌اند؟
نسخهٔ Runtime، وابستگی‌های پروژه و روش استقرار را با گزینه‌های فعلی پنل تطبیق دهید. پشتیبانی از یک زبان یا فریم‌ورک به معنی پشتیبانی از تمام نسخه‌ها و افزونه‌ها نیست.
هزینهٔ این هاست چطور مشخص می‌شود؟
منابع پردازشی، حافظه، فضای نگه‌داری و سرویس‌های وابسته بر هزینه اثر دارند. تعرفهٔ جاری PaaS و جزئیات پلن را بررسی کنید؛ این صفحه قیمت ثابت یا منابع نامحدود وعده نمی‌دهد.
پیش از انتقال کامل، چه چیزی را آزمایش کنم؟
یک نسخهٔ غیرحساس از برنامه را اجرا و مسیرهای اصلی، اتصال داده، آپلود فایل و رفتار پس از راه‌اندازی مجدد را کنترل کنید. سپس برای انتقال داده و بازگشت احتمالی برنامه داشته باشید.
انتخاب منابع و روش استقرار
مسیر راه‌اندازی هاست React را مشخص کنید
نیاز پروژهٔ React، سرویس‌های وابسته و منابع موردنظر را با تیم آراد در میان بگذارید.
راهنمای کامل خرید، قیمت و راه‌اندازی هاست ری‌اکت (React)
در این راهنما با کاربردهای هاست، محیط اجرا، انتخاب منابع، هزینه و مراحل انتشار برنامه آشنا می‌شوید.
