الزاوي - كيفية قراءة معلومات البيئة في وقت التشغيل ل CI / CD

إذا كنت تستخدم NGINX كخادم ويب و Kubernetes للنشر

تصوير تيم جوو على Unsplash

يوفر Angular خيارات التكوين في وقت البناء ، مما يعني أنك بحاجة إلى تحديد ملفات بيئة مختلفة لكل بيئة ، وتتخذ Angular التكوين المناسب أثناء بناء المشروع من خلال توفير - إشارة التكوين إلى بنية ng. يمكنك التحقق من هذه المقالة حول قراءة معلومات البيئة أثناء وقت البناء.

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

  • مشروع مثال
  • المشكلة التي نواجهها
  • المحلول
  • التنفيذ
  • كيفية التصحيح
  • ملخص
  • خاتمة

مشروع مثال

هنا مشروع مثال للمظاهرة. يمكنك استنساخها وتشغيلها على جهازك.

// clone the git clone https://github.com/bbachi/angular-envread-runtime.git
// للتطوير المحلي npm start npm start

هذا مشروع Angular بسيط يقوم بتحميل app.config.json لملف التكوين من مجلد / asset.

نحن نستخدم APP_INITIALIZER لتحميل ملف app.config.json هذا قبل التمهيد واستخدام هذه الإعدادات. فيما يلي ملفات app.module.ts وملفات app.service.ts.

بمجرد تحميل الإعدادات ويمكنك قراءة هذه الإعدادات في app.component.ts مثل أدناه.

استنادًا إلى التكوين ، يمكنك رؤية لون الرأس والعنوان والجدول. على سبيل المثال ، إذا كان لون رأس بيئة التطوير باللون الأسود والعنوان هو التطوير. يمكنك مشاهدة شاشة مماثلة على النحو التالي.

شاشة التطوير

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

شاشة الإنتاج

المشكلة التي نواجهها

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

تمرير التكوين في وقت البناء

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

تمرير التكوين في وقت التشغيل

المحلول

دعونا نرى كيف يمكننا حل هذه المشكلة. إحدى طرق حل هذه المشكلة هي قراءة عنوان URL للمتصفح مع موقع window.href ووضع جميع التهيئة في التطبيق وتحميل التكوين المناسب بناءً على جزء محدد من عنوان URL مثل dev ، prod ، إلخ.

إذا كنت تستخدم Java أو Nodejs مع تطبيق Angular ، فيمكننا الحصول على هذا التكوين من الخادم قبل تشغيل التطبيق باستخدام APP_INITIALIZER. ولكن كيف نفعل ذلك إذا كنا نستخدم NGINX كخادم ويب؟

يمكننا استخدام Kubernetes configmap لإدخال التكوين في مجلد Pods المثبت في مجلد / usr / share / nginx / html / asset حتى يحصل التطبيق Angular عليه قبل تمهيد التطبيق بمساعدة APP_INITIALIZER. دعونا نلقي نظرة على الرسم البياني أدناه لفهم أفضل.

قراءة التكوين في وقت التشغيل باستخدام configmap

التنفيذ

دعونا تطبيق الحل مع كائن Kubernetes configMap. يجعل كائن ConfigMap حاوياتك المحمولة عن طريق فصل التكوين عنها. هذه هي الطريقة التي يعمل بها.

أول شيء يتعين علينا القيام به هو بناء صورة عامل الميناء ودفعها إلى DockerHub. إليك ملف Dockerfile متعدد المراحل الذي ينشئ تطبيق Angular في المرحلة الأولى ويأخذ تلك الأصول الثابتة ويضعها في المجلد الجذر في NGINX.

هذه هي التعليمات لبناء صورة Docker ودفعها إلى DockerHub. يمكنك رؤيتها بالفعل على DockerHub في الصورة التالية. هذه صورة عامة يمكنك سحبها مباشرة من التسجيل.

// build the docker build -t bbachin1 / envdemo.
// list images docker images
// Login وادفعه إلى docker hub docker login docker push bbachin1 / envdemo
دوكر هاب

الآن نحن بحاجة إلى إنشاء كائنات نشر وخدمة وتكوين. نضع كل هذه الأشياء في ملف واحد يسمى manifest.yml. نقوم بإنشاء Configmap أولاً باستخدام config.json المطلوب. إذا نظرت إلى كائن النشر ، تقوم Kubernetes بسحب الصورة أعلاه bbachin1 / envdemo من Docker Hub وإنشاء 5 نسخ متماثلة. أخيرًا ، لدينا كائن خدمة بنوع Nodeport يعرضه للعالم الخارجي.

