ProHoster > Блог > басқарма > Docker жүйесінде VueJS + NodeJS + MongoDB қолданбасын қалай бумалауға болады

Docker жүйесінде VueJS + NodeJS + MongoDB қолданбасын қалай бумалауға болады

Docker жүйесінде VueJS + NodeJS + MongoDB қолданбасын қалай бумалауға болады
Алдыңғы мақаладан түсінгеніңіздей, мен әртүрлі жобаларда жұмыс істедім. Жаңа командадағы алғашқы күндер әдетте дәл осылай өтеді: бэкендер менімен бірге отырады және қолданбаны орнату және орналастыру үшін сиқырлы әрекеттерді орындайды. Docker алдыңғы қатарлы әзірлеушілер үшін өте қажет, өйткені... Backend жиі PHP/Java/Python/C# стектерінің кең ауқымында жазылады және алдыңғы жағы барлығын орнату және орналастыру үшін серверді әр уақытта алаңдатудың қажеті жоқ. Тек бір жерде мөлдір орналастыру, журналдар және автоматтандырылған сынақтары бар Docker-Jenkins комбинациясын көрдім.

Docker туралы көптеген егжей-тегжейлі мақалалар жазылған. Бұл мақалада VueJS/Vue Router арқылы бір беттік қолданбаны қолдану туралы айтылады, сервер бөлігі NodeJS бар RESTful API түрінде және MongoDB дерекқор ретінде пайдаланылады. Docker Compose бірнеше контейнерлік қолданбаларды анықтау және іске қосу үшін пайдаланылады.

Docker не үшін қажет

Docker қолданбаны орналастыру процесін автоматтандыруға мүмкіндік береді. Әзірлеуші ​​бұдан былай бағдарламаларды өз бетімен орнатудың немесе оның құрылғысындағы нұсқалардың үйлеспеушілігімен күресудің қажеті жоқ. Сізге Docker орнату және консольге 1-2 пәрменді теру жеткілікті. Мұны істеудің ең қолайлы жолы - Linux.

Басталу

Орнату Докер және Docker құрастырады

Қалта құрылымы

Біз клиенттік және серверлік қосымшалар үшін 2 қалта жасаймыз. .yml кеңейтімі бар файл конфигурация болып табылады Docker құрастырыңыз, мұнда қолданба контейнерлері анықталған және байланыстырылған.
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

Біз Docker-те 3 қызметті жасаймыз: NodeJS, MongoDB және Vue-де статикалық қызметтер үшін. Клиентті серверге қосу үшін қосылды серверге байланысты. MongoDB серверін API серверімен байланыстыру үшін пайдаланыңыз сілтемелер mongo. Сервер, клиент, монго – қызмет атаулары.

VueJS клиенті

Қалтада /клиент Қолданба VueJS негізінде жасалған. Қолданба көмегімен жасалды Vue Cli. Кескінді құрастыру кезінде клиенттік қолданба қалтадағы статикалық файлдар жинағына ендірілген /аудан. 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"
}

Қалтадағы файлдарды іске қосу үшін /аудан, ғаламдық деңгейде орнатылған http-server, ал әзірлеушіге тәуелділікте бума spa-http-serverVue Router дұрыс жұмыс істеуі үшін. --push-state жалауы index.html файлына қайта бағыттайды. 1 секунд мәні бар -c жалауы қосылды http-сервер сценарийлерді кэштемеген. Бұл сынақ үлгісі; нақты жобада nginx қолданған дұрыс.

Vuex дүкенінде біз өріс жасаймыз apiHost: 'http://localhost:3000', мұнда NodeJS Api порты тіркелген. Клиент бөлігі дайын. Енді клиенттің артқы жағына барлық сұраулары осы URL мекенжайына өтеді.

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

қорытынды

Енді жоба каталогына өтіп, іске қосайық docker-compose build кескіндерді құрастыру үшін және docker-compose up контейнерлерді іске қосу. Команда 3 контейнерді көтереді: сервер, клиент, монго. NodeJS сервері үшін оны пайдаланушы қалтасына байланыстыру арқылы ыстық қайта жүктеуді конфигурациялауға болады. Ал әзірленіп жатқан клиентті жергілікті түрде ыстық қайта жүктеумен, бөлек іске қосу керек сервер и Mongo. Бөлек қызметті бастау үшін оның атын көрсетсеңіз жеткілікті docker-compose up client. Кейде мұны істеуді ұмытпаңыз prune және ресурстарды босату үшін контейнерлерді, желілерді және кескіндерді жою.

Толық кодты көре аласыз осында. Жоба әлі де әзірлену үстінде.

Ақпарат көзі: www.habr.com

пікір қалдыру