التطبيقات الحديثة باستخدام OpenShift ، الجزء 1: تطبيقات الويب في أمرين فقط

بدأنا سلسلة من المنشورات التي سنعرض لك فيها كيفية نشر تطبيقات الويب الحديثة مثل React أو Angular إلى Red Hat OpenShift باستخدام صورة أداة إنشاء S2I (المصدر إلى الصورة) الجديدة.







ما الذي يأتي في هذه السلسلة من المشاركات:



  • 1: - ;
  • 2: S2I HTTP-, NGINX, OpenShift -;
  • 3: OpenShift .




بادئ ذي بدء ، نحتاج إلى تثبيت OpenShift. سنستخدم minishift ، الذي يسمح لك بتشغيل OpenShift في جهاز افتراضي على أجهزة كمبيوتر Windows أو Mac أو Linux. للحصول على يديك على minishift ، قم بتنزيل Red Hat Container Development Kit (CDK) واتبع هذه الإرشادات لتثبيتها وتشغيلها. ويمكن الاطلاع على مزيد من المعلومات في CDK الوثائق والمستندات على OKD.io الموقع .



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



$ oc login

$ oc new-project web-apps


هذا يفترض أن لديك Node.js 8+ و npm 5.2+ مثبتين بالفعل.



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



ما هو تطبيق الويب الحديث؟



بادئ ذي بدء ، نحتاج إلى تحديد ما نعنيه بـ "تطبيق الويب الحديث" وكيف يختلف عن ما يسمى بتطبيق Node.js "النقي".



بالنسبة لنا ، فإن تطبيق الويب الحديث هو شيء مثل React أو Angular أو Ember ، مع خطوة بناء تنشئ HTML و JavaScript و CSS ثابتًا. أثناء مرحلة الإنشاء ، يتم عادةً تنفيذ العديد من المهام ، مثل التسلسل والترجمة (Babel أو Typescript) ، وتصغير الملف. كل إطار من الأطر الرئيسية لديه عملية البناء الخاصة به وخط الأنابيب ، لكن أدوات مثل Webpack و Grunt و Gulp تندرج أيضًا في هذه الفئة. وجميع هذه الأدوات تستخدم Node.js لتشغيل عمليات البناء.



ومع ذلك ، فإن المحتوى الثابت الذي تم إنشاؤه (تجميعه) في هذه المرحلة لا يحتاج بالضرورة إلى عملية عقدة لخدمته. نعم ، يمكنك استخدام شيء مثل وحدة الخدمة هنا ، وهو أمر رائع للتطوير لأنه يتيح لك رؤية شكل الموقع بسرعة. ولكن بالنسبة لعمليات نشر الإنتاج ، يوصى عادةً باستخدام شيء مثل NGINX أو خادم Apache HTTP.



من ناحية أخرى ، سيستخدم تطبيق العقدة "الخالص" عملية Node.js للبدء ويمكن أن يكون شيئًا مثل تطبيق Express.js (أي خادم واجهة برمجة تطبيقات REST) ​​- لا يحتوي عادةً على خطوة إنشاء (نعم نعم ، نحن على دراية بنسخة مطبوعة). لا يتم عادةً تثبيت تبعيات التطوير ، لأننا نحتاج فقط إلى تلك التي تُستخدم لتشغيل التطبيق.



يمكنك أن تقرأ عن كيفية نشر تطبيق عقدة "خالص" على OpenShift باستخدام صورة Node.js S2I الخاصة بنا ، على سبيل المثال ، هنا .



نشر تطبيق ويب على OpenShift



الآن بعد أن حددنا الفرق بين تطبيق الويب الحديث وتطبيق Node.js ، دعنا نوضح لك كيفية نشر تطبيق الويب الخاص بنا بالفعل على OpenShift.



سنقوم هنا بنشر تطبيق React وتطبيق Angular حديث. يمكن إنشاء كلا المشروعين بسرعة كبيرة باستخدام أدوات CLI المناسبة: إنشاء تطبيق تفاعل والزاوي/ cli. سيكون هذا أحد الأمرين اللذين يظهران في عنوان هذه المقالة.



رد فعل التطبيق



إذا تم تثبيت تطبيق create-react-app بالفعل عالميًا ، فهذا رائع. إذا لم يكن كذلك ، فما عليك سوى تشغيل الأمر المناسب باستخدام npx ، مثل هذا:



$ npx create-react-app react-web-app


ملاحظة: npx عبارة عن عداء أوامر لمرة واحدة مضمّن مع npm 5.2+ ، انظر هنا للحصول على التفاصيل .



