كيف تنشر مشروع React على الاستضافة خلال دقيقة

بنيتَ مشروع React وهو يعمل على جهازك، وتريده الآن على عنوانٍ حقيقي بشهادة TLS يفتحه أيّ شخص. بعد الأمر npm run build لا يكون مشروع React سوى ملفاتٍ ثابتة، فالمهمّة كلّها تتلخّص في: ضع هذه الملفات داخل صورة Docker صغيرة، وسلّمها للمنصّة، ودعها تخدمها بشهادة ونطاقٍ فرعي. هذا ما يفعله هذا الدليل تماماً؛ وبعد الإعداد الأول يصبح كلّ تحديثٍ لاحق مجرّد git push واحد.

ما ستحتاجه#

• مشروع React في مستودع Git (Vite أو Create React App، كلاهما يعمل)
• Docker مثبّت على جهازك لبناء الصورة واختبارها قبل رفعها
• حساب على alawadi.cloud: سجّل بحساب Google دون بطاقة، وفعّل الرصيد التجريبي المجاني من داخل البوابة

الخطوة ١: ابنِ الحزمة الثابتة#

بناء المشروع يحوّل مكوّنات React إلى HTML وCSS وJavaScript عادية. مع Vite تظهر المخرجات في مجلّد dist، ومع Create React App في مجلّد build. شغّل الأمر مرة على جهازك لتتأكّد من نجاحه:

npm ci
npm run build   # Vite: dist/  |  CRA: build/

كلّ ما في هذا المجلّد هو موقعك بالكامل. لا عمليةَ Node تحتاج إلى إبقائها قيد التشغيل في الإنتاج، بل مجرّد ملفاتٍ تُخدَم، ولهذا يكون هذا النشر خفيفاً إلى هذا الحدّ.

الخطوة ٢: اكتب ملف Dockerfile للإنتاج#

توجّه المنصّة الطلبات إلى المنفذ 8080، وترفض أيّ تطبيق يعمل بمستخدم root. لذلك تخدم صورة التشغيل الملفات المبنية على المنفذ 8080 بمستخدمٍ غير root. أنشئ ملف Dockerfile في المجلّد الرئيسي للمستودع:

# مرحلة البناء: أنتج الحزمة الثابتة
FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build   # Vite يكتب الموقع الثابت في /app/dist
 
# مرحلة التشغيل: اخدم الملفات على المنفذ 8080 بمستخدم غير root
FROM node:22-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
RUN npm install -g serve
COPY --from=build /app/dist ./dist
# حزمة node:alpine فيها مستخدم "node" غير root؛ المنصّة ترفض الحزم التي تعمل بمستخدم root
USER node
EXPOSE 8080
CMD ["serve", "-s", "dist", "-l", "8080"]

الخيار serve -s يخدم المجلّد كتطبيقٍ أحادي الصفحة، فتعود المسارات مثل /dashboard إلى index.html بدل أن تعطي خطأ 404. جرّب كلّ شيء على جهازك قبل النشر:

docker build -t my-react-app .
docker run --rm -p 8080:8080 my-react-app
# افتح http://localhost:8080

وإن نجح هنا، فسينجح على المنصّة، لأنّها الصورة نفسها تماماً.

الخطوة ٣: انشر عبر Cloud Studio#

افتح Cloud Studio في البوابة، واختر تطبيقاً نوعاً لما تريد نشره، وأعطه اسماً، واختر وصولاً عاماً. عندها يُنشئ Cloud Studio المشروع، ويشغّل تطبيقك فوراً على نطاقٍ فرعي عام *.alawadi.cloud بشهادة TLS جاهزة، معتمداً على صورة مؤقتة ريثما تصل صورتك الحقيقية في الخطوة التالية.

الخطوة ٤: ارفع صورتك وفعّل النشر التلقائي#

ترفع صورتك إلى مستودع Docker خاص على المنصّة، فيصبح كلّ رفعٍ إلى main نشراً تلقائياً:

