ProHoster > Dienoraštis > Administravimas > Kaip supakuoti „VueJS + NodeJS + MongoDB“ programą „Docker“.

Kaip supakuoti „VueJS + NodeJS + MongoDB“ programą „Docker“.

Kaip supakuoti „VueJS + NodeJS + MongoDB“ programą „Docker“.
Kaip supratote iš ankstesnio straipsnio, dirbau su įvairiais projektais. Pirmosios dienos naujoje komandoje paprastai praeina taip pat: su manimi atsisėda backender ir atlieka magiškus veiksmus, kad įdiegtų ir diegtų programą. „Docker“ yra būtinas priekinės dalies kūrėjams, nes... Užpakalinė programa dažnai rašoma įvairiuose PHP/Java/Python/C# kaminuose, o priekinė dalis neturi kiekvieną kartą atitraukti užpakalinės dalies, kad būtų galima viską įdiegti ir įdiegti. Tik vienoje vietoje mačiau „Docker-Jenkins“ derinį su skaidriu diegimu, žurnalais ir automatizuotais testais.

Apie Docker parašyta daug išsamių straipsnių. Šiame straipsnyje bus kalbama apie vieno puslapio programos diegimą naudojant VueJS / Vue Router, serverio dalis yra RESTful API su NodeJS forma, o MongoDB naudojama kaip duomenų bazė. „Docker Compose“ naudojama kelioms konteinerio programoms apibrėžti ir paleisti.

Kodėl Docker reikalingas

„Docker“ leidžia automatizuoti programos diegimo procesą. Kūrėjui nebereikia pačiam diegti programų ar spręsti versijų nesuderinamumo savo kompiuteryje. Viskas, ką jums reikia padaryti, tai įdiegti „Docker“ ir į konsolę įvesti 1–2 komandas. Patogiausias būdas tai padaryti yra Linux.

Darbo pradžia

Nustatyti dokininkas ir Docker komponuoti

Aplanko struktūra

Sukuriame 2 aplankus kliento ir serverio programoms. Failas su plėtiniu .yml yra konfigūracija "Docker Compose", kur apibrėžiami ir susieti taikomųjų programų konteineriai.
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

Sukuriame 3 paslaugas Docker: NodeJS, MongoDB ir statinėms Vue. Pridėta norint prijungti klientą prie serverio priklauso nuo serverio. Norėdami susieti MongoDB su serverio API, naudokite nuorodos mongo. Serveris, klientas, mongo – paslaugų pavadinimai.

VueJS klientas

Aplanke /klientas Programa yra pagrįsta VueJS. Programa buvo sukurta naudojant Vue Cli. Kuriant vaizdą, kliento programa yra integruota į statinių failų rinkinį aplanke /dist. „Dockerfile“ aprašo komandų rinkinį vaizdui kurti:

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

Atminkite, kad paketas.json yra nukopijuotas ir įdiegiamas atskirai nuo kitų projekto failų. Tai daroma dėl našumo priežasčių, kad aplanko /node_modules turinys būtų išsaugotas talpykloje vėl kuriant. Kiekviena komandų eilutė talpykloje saugoma atskirai.

Galiausiai, kai konteineris paleidžiamas, komanda vykdoma npm run dev. Ši komanda aprašyta pakete.json:


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

Norėdami paleisti failus iš aplanko /dist, įdiegta visame pasaulyje http-server, o dev-priklausomybėse paketą spa-http-serverkad „Vue Router“ veiktų tinkamai. Žymėjimas --push-state nukreipia į index.html. Prie pridėta vėliavėlė -c, kurios reikšmė yra 1 sekundė http-serveris nepaliko talpyklos scenarijų. Tai yra bandomasis pavyzdys realiame projekte geriau naudoti nginx.

Vuex parduotuvėje sukuriame lauką apiHost: 'http://localhost:3000', kur užregistruotas NodeJS Api prievadas. Kliento dalis yra paruošta. Dabar visos kliento užklausos nukreipiamos į šį URL.

NodeJS serverio API

Aplanke /server sukurti server.js ir Dockerfile: 


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

В server.js nurodytas URL duomenų bazei const url = 'mongodb://mongo:27017/';. Kliento kelių domenų užklausų leidimas:


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

išvada

Dabar eikime į projekto katalogą ir paleiskite docker-compose build vaizdams kurti ir docker-compose up paleisti konteinerius. Komanda pakels 3 konteinerius: serveris, klientas, mongo. Jei naudojate NodeJS serverį, galite sukonfigūruoti greitąjį įkėlimą, susiedami jį su vartotojo aplanku. O kuriamas klientas turėtų būti paleistas lokaliai su karštu perkrovimu, veikiant atskirai serveris и Mongo. Norėdami pradėti atskirą paslaugą, tiesiog nurodykite jos pavadinimą docker-compose up client. Nepamirškite kartais tai padaryti prune ir konteinerių, tinklų ir vaizdų ištrynimas, kad būtų atlaisvinti ištekliai.

Galite pamatyti visą kodą čia. Projektas vis dar vystomas.

Šaltinis: www.habr.com

Добавить комментарий