في المشروعات المتوسطة والكبيرة ، لا يقتصر الموقع على خدمة واحدة - على سبيل المثال ، موقع فقط ، كقاعدة عامة ، هناك قاعدة بيانات ، API ، خادم يقوم بتوجيه الطلبات إلى جميع هذه الخدمات. ليس من السهل نشر كل هذا وتحديثه دون أي توحيد ، كما أن التوسع في العديد من الخوادم أكثر صعوبة.
Docker ، التي أصبحت المعيار الفعلي في عالم تطبيقات التغليف والتسليم والنشر ، ستساعدنا في حل هذه المشكلة.
يسمح لنا Docker بلف تطبيق أو خدمة بكافة التبعيات والإعدادات في حاوية معزولة ، مما يضمن اتساق المحتوى على أي منصة.
كتطبيق isomorphic ، سوف نستخدم إطار عمل Nuxt.js ، الذي يتكون من Vue.js و Node.js ، مما يسمح لنا بكتابة تطبيقات الويب العالمية مع التقديم من جانب الخادم (SSR).
يرجع هذا الاختيار إلى التفضيل الشخصي ، ولكن بنفس الطريقة ، يمكنك اتخاذ أي إطار آخر ، على سبيل المثال Next.js.
نقوم بجمع ونشر الصورة الأولى.
بادئ ذي بدء ، تحتاج إلى تكوين المنفذ والمضيف داخل التطبيق. هناك عدة
طرق للقيام بذلك ، وسوف نستخدم الإعدادات في package.json بإضافة قسم جديد:
"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }
لمزيد من الإجراءات ، نحتاج إلى عامل تثبيت ، عامل تثبيت ، مثبت في النظام ومحرر بمشروع مفتوح.
قم بإنشاء ملف Dockerfile الذي وضعناه في الجذر ووصف الإرشادات الخاصة ببناء الصورة.
نحتاج إلى إنشاء الصورة استنادًا إلى صورة الإصدار 10 من Node.js ، وفي هذه الحالة يتم استخدام الإصدار الخفيف من جبال الألب:
FROM node:10-alpine
ثم قم بتعيين متغير البيئة باسم الدليل:
ENV APP_ROOT /web
تعيين كدليل العمل وإضافة المصدر:
WORKDIR ${APP_ROOT} ADD . ${APP_ROOT}
تثبيت التبعيات وبناء التطبيق:
RUN npm ci RUN npm run build
ونكتب أمر إطلاق التطبيق داخل الصورة:
CMD ["npm", "run", "start"]
Dockerfile FROM node:10-alpine ENV APP_ROOT /web ENV NODE_ENV production WORKDIR ${APP_ROOT} ADD . ${APP_ROOT} RUN npm ci RUN npm run build CMD ["npm", "run", "start"]
بعد ذلك ، افتح المجلد الحالي في الجهاز وجمع الصورة:
docker build -t registry.gitlab.com/vik_kod/nuxtjs_docker_example .
قم بتشغيل الصورة محليًا للتحقق من أن كل شيء يعمل بشكل صحيح:
docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example
الذهاب إلى
المضيف المحلي: 3000 ، يجب أن نرى ما يلي:
عظيم! أطلقنا بنجاح إنتاج بناء التطبيق على الجهاز المحلي.
نحن الآن بحاجة إلى نشر الصورة إلى مستودع عامل ميناء من أجل استخدام الصورة المجمعة الانتهاء على الخادم الهدف. يمكنك استخدام مستودع مستضاف ذاتيًا أو أي مستودع آخر ، على سبيل المثال ،
hub.docker.com الرسمي.
سأستخدم المستودع في gitlab ، علامة التبويب مع مستودعات عامل ميناء هناك تسمى التسجيل. في السابق ، قمت بالفعل بإنشاء مستودع للمشروع ، لذا أقوم الآن بتنفيذ الأمر:
docker push registry.gitlab.com/vik_kod/nuxtjs_docker_example
بعد إقلاع الصورة بنجاح ، يمكنك البدء في تكوين خادم VPS ،
الألغام هي كما يلي:
- 1 غيغابايت من ذاكرة الوصول العشوائي
- 4 النوى
- محرك 30 جيجابايت
انتهزت الفرصة أيضًا لتثبيت عامل التشغيل فورًا عند إنشاء الخادم ، لذلك إذا لم يكن مثبتًا على VPS ، فيمكنك قراءة التعليمات على
الموقع الرسمي.بعد إنشاء الخادم ، انتقل إليه وتسجيل الدخول إلى مستودع عامل ميناء ، في حالتي gitlab:
docker login registry.gitlab.com
بعد التفويض ، يمكننا بدء التطبيق باستخدام الأمر الذي تمت مشاهدته مسبقًا:
docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example
تم تنزيل الصورة وبدء تشغيلها ، دعنا نتحقق من:
نحن نرى صورة مألوفة ، أطلقنا الحاوية مع التطبيق ، ولكن بالفعل على الخادم البعيد.
بقيت اللمسات الأخيرة ، الآن عندما يتم إغلاق الجهاز ، سيتم إيقاف الصورة ، لذلك سنضيف السمة -d لبدء الحاوية في الخلفية.
إيقاف وإعادة:
docker run -d -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example
الآن يمكننا إغلاق المحطة والتأكد من أن تطبيقنا يعمل بنجاح.
لقد حققنا ما هو مطلوب - أطلقنا التطبيق في عامل ميناء ، وهو الآن مناسب للنشر ، كصورة مستقلة وكجزء من بنية تحتية أكبر.
إضافة وكيل العكسي
في المرحلة الحالية ، يمكننا نشر مشاريع بسيطة ، ولكن ماذا لو احتجنا إلى وضع التطبيق وواجهة برمجة التطبيقات على نفس المجال ، بالإضافة إلى ذلك ، نقدم الإحصائيات وليس من خلال Node.js؟
وبالتالي ، تنشأ الحاجة إلى ما يسمى بخادم الوكيل العكسي ، والذي سيتم استلام جميع الطلبات وإعادة توجيهه وفقًا للطلب إلى الخدمات ذات الصلة.
على هذا النحو الخادم سوف نستخدم nginx.
إدارة الحاويات إذا كان هناك أكثر من واحدة على حدة ليست مريحة للغاية. لذلك ، سوف نستخدم عامل بناء السفن كوسيلة لتنظيم الحاويات وإدارتها.
أنشئ مشروعًا فارغًا جديدًا ، حيث نضيف جذره ملف docker-compose.yml ومجلد nginx.
في docker-compose.yml نكتب ما يلي:
version: "3.3" # services: # , nginx nginx: image: nginx:latest # 80 http 443 https ports: - "80:80" - "443:443" # container_name: proxy_nginx volumes: # nginx , - ./nginx:/etc/nginx/conf.d # - ./logs:/var/log/nginx/ # Nuxt.js nuxt: # image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app # ports: - "3000:3000"
في مجلد nginx ، أضف التكوين ، الذي ينصح به الموقع الرسمي
Nuxt.js ، مع تغييرات طفيفة.
nginx.conf map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; # nginx server_name localhost; # ip gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; # , # docker-compose , nuxt_app proxy_pass http://nuxt_app:3000; } }
نحن ننفذ الأمر للتشغيل:
docker-compose up
بدأ كل شيء بشكل صحيح ، والآن إذا انتقلنا إلى العنوان الذي يستمع إلى nginx ، المضيف المحلي - سنرى طلبنا ، لن تكون هناك اختلافات مرئية ، ولكن الآن جميع الطلبات تذهب إلى nginx أولاً حيث تتم إعادة توجيهها وفقًا للقواعد المحددة.
الآن ليس لدينا خدمات أو احصائيات إضافية ، دعنا نضيف مجلدًا ثابتًا سنضع فيه بعض الصور.
قم بتثبيته في حاوية nginx عن طريق إضافة خط إلى عامل التهيئة:
... container_name: proxy_nginx volumes: # - ./static:/var/www/static ...
تحديث عامل ميناء compose.yml version: "3.3" # services: # , nginx nginx: image: nginx:latest # 80 http 443 https ports: - "80:80" - "443:443" # container_name: proxy_nginx volumes: # nginx , - ./nginx:/etc/nginx/conf.d # - ./logs:/var/log/nginx/ # - ./static:/var/www/static # Nuxt.js nuxt: # image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app # ports: - "3000:3000"
ثم أضف الموقع الجديد إلى nginx.conf:
location /static/ { try_files $uri /var/www/static; }
تم تحديث nginx.conf map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; # nginx server_name localhost; # ip gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; # , # docker-compose , nuxt_app proxy_pass http://nuxt_app:3000; } location /static/ { try_files $uri /var/www/static; } }
أعد تشغيل عامل الإرساء:
docker-compose up --build
انتقل إلى
المضيف المحلي / ثابت / demo.jpg
الآن يتم تقديم الإحصائيات من خلال Nginx ، مما يؤدي إلى إزالة التحميل من Node.js في التطبيق الرئيسي.
بعد التأكد من أن كل شيء يعمل ، يمكنك نشر تجميعنا على الخادم. للقيام بذلك ، سوف أقوم بإنشاء مستودع في الدليل الحالي. بعد إضافة السجلات والمجلدات الثابتة سابقًا إلى .gitignore.
بعد ذلك ، نذهب إلى الخادم ، ونوقف صورة عامل النقل التي تم إطلاقها مسبقًا واستنساخ المستودع.
قبل بدء التجميع ، تحتاج إلى نقل المجلد الذي يحتوي على الإحصائيات إلى الخادم ، والانتقال إلى الجهاز الطرفي على الجهاز المحلي واستخدام الأداة المساعدة لسطر الأوامر scp لنقل المجلد إلى الخادم:
scp -r /Users/vik_kod/PhpstormProjects/nuxtjs_docker_proxy_example/static root@5.101.48.172:/root/example_app/
إذا كان حجم الإحصائيات كبيرًا ، فمن الأفضل أولاً ضغط المجلد وإرساله كأرشيف ، ثم فك ضغطه على الخادم. خلاف ذلك ، قد يستغرق التنزيل وقتًا طويلاً.
نعود إلى المحطة الطرفية على الخادم ونذهب إلى المجلد المستنسخ ، وقم بتشغيل الأمر:
docker-compose up -d
أغلق المحطة وانتقل إلى الموقع:
عظيم! باستخدام وكيل عكسي ، فصلنا احصائيات من التطبيق.
خطوات إضافية
كل ما قمنا به أعلاه هو خيار بسيط إلى حد ما ، في المشاريع الكبيرة تحتاج إلى النظر في المزيد من الأشياء ، أدناه قائمة قصيرة بما يمكنك القيام به بعد ذلك.
- حاويات البيانات فقط لمناطق المشرف الثابتة وتطبيقات SPA وقواعد البيانات
- خدمات إضافية لمعالجة الصور والتحسين ، على سبيل المثال
- تكامل CI / CD ، تجميع الصورة عند الضغط على الفرع المحدد ، وكذلك خدمات التحديث وإعادة التشغيل التلقائي
- قم بإنشاء مجموعة Kubernetes أو Swarm إذا كان هناك أكثر من خوادم واحدة ، لموازنة التحميل والقياس الأفقي السهل
المجموع
- لقد قمنا بنشر التطبيق على الخادم بنجاح وقمنا بإعداده لمزيد من التوسع.
- تعرفنا على عامل الميناء ووجدنا فكرة عن كيفية التفاف طلبك في حاوية.
- لقد تعلمنا ما هي الخطوات التي يمكن اتخاذها لتحسين البنية التحتية.
شفرة المصدر
التطبيقيخلطشكرا لكم على اهتمامكم وآمل أن تكون هذه المواد قد ساعدتكم!