حل مشكلة عدم خدمة Angular على Docker مع Nginx و EC2

من المعروف أن استضافة تطبيقات الويب تتطلب بضعة خطوات أساسية لتحسين الأداء والوظائف. ومع استخدام Amazon Web Services (AWS)، يمكن للمطورين الاستفادة من بيئة سحابية مرنة وقوية لتشغيل تطبيقاتهم. في هذا المقال، سنناقش قضية شائعة يواجهها المطورون عند محاولة استضافة تطبيقات Angular باستخدام Nginx على Docker وEC2، حيث يتعذر عليهم تحميل أي ملف بخلاف index.html.

مشكلتي في استضافة تطبيق Angular

منذ فترة، واجهت مشكلة مع تطبيق Angular الخاص بي، والذي كنت أرغب في استضافته على مثيل EC2. نظرًا للقيود الأمنية المفروضة، لم أتمكن من استخدام موقع ويب ثابت على S3. استخدمت طريقة بناء صورة Docker من خلال ملف عامل الإرساء، وكان من المفترض أن تكون العملية سلسة. ولكن بعد تشغيل التطبيق، وجدت أن الصفحة الوحيدة التي يتم تحميلها بنجاح هي index.html، وكل محاولاتي للوصول إلى الملفات الثابتة الأخرى أسفرت عن نتائج 404.

خطوات بناء الصورة باستخدام Docker

الخطوة الأولى كانت إنشاء صورة Docker من خلال ملف عامل الإرساء. بدأت ببدء بنية التطبيق باستخدام Node.js، حيث قمت بتحميل الحزم الضرورية وتشغيل عملية البناء. ثم انتقلت إلى المرحلة الثانية، وهي استخدام Nginx لتقديم الملف الناتج. اليك الكود الأساسي الخاص بالملف:

### المرحلة 1: البناء ###
من العقدة:22.5.1-alpine3.20 AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
RUN npm run build
### المرحلة 2: التشغيل ###
من nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/front-app/browser /usr/share/nginx/html

ملف Nginx وتكويناته الأساسية

عملت أيضًا على إعداد ملف Nginx الخاص بالتوجيه، والذي كان مسؤولاً عن تحديد كيفية التعامل مع الطلبات الواردة. كان المحتوى كما يلي:

http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

على الرغم من التكوينات التي قمت بها، عند تشغيل الأمر docker run، وجدت أن index.html يتم تقديمها بنجاح، لكني لم أستطع الحصول على أي من الملفات الثابتة الأخرى، مثل الصور أو ملفات CSS.

تحليل المشكلة

قد تكون المشكلة مرتبطة بعدة عوامل. أولًا، يجب التأكد من أنه تم بناء التطبيق بأكمله بشكل صحيح، وأن ملفات الإنتاج فعليًا موجودة في المسار /usr/share/nginx/html. كما يجب التحقق من أن تكوين Nginx يُعيد توجيه جميع الطلبات غير المباشرة إلى index.html, مما يضمن أن التطبيق يعمل بشكل صحيح كـ SPA (تطبيق فردي الصفحات).

تجارب متعددة ونتائج متشابهة

محاولاتي السابقة بدون استخدام Docker أسفرت عن نفس النتائج، وكذلك الانتقال إلى استخدام Apache بدلاً من Nginx لم يُحسن الوضع. حتى التجارب مع استضافة الملفات الثابتة على S3 عادت بنفس النتيجة. كان كل ذلك يترك إحساسًا بالإحباط، خصوصًا وأن التطبيق يعمل بشكل جيد على البيئة المحلية.

استنتاجات وحلول محتملة

بناءً على تحليل المشكلة، من المهم التركيز على توفير البيئة المثلى لتطبيق Angular. من الضروري ضمان تضمين جميع الملفات الضرورية وتكوين Nginx بشكل صحيح. يمكن النظر أيضًا في خيارات مثل استخدام CloudFront لتخزين الملفات الثابتة وتسريع عملية التحميل.

عند التعامل مع مشكلات مثل تلك، يعد التواصل مع المجتمع ومشاركة الخبرات مفتاحًا إيجابيًا للوصول إلى الحلول. يمكن أن تكون الحلول للمشكلات المعقدة موجودة في تفاصيل صغيرة لم يتم ملاحظتها.

في الختام، تظل عملية استضافة تطبيقات Angular باستخدام Nginx على Docker وEC2 موضوعًا مثيرًا للتحديات، لكن بالعناية والدراسة، يمكن تجاوز العوائق والحصول على تطبيق يعمل بشكل مثالي.