ProHoster > Blog > uprava > Kako pakirati VueJS + NodeJS + MongoDB aplikaciju u Docker

Kako pakirati VueJS + NodeJS + MongoDB aplikaciju u Docker

Kako pakirati VueJS + NodeJS + MongoDB aplikaciju u Docker
Kao što možete razumjeti iz prethodnog članka, radio sam na različitim projektima. Prvi dani u novom timu obično prolaze na isti način: backender sjedi sa mnom i izvodi čarobne radnje za instalaciju i implementaciju aplikacije. Docker je nezamjenjiv za front-end programere jer... Pozadina je često napisana u širokom rasponu PHP/Java/Python/C# hrpa, a prednja strana ne mora ometati pozadinu svaki put da sve instalira i implementira. Samo na jednom mjestu sam vidio kombinaciju Docker-Jenkins s transparentnom implementacijom, zapisnicima i automatiziranim testovima.

O Dockeru je napisano mnogo detaljnih članaka. Ovaj članak će govoriti o implementaciji Single Page Application koristeći VueJS/Vue Router, serverski dio je u obliku RESTful API-ja s NodeJS, a MongoDB se koristi kao baza podataka. Docker Compose koristi se za definiranje i pokretanje više aplikacija spremnika.

Zašto je Docker potreban

Docker vam omogućuje automatizaciju procesa postavljanja aplikacije. Razvojni programer više ne mora sam instalirati programe niti se baviti nekompatibilnošću verzija na svom računalu. Sve što trebate učiniti je instalirati Docker i upisati 1-2 naredbe u konzolu. Najprikladniji način za to je na Linuxu.

Početak

Postaviti Lučki radnik i Docker sastavljanje

Struktura mape

Kreiramo 2 mape za klijentske i poslužiteljske aplikacije. Datoteka s ekstenzijom .yml je config Docker Sastaviti, gdje su spremnici aplikacije definirani i pridruženi.
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

U Dockeru kreiramo 3 servisa: za NodeJS, MongoDB i za statičke u Vue. Dodano za povezivanje klijenta s poslužiteljem ovisi o poslužitelju. Za povezivanje MongoDB-a s API-jem poslužitelja koristite linkovi mongo. Server, klijent, mongo - imena usluga.

VueJS klijent

U mapi /klijent Aplikacija se temelji na VueJS. Aplikacija je izrađena pomoću Vue Cli. Prilikom izrade slike, klijentska aplikacija ugrađena je u skup statičkih datoteka u mapi /dist. Dockerfile opisuje skup naredbi za izradu slike:

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

Imajte na umu da se package.json kopira i instalira odvojeno od ostalih datoteka projekta. Ovo je učinjeno radi performansi, tako da se sadržaj mape /node_modules sprema u predmemoriju prilikom ponovne izgradnje. Svaki naredbeni redak zasebno je predmemoriran.

Na kraju, kada se spremnik pokrene, naredba se izvršava npm run dev. Ova naredba je opisana u package.json:


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

Za pokretanje datoteka iz mape /dist, instaliran globalno http-server, a u dev-dependencies paket spa-http-servertako da Vue Router radi ispravno. Oznaka --push-state preusmjerava na index.html. Dodana je zastavica -c s vrijednošću od 1 sekunde http-poslužitelj nije spremio skripte u predmemoriju. Ovo je probni primjer; na stvarnom projektu bolje je koristiti nginx.

U Vuex trgovini kreiramo polje apiHost: 'http://localhost:3000', gdje je registriran NodeJS Api port. Klijentski dio je spreman. Sada svi zahtjevi od klijenta prema natrag idu na ovaj url.

API poslužitelja NodeJS

U mapi /server stvoriti poslužitelj.js i Dockerfile: 


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

В poslužitelj.js naznačeno uRL za bazu podataka const url = 'mongodb://mongo:27017/';. Dopuštanje zahtjeva među domenama od klijenta:


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

Zaključak

Sada idemo u direktorij projekta i pokrenimo se docker-compose build za konstruiranje slika i docker-compose up za pokretanje kontejnera. Tim će podići 3 kontejnera: poslužitelj, klijent, mongo. Za NodeJS poslužitelj možete konfigurirati vruće ponovno učitavanje povezivanjem s korisničkom mapom. A klijent u razvoju trebao bi se pokrenuti lokalno s vrućim ponovnim učitavanjem, pokrenuti odvojeno server и Mongo. Za pokretanje zasebne usluge samo navedite njezin naziv docker-compose up client. Ne zaboravite to učiniti ponekad prune i brisanje spremnika, mreža i slika radi oslobađanja resursa.

Možete vidjeti cijeli kod ovdje. Projekt je još uvijek u razvoju.

Izvor: www.habr.com

Dodajte komentar