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

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

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

لماذا تحتاج Docker

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

بدء

ضبط عامل في حوض السفن و Docker يؤلف

هيكل المجلد

نقوم بإنشاء مجلدين لتطبيقات العميل والخادم. الملف ذو الامتداد .yml هو ملف config دوكر يؤلفحيث يتم تعريف حاويات التطبيق وربطها.
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 خدمات في docker: لـ NodeJS و MongoDB والإحصائيات على Vue. لربط العميل بالخادم المضافة يعتمد على الخادم. لربط 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. تم وصف هذا الأمر في package.json:

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

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

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

واجهة برمجة تطبيقات خادم NodeJS

في المجلد /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));
  });

اختتام

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

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

المصدر: www.habr.com