لقد قمنا بتحميل ملف configmap في المجلد الذي تم تحميله على المسار / usr / share / nginx / html / asset / folder. نقوم بإنشاء كل هذه الكائنات في تطوير مساحة الاسم.

فيما يلي تعليمات إنشاء الكائنات والتحقق منها.

// إنشاء كائنات kubectl إنشاء -f manifest.yml
// حذف الكائنات kubectl delete -f manifest.yml
// الحصول على نشر kubectl الحصول على نشر -n التطوير
// get the service kubectl get svc-n development
// get the pods kubectl get po -n development

الحصول على عنوان Kubernetes العام من هذا الأمر kubectl الكتلة معلومات والحصول على المنفذ من كائن الخدمة kubectl الحصول على تطوير svc -n والوصول إلى التطبيق الذي يعمل في مساحة اسم التطوير بهذا العنوان http: // : / appui

منفذ الخدمة والعنوان العام

في الحالة المذكورة أعلاه ، يمكنك الوصول إلى التطبيق على http://192.168.64.6:31935/appui تأكد من التغيير من https إلى http. لاحظ أنه تم تحميل جميع التهيئة من خريطة التهيئة مثل خلفية العنواناللون والعنوان وما إلى ذلك.

تشغيل النشر على Minikube

لنقم بإنشاء نشر الإنتاج من ملف manifest-prod.yml واتباع الخطوات المذكورة أعلاه لتشغيل التطبيق في منطقتك.

// إنشاء كائنات kubectl إنشاء -f manifest-prod.yml
// حذف كائنات kubectl delete -f manifest-prod.yml
// الحصول على النشر kubectl الحصول على النشر -n الإنتاج
// get the service kubectl get svc-n production
// get the pods kubectl get po -n production

تعمل الخدمة في مساحة اسم الإنتاج في المنفذ 31633.

الخدمة تعمل في المنفذ 31633تشغيل النشر على Minikube

كيفية التصحيح

هذه هي بعض خيارات التصحيح إذا كان لديك أي مشكلة في تنفيذ هذا الحل.

أولاً ، نحتاج إلى التحقق من إنشاء ملف التهيئة بالطريقة الصحيحة وفي مساحة الاسم الصحيحة.

// تحقق مما إذا تم إنشاء configmap أم لا kubectl الحصول على cm -n التطوير
// تحقق من البيانات الموجودة في configmap kubectl تصف تطور cm-n

بمجرد التحقق من ملف التهيئة. يمكنك بعد ذلك التحقق من وحدة التخزين المحملة والمحملة بخريطة التكوين.

// get the one of pod kubectl get po -n development
// exec في واحدة من pod kubectl exec -it / bin / sh -n development # cd / usr / share / nginx / html / envapp / asset # cat app.config.json
app.config.json

ملخص

  • يوفر Angular خيارات التكوين في وقت البناء مما يعني أنك بحاجة إلى تحديد ملفات بيئة مختلفة لكل بيئة.
  • نحن بحاجة إلى بناء بمجرد تشغيل في كل مكان هي الاستراتيجية الموصى بها.
  • لا يمكننا استخدام خيار البيئة الزاوية إذا أردنا البناء مرة واحدة والنشر في كل مكان حيث يتعين علينا توفير تكوين منفصل لكل بيئة.
  • يوفر Configmap حلاً لفصل التكوين عن تشغيل الحاويات.
  • إذا كنت تقدم تطبيقك الزاوي مع NGINX وتحتاج إلى طريقة لتمرير التكوين في وقت التشغيل ، فإن ConfigMaps هو الحل الأسهل.
  • يجب عليك تحميل ملف configmap في وحدة التخزين التي يمكن تركيبها على مسار المضيف والحصول الزاوي على JSON من هذا المسار.
  • يمكنك حذف ملف التهيئة الحالي وإعادة إنشاءه ، ويمكن أن تنعكس التغييرات في الحاوية قيد التشغيل دون إعادة تشغيل الأقراص.

خاتمة

استخدم Configmaps إذا كنت تريد فصل التكوين عن حاوياتك وحقن التكوين المناسب في وقت التشغيل.