مقدمة

يمكن أن يكون نشر تطبيق الويب Next.js على الإنتاج أمرًا مبسطًا وفعالاً عند الاستفادة من مسارات AWS (Amazon Web Services) Elastic Beanstalk وDocker وCI/CD مع AWS Code Build وCode Deploy وGitLab. سيرشدك هذا الدليل خلال عملية إعداد مسار نشر حديث للتأكد من أن تطبيقك قوي وقابل للتطوير وسهل الصيانة.

المتطلبات الأساسية

قبل الغوص في عملية النشر، تأكد من أن لديك:

• حساب جذر AWS أو حساب IAM مع إذن لإنشاء بيئات Elastic Beanstalk داخل AWS

• تم تثبيت Docker على جهازك المحلي

• حساب GitLab أو GitHub مع مستودع لتطبيق Next.js الخاص بك

• مشروع Next.js جاهز للنشر

الخطوة 1: إعداد AWS Elastic Beanstalk

• إنشاء بيئة Elastic Beanstalk - قم بتسجيل الدخول إلى وحدة الإدارة في AWS، وانتقل إلى Elastic Beanstalk، وقم بإنشاء تطبيق جديد.

• أدخل اسم التطبيق الخاص بك وانقر على إنشاء.

• بعد إنشاء التطبيق، حان الوقت الآن لإنشاء البيئة الجديدة. انقر فوق إنشاء بيئة جديدة.

• اختر بيئة خادم الويب. سيكون لاسم البيئة اللاحقة env مع اسم التطبيق الخاص بك، ويمكنك تعديله إذا رغبت في ذلك.

• أدخل اسم البيئة الصالح مع المجال. أدخل اسم النطاق .

• اختر المنصة المناسبة. في هذه الحالة، سنختار Managed Platform وDocker كمنصة.

• في كود التطبيق، اختر نموذج التطبيق لأننا سننشر الكود الخاص بنا من خلال AWS Code Pipeline.

• في الإعدادات المسبقة، يمكنك ترك الأمر افتراضيًا، ومع ذلك، بالنسبة لتطبيقات الإنتاج، فمن المستحسن استخدام مثيل التوفر العالي. بمجرد تحديد الإعداد المسبق، انقر فوق "التالي".

• قم بإنشاء أو استخدام دور الخدمة الحالي الخاص بك. من المهم أن يكون لديك دور خدمة Elastic Beanstalk بالإضافة إلى إعداد دور خدمة EC2 قبل متابعة إنشاء مثيل EC2.
  ومع ذلك، إذا كنت ترغب في إدخال SSH إلى مثيل EC2 من جهازك الطرفي، فقم بإضافة زوج مفاتيح EC2، وقم بإنشاء ملف تعريف مثيل EC2 لتنفيذ العمليات الضرورية.

• اختر VPC الخاص بك الذي تريد نشر مثيل EC2 الخاص بك فيه.

• بعد تحديد VPC، اختر الشبكة الفرعية في كل منطقة توافر خدمات. لتشغيل موازن التحميل والمثيلات في نفس الشبكات الفرعية العامة، قم بتعيين عناوين IP عامة للمثيلات كما هو موضح في الصورة.

• بما أننا لا نحتاج إلى تكوين قاعدة بيانات، فيمكننا المتابعة إلى الخطوة التالية من خلال النقر على التالي.

• بالنسبة لحجم الجذر، سنختار SSD للأغراض العامة.

• الآن، من مجموعة الأمان، يمكنك إما الاختيار من مجموعة أمان موجودة بالفعل أو تركها كما هي، وسوف تقوم Elastic Beanstalk بإنشاء واحدة لك أثناء إعداد مثيل EC2.

• في حالة النشر لأغراض الإنتاج، فمن المستحسن دائمًا تكوين القياس التلقائي وتحديد نوع المثيل الذي ستنشئه Elastic Beanstalk لخدمة حركة المرور. سوف نذهب مع عائلة t3.

• اضغط على التالي.

• في التقارير الصحية، سنتبع التقارير الأساسية، ولكن لا تتردد في الاختيار من بين الخيارات المتاحة بناءً على نوع التقرير الذي تحتاجه.

• سنقوم أيضًا بإلغاء تحديد تحديثات النظام الأساسي المُدارة لأنها غير مطلوبة للموقع التجريبي.

• احتفظ بباقي الإعدادات كما هي وانقر على التالي.

• أخيرًا، راجع التغييرات وانقر على إرسال.

• ستطلق Elastic Beanstalk بيئتك، وسيستغرق الأمر بعض الوقت.

• بعد الإطلاق الناجح، ستظهر لك شاشة التهاني.

الخطوة 2: إنشاء تطبيق Next.js الخاص بك (أو استخدام تطبيق موجود)

