كيفية حزم تطبيق VueJS + NodeJS + MongoDB في Docker

كما ترون من المقال السابق ، لقد عملت مع مشاريع مختلفة. عادةً ما تسير الأيام الأولى في فريق جديد بنفس الطريقة: تقع الواجهة الخلفية أمامي وتنفذ إجراءات سحرية لتثبيت التطبيق ونشره. عامل الميناء أمر لا غنى عنه لfrontenderov ل الخلفية غالبا ما هو مكتوب على مجموعة واسعة من مداخن PHP / جافا / بيثون / C # و الجبهة ليست ضرورية في كل مرة لصرف بيك التي تضع كل شيء ونشر. في مكان واحد فقط ، رأيت مجموعة من Docker-Jenkins مع نشر وسجلات شفافة ، مشدود بواسطة الاختبارات الذاتية.

وقد كتب الكثير من المقالات التفصيلية حول عامل ميناء. سوف تركز هذه المقالة على نشر تطبيق صفحة واحدة باستخدام VueJS / Vue Router ، وهو جزء الخادم باعتباره واجهة برمجة تطبيقات RESTful مع NodeJS ، ويستخدم MongoDB كقاعدة بيانات. وصف وتشغيل تطبيقات متعددة، وتستخدم حاويات عامل الميناء إنشاء.

لماذا أحتاج إلى عامل ميناء

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

الابتداء

تثبيت Docker و Docker يؤلف

هيكل المجلد

نقوم بإنشاء مجلدين لتطبيقات العميل والخادم. الملف ذو الملحق .yml هو تكوين Docker حيث يتم تعريف حاويات التطبيق وربطها.
عامل الميناء-compose.yml:

version: "3" services: mongo: container_name: mongo hostname: mongo image: mongo ports: - "27017:27017" server: build: server/ #command: node ./server.js #   CMD  Dockerfile  /server ports: - "3000:3000" links: - mongo client: build: client/ #command: http-server ./dist #   CMD  Dockerfile  /client network_mode: host ports: - "8089:8089" depends_on: - server 

ننشئ 3 خدمات في عامل الميناء: NodeJS و MongoDB ولإحصائيات الإحصاء على Vue. لتوصيل العميل بالخادم ، يعتمد على إضافة الخادم . تستخدم الروابط mongo لربط MongoDB بواجهة برمجة تطبيقات الخادم. أسماء الخدمات - الخادم، العميل، مونغو.

العميل على VueJS

يحتوي المجلد / العميل على التطبيق على VueJS. تم إنشاء التطبيق باستخدام Vue Cli . عند إنشاء الصورة ، يتم إنشاء تطبيق العميل في مجموعة من الملفات الثابتة في المجلد / dist . يصف Dockerfile مجموعة من الأوامر لإنشاء صورة:

 FROM node:10 WORKDIR /client COPY ./package*.json ./ RUN npm install RUN npm install -g http-server COPY . . RUN npm run build EXPOSE 8081 CMD ["npm", "test:dev"] 

يرجى ملاحظة أن package.json يتم نسخها وتثبيتها بشكل منفصل عن بقية ملفات المشروع. يتم ذلك من أجل الأداء ، بحيث يتم تخزين محتويات المجلد / node_modules مؤقتًا عند تكرار الإنشاء. يتم تخزين كل سطر أوامر بشكل منفصل.

أخيرًا ، عند بدء npm run dev الحاوية ، يتم تنفيذ الأمر npm run dev . يوصف هذا الأمر في package.json:

 "scripts": { "test:dev": "http-server dist -p 8081 -c 1 --push-state" } -Server شعبة نظم -p "scripts": { "test:dev": "http-server dist -p 8081 -c 1 --push-state" } 

لتشغيل الملفات من المجلد / dist ، http-server تثبيت http-server مستوى العالم ، ويتم إعداد حزمة spa-http-server في تبعيات dev بحيث يعمل Vue Router بشكل صحيح. إعادة توجيه علامة حالة الحالة إلى index.html. تتم إضافة علامة -c بقيمة ثانية واحدة بحيث لا يقوم http-server بتخزين البرامج النصية مؤقتًا. هذه حالة اختبار ؛ من الأفضل استخدام nginx في مشروع حقيقي.

في متجر Vuex ، قم بإنشاء apiHost: 'http://localhost:3000' ، حيث يتم تسجيل منفذ NodeJS Api. الجزء العميل جاهز. الآن جميع الطلبات من العميل إلى الخلف انتقل إلى هذا الرابط.

خادم NodeJS API

في المجلد /server ، قم بإنشاء server.js و Dockerfile:

 FROM node:10 WORKDIR /server COPY ./package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"] 

يحدد Server.js عنوان url لقاعدة البيانات const url = 'mongodb://mongo:27017/'; . نحن نسمح لطلبات المجال المشترك من العميل:

 const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); : const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); -Origin، clientUrl)؛ const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); (corsOptions)، (مسا، الدقة) => { const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); )، يخطئ => res.json (يخطئ))؛ const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); 

استنتاج

انتقل الآن إلى دليل المشروع وقم بتشغيل docker-compose build الصور docker-compose up لبدء الحاويات. سيرفع الأمر 3 حاويات: الخادم والعميل والمونجو . يمكن تكوين الملقم لNodeJS الساخنة تحديث، ربطه مجلد المستخدم. والعميل قيد التطوير لتشغيله محليًا مع تحديث سريع ، يعمل بشكل منفصل على الخادم والمونجو . لبدء خدمة منفصلة ، ما عليك سوى تحديد اسم docker-compose up client . تذكر أن تقوم في بعض الأحيان prune وحذف الحاويات والشبكات والصور لتحرير الموارد.

يمكن العثور على الرمز الكامل هنا . لا يزال المشروع قيد التطوير.