كيفية نشر تطبيق React للإنتاج باستخدام تصميمات Docker متعددة المراحل

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

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

قبل القراءة ، يجب أن يكون لديك بعض المعرفة الأساسية بالتقنيات التالية:

  1. Node.js و npm
  2. تتفاعل
  3. عامل ميناء
  4. إنجن إكس

دعنا نفترض أنك قمت بإنشاء تطبيقك باستخدام أداة إنشاء رد فعل التطبيق على Facebook. أحد فوائد استخدام هذه الأداة هو أنها تزيل تمامًا التعقيد (الملقب بالألم) لإعداد Webpack و Babel و React.

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

عامل بناء متعدد المراحل

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

ماذا يعني هذا في سياقنا؟

تطبيق React الخاص بنا هو مشروع ويب بسيط ، يتكون من ملفات ثابتة ، مثل CSS وملفات Javascript وبعض الصور. هذا يتطلب فقط خادم الويب مثل Nginx أو Apache في وقت التشغيل.

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

لذلك دعونا نلقي نظرة على كيف يمكننا فصل هذه البيئات. لنغوص في ...

المرحلة 1: البناء

الصورة من قبل إيكر Urteaga على Unsplash

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

من العقدة: 9.11.1 مثل البناء

بعد ذلك ، نقوم بعمل دليل لتطبيقنا ونضعه كدليل عمل لدينا.

RUN mkdir / usr / src / app
WORKDIR / usr / src / app

نقوم بكشف جميع ثنائيات Node.js لمتغير بيئة PATH الخاص بنا ونسخ مشاريعنا package.json إلى دليل التطبيق. يتيح لنا نسخ ملف JSON بدلاً من دليل العمل بأكمله الاستفادة من طبقات ذاكرة التخزين المؤقت الخاصة بـ Docker.

ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json

بعد تثبيت كل شيء ، سنقوم بتثبيت تبعياتنا عن طريق تشغيل تثبيت npm. أخيرًا ، سنقوم بإعداد نصوص تفاعلية ، ونسخ مصادر التطبيق لدينا وإنشائها باستخدام بناء npm run لدينا التطبيق جاهز الآن للإنتاج.

تشغيل NPM تثبيت - الصامتة
تشغيل RP npm - تثبيت نصوص تفاعل - g - صامت
نسخة. / البيرة / SRC / التطبيق
تشغيل NPM تشغيل بناء

المرحلة 2: بيئة الإنتاج

تصوير جيلكي فانوتغيم على Unsplash

كما ذكر أعلاه كل ما نحتاجه لتشغيل التطبيق هو خادم الويب. Nginx أن تكون دقيقة. نبدأ المرحلة الثانية من خلال توسيع صورة Nginx الأساسية من المستودع الرسمي المستضاف على hub.docker.com. تستند صورة Nginx التي نستخدمها إلى Alpine Linux وهو صغير (~ 5 ميغابايت) ، وبالتالي يؤدي إلى صور أقل حجماً بشكل عام.

من nginx: 1.13.12-alpine

بعد ذلك يمكننا نسخ محتويات دليل البناء الخاص بنا إلى الدليل الذي يخدم Nginx بشكل افتراضي. يسمح لنا Docker بالإشارة إلى نتائج المرحلة الأولى عن طريق التصنيف الذي قدمناه: "build".

COPY - من = build / usr / src / app / build / usr / share / nginx / html

سيعمل Nginx على المنفذ 80 حتى نحتاج إلى كشفه. سنقوم بتعيين هذا المنفذ إلى منفذ على المضيف الذي يقوم بتشغيل الحاوية لاحقًا.

كشف 80

أخيرًا ، نحدد الأمر الافتراضي الذي سيتم تشغيل Docker عند تنفيذ الحاوية. نطلب من عامل الميناء بدء تشغيل الخادم وتوجيهه لعدم تشغيل البرنامج الخفي.

CMD ["nginx"، "-g"، "daemon off؛"]

بناء وتشغيل صورة عامل الميناء

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

عامل بناء بناء -T myapp: mytag.

لتشغيل صورتنا المخبوزة حديثًا ، نسميها أمر تشغيل عامل الميناء. نطلب من Docker تشغيل الحاوية المنفصلة في الخلفية وأخيراً تعيين المنفذ الداخلي 80 الذي تستخدمه Nginx لخدمة مشروعنا على المنفذ 3000 من النظام المضيف الذي تعمل عليه مثيل Docker لدينا.

تشغيل عامل ميناء -d -p 3000: 80 myapp: mytag

خاتمة

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

تحقق من المثال كله على github.com