Kuidas VueJS + NodeJS + MongoDB rakendust Dockeris pakendada

Nagu eelmisest artiklist näha, töötasin erinevate projektidega. Esimesed päevad uues meeskonnas kulgevad tavaliselt samamoodi: backender istub minu juurde ja teeb rakenduse installimiseks ja juurutamiseks maagilisi samme. Docker on esiotsa arendajatele asendamatu, sest. Taustaprogramm on sageli kirjutatud laias valikus PHP/Java/Python/C# virnades ja esiosa ei pea iga kord tagakülje tähelepanu kõrvale juhtima, et kõike installida ja juurutada. Ainult ühes kohas nägin hunnikut läbipaistva paigaldusega, palkidega, automaattestidega kruvitud Docker-Jenkinse.

Dockeri kohta on kirjutatud palju üksikasjalikke artikleid. See artikkel keskendub ühe lehe rakenduse juurutamisele, kasutades VueJS-i / Vue ruuterit, serveriosa RESTful API kujul koos NodeJS-iga ja andmebaasina kasutatakse MongoDB-d. Docker Compose'i kasutatakse mitme konteinerirakenduse kirjeldamiseks ja käitamiseks.

Miks vajate Dockerit

Docker võimaldab teil automatiseerida rakenduse juurutamise protsessi. Arendaja ei pea enam iseseisvalt programme installima, tegelema oma masina versioonide sobimatusega. Piisab Dockeri installimisest ja konsooli 1-2 käsu tippimisest. Kõige mugavam on seda teha Linuxis.

Alustamine

Komplekt laevalaadija ja Dockeri koostamine

Kausta struktuur

Loome 2 kausta kliendi- ja serverirakenduste jaoks. Yml-laiendiga fail on konfiguratsioon Docker lookus rakenduse konteinerid on määratletud ja lingitud.
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

Loome dockeris 3 teenust: NodeJS, MongoDB ja Vue staatika jaoks. Kliendi ühendamiseks serveriga on lisatud oleneb serverist. MongoDB linkimiseks serveri API-ga kasutage lingid mongo. Server, klient, mongo on teenuste nimed.

VueJS klient

Kaustas /klient rakendus asub VueJS-is. Rakendus loodud rakendusega vue cli. Pildi koostamisel on klientrakendus sisse ehitatud kaustas olevate staatiliste failide komplekti /dist. Dockerfile kirjeldab pildi koostamiseks mõeldud käskude komplekti:

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

Pange tähele, et package.json kopeeritakse ja installitakse ülejäänud projektifailidest eraldi. Seda tehakse jõudluse tagamiseks, nii et kausta /node_modules sisu salvestatakse ümberehitamisel vahemällu. Iga käsurida salvestatakse vahemällu eraldi.

Lõpuks, kui konteiner käivitatakse, täidetakse käsk npm run dev. Seda käsku kirjeldatakse failis package.json:

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

Failide käivitamiseks kaustast /dist, globaalselt määratud http-serverja dev-dependencies paketis spa-http-serveret Vue ruuter korralikult töötaks. Lipp --push-state suunab aadressi index.html. Lisatud on lipp -c väärtusega 1 sekund http-server ei salvestanud skripte vahemällu. See on testnäide, pärisprojekti puhul on parem kasutada nginxi.

Looge Vuexi poes väli apiHost: 'http://localhost:3000', kus on kirjutatud NodeJS Api port. Kliendiosa on valmis. Nüüd lähevad kõik kliendi päringud tagaotsa sellele URL-ile.

NodeJS serveri API

Kaustas /server luua server.js ja Dockerfile:

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

В server.js näidatud URL andmebaasi jaoks const url = 'mongodb://mongo:27017/';. Lubame kliendilt domeenideüleseid päringuid:

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

Järeldus

Nüüd minge projektikataloogi ja käivitage docker-compose build pildistamiseks ja docker-compose up konteinerite käitamiseks. Käsk tõstab 3 konteinerit: server, klient, mongo. NodeJS-serveri puhul saate konfigureerida kiirlaadimise, linkides selle kasutajakaustaga. Ja klient on arendamisel, et töötada kohapeal eraldi kuuma uuesti laadimisega server и Mongo. Eraldi teenuse käivitamiseks määrake lihtsalt selle nimi docker-compose up client. Ärge unustage seda mõnikord teha prune ja konteinerite (konteinerite), võrkude (võrkude) ja kujutiste (pildid) eemaldamine ressursside vabastamiseks.

Näete täielikku koodi siin. Projekt on alles väljatöötamisel.

Allikas: www.habr.com