• لإنشاء تطبيق Next.js، افتح جهازك الطرفي، وأدخل القرص المضغوط في الدليل الذي ترغب في إنشاء التطبيق فيه، وقم بتشغيل الأمر التالي:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

إذا كان لديك بالفعل رمزك الحالي جاهزًا، فيمكنك الانتقال إلى الجزء التالي

• لديك الآن دليل جديد يسمى nextjs-blog. دعونا القرص المضغوط في ذلك:

cd nextjs-blog 

ثم قم بتشغيل الأمر التالي:

npm run dev 

يؤدي هذا إلى تشغيل "خادم تطوير" تطبيق Next.js (المزيد حول هذا لاحقًا) على المنفذ 3000.

دعونا نتحقق لمعرفة ما إذا كان يعمل. افتح http://localhost:3000 في متصفحك.

• حان الوقت الآن لإنشاء ملف Dockerfile داخل التطبيق.

• قم بإنشاء ملف باسم Dockerfile في جذر التطبيق الخاص بك وأضف الكود التالي:
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

• بعد إجراء التغييرات، من المهم التحقق من نجاح عملية الإنشاء. ابدأ تشغيل محرك الإرساء وقم بتشغيل الأمر التالي:

docker build -t testapp . 

بمجرد نجاح الإنشاء، قم بتشغيل التطبيق باستخدام الأمر أدناه:

docker run -p 3000:3000 testapp 

• قم بإنشاء ملف باسم buildspec.yml في جذر التطبيق الخاص بك وقم بإضافة الكود التالي. سيتم استخدام هذا الملف في مرحلة لاحقة عند إعداد مسار التعليمات البرمجية داخل AWS.

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• بعد إضافة هذه الملفات إلى التعليمات البرمجية الجديدة أو الموجودة لديك، ادفع هذه التغييرات إلى المستودع البعيد على Gitlab أو GitHub.

الخطوة 3: خط أنابيب رمز الإعداد

• قم بتسجيل الدخول إلى وحدة الإدارة في AWS، وانتقل إلى Code Pipeline، وانقر على إنشاء مسار.

• أدخل اسمًا صالحًا لخط الأنابيب واختر وضع التنفيذ لخط الأنابيب. في حالتنا، سنختار في قائمة الانتظار (يتطلب نوع خط الأنابيب V2).

• قم بإنشاء دور خدمة جديد إذا لم يكن موجودًا بالفعل أو اختر من دور الخدمة الموجود وانقر فوق التالي.

• من مزود المصدر، حدد المكان الذي قمت بتخزين عناصرك فيه. سوف نختار "Gitlab".

• من قائمة الاتصال، حدد اتصالاً موجودًا أو قم بإنشاء اتصال جديد.

• بمجرد نجاح الاتصال، حدد اسم المستودع والفرع الذي سيتم استخدام الكود منه.

• بالنسبة لنوع المشغل، سنختار بلا مرشح ثم نضغط على التالي.

• بعد ذلك، نختار موفر البناء. في حالتنا، سنختار AWS Code Build. حدد المنطقة أو اتركها لمنطقة AWS الافتراضية.

• ثم قم بإنشاء مشروع جديد في Code Build بالنقر فوق إنشاء مشروع. سيؤدي هذا إلى فتح نافذة جديدة. أدخل اسم المشروع واترك كل شيء داخل البيئة افتراضيًا.

• عند تحديد مواصفات البناء، تأكد من تحديد استخدام ملف buildspec. وهذا هو نفس الملف الذي أنشأناه سابقًا. اترك الإعدادات الأخرى كإعداد افتراضي وانتقل إلى الخطوة التالية.

• عند النقر على متابعة مسار التعليمات البرمجية، ستغلق النافذة تلقائيًا وتعيدك إلى شاشة مسار التعليمات البرمجية.

• حدد نوع البناء كبناء فردي وانقر على التالي.

• في مرحلة إضافة النشر، حدد موفر النشر. في هذه الحالة، سيكون AWS Elastic Beanstalk هو المكان الذي نريد نشر التطبيق فيه أخيرًا.

• حدد اسم التطبيق واسم البيئة وقم بتكوين إعدادات التراجع وانقر فوق "التالي". قم بمراجعة إعدادات مسار التعليمات البرمجية وانقر فوق "إنشاء خط أنابيب".

الخطوة 4: الموقع الإلكتروني مباشر!

يعد نشر تطبيق الويب Next.js على الإنتاج أمرًا سهلاً حقًا ويمكن تنفيذه بكفاءة أكبر باستخدام مسارات AWS Elastic Beanstalk وDocker وCI/CD باستخدام AWS Code Build وCode Deploy وGitLab.

يمكنك الوصول إليه باستخدام عنوان URL المقدم من Elastic Beanstalk. قم بإجراء التغييرات محليًا وسيتم نشرها تلقائيًا عند الانتقال إلى فرعك.

ترميز سعيد!!