بیلد یک‌بار، سرو با nginx
خروجی یک اپ React مجموعه‌ای از فایل‌های HTML، JS و CSS است و برای سرو آن سرور Node.js لازم نیست. سکو کلود اپ را با Node.js بیلد می‌کند و فقط خروجی را در یک ایمیج nginx قرار می‌دهد؛ ایمیج کوچک می‌ماند و مصرف حافظه نزدیک صفر است.
اگر از React Router یا هر روتر سمت مرورگر استفاده می‌کنید، حالت SPA را در sakoocloud.json روشن کنید تا رفرش روی مسیرهای داخلی به جای ۴۰۴ همان index.html را برگرداند.
مناسب برای
- پنل مدیریت و داشبورد
- اپ تک‌صفحه‌ای با React Router
- رابط کاربری جدا از API
- پروتوتایپ و دموی Vite
مسیر بیلد React
تشخیص
reactوreact-dom، اسکریپتbuildو لاک‌فایل.package.jsonنصب و بیلد
وابستگی‌ها نصب و اسکریپت build اجرا میشود.
npm run buildبسته‌بندی
فقط پوشه‌ی خروجی در ایمیج nginx قرار می‌گیرد.
dist → /usr/share/nginx/htmlسرو
nginx فایل‌ها را با gzip روی پورت 80 سرو می‌کند.
nginx :80
خروجی یک استقرار واقعی
sakoocloud deploy ✔ Packed 1.1MB ✔ Source uploaded ℹ Build started · dep_7k2m9q #4 [builder 1/5] FROM node:22-alpine #6 [builder 3/5] RUN npm ci #8 [builder 4/5] RUN npm run build #10 [stage-1 2/2] COPY dist /usr/share/nginx/html #12 exporting to image ✔ Deployed — app is running. → https://my-react.sakooapps.ir
تنظیم پروژه
پوشه‌ی خروجی را اعلام کنید و اگر روتر دارید، حالت SPA را روشن کنید.
{
"runtime": "react",
"buildCommand": "npm run build",
"outputDir": "dist",
"spa": true
}
sakoocloud apps create --name my-react --runtime react --port 80
sakoocloud deploy
تنظیمات
پوشه‌ی خروجی
| ابزار | outputDir |
|---|---|
| Vite | dist |
| Create React App | build |
متغیرهای محیطی در React
این مقادیر در زمان بیلد داخل باندل قرار می‌گیرند؛ آن‌ها را با sakoocloud env set --build-time تعریف کنید و رمز و کلید محرمانه در آن‌ها نگذارید.
| ابزار | پیشوند |
|---|---|
| Vite | VITE_ |
| Create React App | REACT_APP_ |
پکیج‌منیجر
ابزار از روی لاک‌فایل انتخاب میشود و نصب همیشه دقیقاً همان نسخه‌های قفل‌شده را می‌گیرد.
| لاک‌فایل | ابزار | دستور نصب |
|---|---|---|
package-lock.json | npm | npm ci |
yarn.lock | yarn | yarn install --frozen-lockfile |
pnpm-lock.yaml | pnpm | pnpm install --frozen-lockfile |
همراه هر استقرار
این‌ها به رانتایم بستگی ندارند و برای هر اپ روی سکو کلود فعال‌اند. بعضی، مثل مقیاس‌دهی خودکار و کران‌جاب، به پلن بستگی دارند.
- دامنه‌ی اختصاصی و SSLدامنه را اضافه کنید؛ گواهی خودکار صادر و تمدید میشود.
- متغیرهای محیطی و سکرتمقادیر رمزگذاری‌شده فقط در زمان اجرا به اپ می‌رسند.
- مرحله‌ی انتشارmigration بعد از بیلد و پیش از جایگزینی نسخه‌ی قبلی اجرا میشود.
- لاگ زندهلاگ بیلد و زمان اجرا، در CLI و کنسول.
- بازگشت به نسخه‌ی قبلهر استقرار قبلی با یک دستور برمی‌گردد.
- مقیاس‌دهیمنابع و تعداد نمونه‌ها را تغییر دهید یا خودکارش کنید.
- دیسک ماندگاربرای فایل‌هایی که باید بعد از هر استقرار بمانند.
- کران‌جابدستور زمان‌بندی‌شده با همان ایمیج و متغیرها.
- استقرار خودکار با گیتهر push روی شاخه‌ی هدف بیلد و مستقر میشود.
خطاهای رایج
با رفرش یک مسیر داخلی، ۴۰۴ برمی‌گردد
علتمسیرهایی مثل /dashboard فایل واقعی ندارند و روتر سمت مرورگر آن‌ها را می‌سازد.
راه‌حلدر sakoocloud.json حالت SPA را روشن کنید تا مسیرهای ناشناخته به index.html برگردند.
{
"outputDir": "dist",
"spa": true
}
صفحه‌ی سفید بعد از استقرار
علتمسیر فایل‌ها با base در Vite یا homepage در package.json نمی‌خواند و فایل‌های JS پیدا نمی‌شوند.
راه‌حلbase را / بگذارید یا برابر مسیری که اپ رویش سرو میشود.
فایل‌ها سرو نمی‌شوند
علتoutputDir با پوشه‌ی خروجی واقعی فرق دارد.
راه‌حلبرای Vite dist و برای CRA build را در sakoocloud.json بگذارید.
بیلد با خطای حافظه متوقف میشود
علتبیلد پروژه‌های بزرگ در حافظه‌ی پیش‌فرض جا نمی‌شود.
راه‌حلحافظه را بیشتر کنید یا مصرف برنامه را پایین بیاورید.
sakoocloud apps scale --memory 1Gi
پرسش‌های متداول
برای React سرور Node.js لازم است؟
نه. خروجی بیلد با nginx سرو میشود. اگر رندر سمت سرور میخواهید، Next.js را انتخاب کنید.
API را کجا مستقر کنم؟
بهعنوان یک اپ جدا، مثلاً Node.js یا Python، و آدرسش را با متغیر VITE_ به رابط کاربری بدهید.
دامنه‌ی خودم را وصل کنم؟
بله. دامنه را به اپ اضافه کنید؛ گواهی SSL خودکار صادر و تمدید میشود.
جزئیات بیشتر در راهنمای React در مستندات و مرجع CLI.