سينشئ هذا الأمر تطبيق React جديدًا ، ويجب أن ترى شيئًا كهذا على الشاشة:







بافتراض أنك في دليل المشروع الذي تم إنشاؤه حديثًا ، يمكنك تشغيل الأمر الثاني لنشر تطبيقنا على OpenShift:



$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose


الآن ستبدو وحدة التحكم OpenShift كما يلي:







وهذه هي وحدة تحكم الويب بعد تشغيل التطبيق:







قبل الانتقال إلى تطبيق Angular ، دعنا نلقي نظرة على ما يفعله أمرنا الأخير.



يبدأ بـ nodeshift npx - هنا نقوم بتشغيل وحدة nodeshift باستخدام npx ، مما يجعل من السهل نشر تطبيقات العقدة على OpenShift.



الآن دعنا نحلل الخيارات التي تم تمريرها إلى nodeshift. الأول هو --strictSSL = خطأ.



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



يأتي بعد ذلك الخيار الطويل --dockerImage = nodeshift / ubi8-s2i-web-app --imageTag = 10.x. تقول nodeshift استخدام جديدة صورة تطبيق ويب باني مع علامة 10.X.



الآن نقول لصورة S2I أننا نريد استخدام الغزل: --build.env YARN_ENABLED = صحيح. أخيرًا ، تخبر علامة --expose nodeshift بإنشاء مسار OpenShift لنا حتى نتمكن من الحصول على عنوان URL يمكن الوصول إليه عبر الويب لتطبيقنا.



نظرًا لأن هذه مقالة في OpenShift في سلسلة Swift ، تستخدم صورة S2I هنا وحدة الخدمة لخدمة الملفات الثابتة التي تم إنشاؤها. في المنشور التالي ، سنوضح كيفية استخدام صورة S2I نفسها مع NGINX.



التطبيق الزاوي



لنقم الآن بإنشاء تطبيق Angular. تتمثل الخطوة الأولى في إنشاء تطبيقنا الجديد باستخدام Angular CLI. مرة أخرى ، إذا لم يكن مثبتًا على مستوى العالم ، فيمكنك البدء باستخدام npx:



$ npx @angular/cli new angular-web-app


سيُنشئ هذا الأمر مشروع Angular جديدًا ، وكما هو الحال مع تطبيق React ، نقوم فقط بتشغيل أمر آخر لنشره:



$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose


على غرار حالة React ، ستبدو وحدة تحكم الويب OpenShift كما يلي:







وهذه ، على التوالي ، هي وحدة تحكم الويب عند تشغيل التطبيق:







الآن دعونا نلقي نظرة على أمر النشر. إنه مشابه جدًا لـ React ، لكن هناك اختلافات مهمة.



الاختلافات في علم build.env: بالنسبة إلى Angular نكتب --build.env OUTPUT_DIR = dist / angular-web-app ، وهناك نقطتان هنا.



أولاً ، قمنا بإزالة متغير YARN_ENABLED لأننا لا نستخدم الغزل في مشروع Angular الخاص بنا.



ثانيًا ، أضفنا المتغير OUTPUT_DIR = dist / angular-web-app. لذلك ، ستبحث صورة S2I افتراضيًا عن التعليمات البرمجية المترجمة في دليل الإنشاء. تستخدم React build افتراضيًا ، لذلك لم نقم بتهيئة هذه المعلمة في المثال السابق. لكن Angular تستخدم أشياء أخرى لإخراجها المترجم. لذلك ، نكتب أن المعلمة ist / <PROJECT_NAME> في حالتنا تساوي dist / angular-web-app.



خاتمة



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



React:



$ npx create-react-app react-web-app

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose


الزاوي:



$ npx @angular/cli new angular-web-app

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose


مصادر إضافية



لقد رأيت اليوم كيفية نشر تطبيق ويب حديث بسرعة وبسهولة على OpenShift باستخدام صورة S2I Web App Builder الجديدة. تستخدم أمثلةنا نسخة المجتمع من هذه الصورة ، لكن Red Hat أصدرت بالفعل Red Hat Openshift Application Runtime (RHOAR) ، لذا كن حذرًا.



في المنشور التالي ، سنوضح لك كيفية استخدام صورة S2I جديدة مع صورة خادم HTTP موجودة مثل NGINX ، باستخدام سلسلة بناء OpenShift لتنظيم عمليات نشر الإنتاج.



سيركز الجزء الثالث من هذه السلسلة على كيفية تنظيم سير عمل التطوير لتطبيق ما على منصة OpenShift.



نوصي أيضًا بتنزيل ومراجعة الكتاب الإلكتروني المجاني Deploying to OpenShift .



All Articles