استقرار React در کنسول پاستا؛ اجرای نمونه رسمی، تنظیم فرمان اجرا، پورت و بررسی سلامت، نگه‌داری داده و رفع خطاهای رایج.
پیش از شروع
- حساب فعال و دسترسی ساخت پروژه در فضای کاری داشته باشید. از داده آزمایشی استفاده کنید.
- نام پروژه، ناحیه، منابع و هزینه را پیش از تأیید نهایی بررسی کنید. کلیدها و رمزها را فقط در تنظیمات خصوصی کنسول وارد کنید.
نمونه و فایل‌های لازم
مشاهده فایل‌های نمونه React؛ فایل‌های اصلی: package.json، index.html و src/main.js. فرمان زیر کل مخزن را دریافت می‌کند؛ پوشه این آموزش frontend است.
git clone https://github.com/Paasta-Cloud/examples.git
cd examples/frontendپوشه رسمی frontend نمونه Vite ساده است و React ندارد. برای تبدیل همین نمونه، داخل پوشه npm install react react-dom را اجرا کنید و src/main.js را با کد زیر جایگزین کنید.
این راهنما برای React سمت مرورگر است. پروژه Next.js یا SSR را با راهنمای همان فریم‌ورک منتشر کنید. VITE_ در مرورگر دیده می‌شود.
کد React برای همین نمونه
import React from 'react';
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('app')).render(
React.createElement('h1', null, 'React is running on Paasta')
);ساخت پروژه از کنسول
- در کنسول «ساخت اپلیکیشن» را باز کنید و منبع
Gitیا آپلود سورس را انتخاب کنید. - برای
Git، مخزنexamplesو شاخهmainرا انتخاب کنید و پوشه پروژه درMonorepoراfrontendقرار دهید. برای آپلود، فقط محتوای همان پوشه را بفرستید؛node_modules،.venvو خروجی ساخت محلی لازم نیستند. - نتیجه بررسی سورس را بخوانید. اگر مخزن را برای پروژه خودتان
forkکرده‌اید، اتصالGitباید به همان مخزن دارای تغییرات اشاره کند. - در تنظیمات اجرا، پورت 8080 و مسیر سلامت / را بررسی کنید. فرمان اجرا و متغیرهای موردنیاز را با جدول زیر تطبیق دهید.
- پلن، ناحیه، دیسک و هزینه منابع را مرور کنید و ساخت را تأیید کنید. مراحل ساخت و اجرا را در صفحه استقرار دنبال کنید.
فرمان‌ها و تنظیمات نمونه
| تنظیم | مقدار |
|---|---|
| ساخت یا نصب | npm run build |
| اجرا | Nginx؛ خروجی استاتیک dist |
| پورت داخلی | 8080 |
| مسیر سلامت | / |
فرمان ساخت را برای شناخت مراحل می‌بینید؛ پاستا آن را از سورس تشخیص می‌دهد. override فرمان اجرا فقط وقتی لازم است که فرمان پروژه با نمونه فرق داشته باشد. پورت داخلی باید با پورت واقعی برنامه یکسان باشد؛ پورت رایانه محلی معیار نیست.
بررسی نتیجه
دامنه HTTPS پروژه را باز کنید. نتیجه مورد انتظار نمونه: React is running on Paasta.
مسیر / باید پاسخ موفق بدهد. در لاگ اجرا خطای تکرارشونده نباشد؛ بعد از آماده‌شدن برنامه، یک درخواست واقعی و یک refresh را هم بررسی کنید.
curl -i https://YOUR_PROJECT.paasta.app/آدرس بالا نمونه است؛ دامنه واقعی را از صفحه پروژه کپی کنید، چون ممکن است دامنه ناحیه داشته باشد.
خطاهای رایج React
Failed to resolve import react
react و react-dom و lockfile تازه را در پوشه frontend ثبت کنید.
Target container is not a DOM element
شناسه عنصر ریشه در index.html نمونه app است؛ کد createRoot باید همان شناسه را استفاده کند.
مسیر داخلی با refresh باز نمی‌شود
بازنویسی مسیر SPA به index.html را تنظیم کنید و لینک مستقیم به صفحه داخلی را آزمایش کنید.
انتشار نسخه بعدی و داده ماندگار
برای نسخه بعدی از همان پروژه استفاده کنید. فایل موقت داخل برنامه ماندگار نیست؛ داده مهم را در دیتابیس یا دیسک پایدار نگه دارید و قبل از تغییر ساختار داده بکاپ بگیرید. Rollback نسخه برنامه، migration یا داده دیتابیس را خودکار به عقب برنمی‌گرداند.