١. من المستودعات أنشئ مستودع Docker خاصاً واربطه بمشروعك. ٢. من صفحة المستودع، اربط مستودع Git عبر نموذجَي GitHub OIDC: الأول يتيح لمستودعك رفع الصور، والثاني يتيح له بدء النشر، دون أيّ رموز سرّية ثابتة تُخزَّن في GitHub. ٣. اضغط نسخ ملف الـ workflow لتحصل على ملف deploy.yml جاهزاً بكلّ القيم، ثمّ ضعه في .github/workflows/ داخل مستودعك.

تجد الشرح الكامل لهذا المسار بعينه في درس النشر خلال 5 دقائق وفي قائمة الإطلاق الكاملة. من هنا فصاعداً، يتكفّل git push ببناء الصورة ورفعها، فيصبح إصدارك الجديد مباشراً خلال دقيقة تقريباً.

ما تمنحك المنصّة تلقائياً#

بعد أن يعمل تطبيقك، تكون قد حصلت على كلّ ما يلي دون أن تُعدّ أيّاً منه بنفسك:

• شهادة TLS على نطاقك الفرعي *.alawadi.cloud، تُدار وتُجدَّد تلقائياً.
• سجلّات ومقاييس مباشرة في لوحة التحكّم، مع إعادة تشغيلٍ بضغطة واحدة.
• نطاقك الخاص: أضفه من صفحة التطبيق، ووجّه سجلّ DNS الذي تعرضه البوابة، ونتكفّل نحن بالشهادة.
• سياسات التنبيه والتوسيع التلقائي حين تحتاجها.

متغيّرات البيئة#

يقرأ React متغيّرات البيئة وقت البناء، لا وقت التشغيل. فـ Vite يكشف المتغيّرات التي تبدأ بـ VITE_ (وCreate React App يستخدم REACT_APP_)، وتُدمَج قيمها في الحزمة حين يعمل npm run build. لذلك اضبطها قبل خطوة البناء، لا على التطبيق العامل. وأيّ شيءٍ سرّي، أبقِه على خادمك الخلفي؛ فما يُدمَج في حزمة ثابتة يراه كلّ زائرٍ يفتح الصفحة.

التحدّث إلى خادم خلفي#

إذا كان تطبيق React يستدعي واجهة API، فانشر تلك الواجهة كتطبيقٍ ثانٍ داخل المشروع نفسه، وأضف قاعدة PostgreSQL مُدارة من تبويب قواعد البيانات. وحين تربط القاعدة، تُحقَن بيانات اتصالها في واجهتك تلقائياً، فلا تنسخ كلمة مرور بيدك أبداً. تجد المسار الكامل لتطبيقٍ مع قاعدة بيانات في دليل الإطلاق.

كم يكلّف، وكيف تبدأ#

تُخصم رسوم الاستخدام من سجلّ رصيد بالدولار، وتظهر كلّ خدمة كبند واضح مع عرض اختياري بالدولار أو الليرة أو الدرهم أو الدينار الأردني. ابنِ تقديرك عبر حاسبة الأسعار، ثم فعّل رصيداً تجريبياً بقيمة 5 دولارات من داخل البوابة دون بطاقة. القسائم مسبقة الدفع المسعّرة بالليرة السورية هي وسيلة التعبئة الوحيدة المتاحة؛ ولا تتوفر تعبئة بالبطاقات أو العملات الرقمية حالياً.

أسئلة شائعة#

هل أحتاج إلى إعداد nginx أو تشغيل خادم؟

لا. أمر serve في صورة التشغيل يتكفّل بالملفات الثابتة وبتوجيه التطبيق أحادي الصفحة. لن تلمس أيّ إعداد لخادم ويب.

هل «خلال دقيقة» تعني أول مرة؟

الإعداد الأول، أي كتابة ملف Dockerfile وربط المستودع، يأخذ دقائق قليلة تفعلها مرة واحدة. بعدها يصبح كلّ نشرٍ مجرّد git push واحد، ويصير إصدارك الجديد مباشراً خلال دقيقة تقريباً.

Vite أم Create React App؟

كلاهما يعمل. الفرق الوحيد هو مجلّد المخرجات: dist لـ Vite وbuild لـ CRA. عدّل سطر COPY في ملف Dockerfile ليطابق مجلّدك.

لديك سؤال؟ افتح تذكرة دعم في البوابة، أو راسلنا على [email protected].