Docker-da VueJS + NodeJS + MongoDB ilovasini qanday paketlash mumkin

Docker-da VueJS + NodeJS + MongoDB ilovasini qanday paketlash mumkin
Oldingi maqoladan tushunganingizdek, men turli loyihalar ustida ishladim. Yangi jamoada birinchi kunlar odatda xuddi shunday o'tadi: yordamchi men bilan o'tiradi va dasturni o'rnatish va joylashtirish uchun sehrli harakatlar qiladi. Docker front-end ishlab chiquvchilari uchun ajralmas, chunki... Backend ko'pincha PHP/Java/Python/C# steklarining keng assortimentida yoziladi va old qism hamma narsani o'rnatish va joylashtirish uchun har safar backendni chalg'itishi shart emas. Faqat bir joyda men shaffof joylashtirish, jurnallar va avtomatlashtirilgan testlar bilan Docker-Jenkins kombinatsiyasini ko'rdim.

Docker haqida ko'plab batafsil maqolalar yozilgan. Ushbu maqolada VueJS/Vue Router yordamida bitta sahifali ilovani o'rnatish haqida so'z boradi, server qismi NodeJS bilan RESTful API shaklida va MongoDB ma'lumotlar bazasi sifatida ishlatiladi. Docker Compose bir nechta konteyner ilovalarini aniqlash va ishga tushirish uchun ishlatiladi.

Nima uchun sizga Docker kerak?

Docker ilovani joylashtirish jarayonini avtomatlashtirish imkonini beradi. Ishlab chiquvchi endi dasturlarni mustaqil ravishda o'rnatishi yoki o'z mashinasida versiyalar mos kelmasligi bilan shug'ullanishi shart emas. Sizga kerak bo'lgan yagona narsa Docker-ni o'rnatish va konsolga 1-2 buyruqni kiritishdir. Buning eng qulay usuli Linuxda.

Ishni boshlash

O'rnatish Docker va Docker tuzadi

Papka tuzilishi

Mijoz va server ilovalari uchun 2 papka yaratamiz. .yml kengaytmali fayl konfiguratsiya hisoblanadi Docker tuzish, bu erda dastur konteynerlari aniqlanadi va bog'lanadi.
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

Biz Docker-da 3 ta xizmat yaratamiz: NodeJS, MongoDB va Vue-da statik xizmatlar uchun. Mijozni serverga ulash uchun qo'shilgan serverga bog'liq. MongoDB-ni server API bilan bog'lash uchun foydalaning havolalar mongo. Server, mijoz, mongo - xizmatlar nomlari.

VueJS mijozi

Jildda / mijoz Ilova VueJS-ga asoslangan. Ilova yordamida yaratilgan Vue Cli. Tasvirni yaratishda mijoz ilovasi papkadagi statik fayllar to'plamiga o'rnatilgan /tuman. Dockerfile tasvirni yaratish uchun buyruqlar to'plamini tavsiflaydi:

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"]

E'tibor bering, package.json boshqa loyiha fayllaridan alohida nusxalanadi va o'rnatiladi. Bu /node_modules papkasining mazmuni qayta qurishda keshlangan bo'lishi uchun ishlash sabablari uchun amalga oshiriladi. Har bir buyruq qatori alohida keshlanadi.

Nihoyat, konteyner ishga tushganda, buyruq bajariladi npm run dev. Bu buyruq package.json da tasvirlangan:


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

Jilddagi fayllarni ishga tushirish uchun /tuman, global o'rnatilgan http-server, va dev-bog'liqlarda paket spa-http-serverVue Router to'g'ri ishlashi uchun. --push-state bayrog'i index.html ga yo'naltiradi. 1 soniya qiymatiga ega -c bayrog'i qo'shildi http-server skriptlarni keshlashmagan. Bu sinov namunasi; haqiqiy loyihada nginx dan foydalanish yaxshiroqdir.

Vuex do'konida biz maydon yaratamiz apiHost: 'http://localhost:3000', bu erda NodeJS Api porti ro'yxatdan o'tgan. Mijoz qismi tayyor. Endi mijozdan orqa tomonga barcha so'rovlar ushbu url-ga o'tadi.

NodeJS server API

Jildda /server yaratmoq server.js va Dockerfile:


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

Π’ server.js ko'rsatilgan url ma'lumotlar bazasi uchun const url = 'mongodb://mongo:27017/';. Mijozning domenlararo so'rovlariga ruxsat berish:


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));
  });

xulosa

Endi loyiha katalogiga o'tamiz va ishga tushamiz docker-compose build tasvirlarni yaratish uchun va docker-compose up konteynerlarni ishga tushirish uchun. Jamoa 3 ta konteynerni ko'taradi: server, mijoz, mongo. NodeJS serveri uchun uni foydalanuvchi papkasiga ulash orqali issiq qayta yuklashni sozlashingiz mumkin. Va ishlab chiqilayotgan mijoz alohida ishlaydigan issiq qayta yuklash bilan mahalliy sifatida ishga tushirilishi kerak server ΠΈ Mongo. Alohida xizmatni ishga tushirish uchun uning nomini ko'rsatish kifoya docker-compose up client. Ba'zida buni qilishni unutmang prune va resurslarni bo'shatish uchun konteynerlar, tarmoqlar va tasvirlarni o'chirish.

To'liq kodni ko'rishingiz mumkin shu yerda. Loyiha hali ham ishlab chiqilmoqda.

Manba: www.habr.com

a Izoh qo'shish