انتقل إلى المقال
Aniq-UI

3D Landingانشر الموقع على الإنترنت

انشر الموقع على الإنترنت

انشر على Vercel، أو على أي خادم فيه Node.js، أو كصورة Docker.

الموقع تطبيق Next.js بسيط بلا قاعدة بيانات ولا واجهة API ولا أسرار. تحقّق أولًا من أنه يُبنى على جهازك:

الطرفيةفي juicy
yarn build

ثم اختر إحدى الطرق الثلاث أدناه.

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

لا تحتاج إلى أي منها، لا وقت البناء ولا وقت التشغيل. المتغير الوحيد الذي تقرؤه الشيفرة مفتاح بناء اختياري:

المتغيرمتىوظيفته
BUILD_STANDALONEالبناءالقيمة true تجعل yarn build يكتب خادمًا مستقلًا في .next/standalone. يضبطه ملف Dockerfile؛ واتركه غير مضبوط في كل مكان آخر.

Vercel

  1. ضع المجلد في مستودع Git

    ادفع المجلد juicy إلى GitHub أو GitLab أو Bitbucket. يستثني .gitignore بالفعل node_modules ومخرجات البناء.

  2. استورده في Vercel

    في Vercel، أضف مشروعًا جديدًا من ذلك المستودع. يتعرّف على Next.js؛ فأبقِ إعدادات البناء الافتراضية.

  3. اجعل Vercel يستخدم Yarn 4

    قبل النشر الأول، أضف متغير بيئة واحدًا إلى المشروع، حتى يثبّت Vercel الحزم بإصدار Yarn المثبّت في package.json:

    متغير بيئة في Vercel
    ENABLE_EXPERIMENTAL_COREPACK=1

  4. انشر

    ابدأ النشر. كل دفع إلى المستودع ينشر الموقع من جديد.

    النتيجة المتوقعة: يستجيب الموقع على عنوانه في Vercel، ثم على نطاقك بعد إضافته في إعدادات المشروع.

أي خادم فيه Node.js

على خادم فيه Node.js 22 أو أحدث، انسخ المجلد juicy، ثم ثبّته وابنِه وشغّله:

الطرفيةفي juicy
corepack enable
yarn install
yarn build
yarn start

يستمع على المنفذ 3030. وجّه نطاقك إليه عبر وكيل عكسي مثل Nginx أو Caddy، وأبقِه يعمل باستخدام مدير عمليات مثل pm2 أو خدمة systemd.

يتجاهل yarn start المتغير PORT. على مضيف يحدد المنفذ بنفسه، أخبره أن التطبيق يستمع على 3030، أو شغّله بـ yarn next start -p $PORT.

الموقع لا يستجيب على خدمة استضافة

Docker

الصورة نفسها التي تشغّلها محليًا تعمل على الخادم. تقدّم بناءً مستقلًا على المنفذ 3030 ولا تحتاج إلى أي متغيرات. على الخادم، من المجلد juicy:

الطرفيةفي juicy
docker build -t juicy .
docker run -d --restart unless-stopped --name juicy -p 3030:3030 juicy

يعيد --restart unless-stopped تشغيلها بعد إعادة تشغيل الخادم. وجّه نطاقك إلى المنفذ 3030 عبر وكيل عكسي. وأي مضيف يشغّل حاوية من ملف Dockerfile يستطيع بناءها بالطريقة نفسها.

لتحديث الموقع، ابنِ الصورة مرة أخرى، ثم استبدل الحاوية:

الطرفيةفي juicy
docker build -t juicy .
docker rm -f juicy
docker run -d --restart unless-stopped --name juicy -p 3030:3030 juicy

التالي

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.