ProHoster > Блог > Administracija > Kako upakovati VueJS + NodeJS + MongoDB aplikaciju u Docker

Kako upakovati VueJS + NodeJS + MongoDB aplikaciju u Docker

Kako upakovati VueJS + NodeJS + MongoDB aplikaciju u Docker
Kao što možete vidjeti iz prethodnog članka, radio sam na različitim projektima. Prvi dani u novom timu obično idu na isti način: backender sjeda do mene i izvodi čarobne korake za instalaciju i implementaciju aplikacije. Docker je nezamjenjiv za front-end programere, jer. Pozadinska strana je često napisana u širokom rasponu PHP/Java/Python/C# stekova i prednji deo ne mora da odvlači pažnju pozadi svaki put da bi sve instalirao i primenio. Samo na jednom mjestu sam vidio gomilu Docker-Jenkinsa sa transparentnim deploymentom, logovima, zeznutim autotestovima.

O Dockeru je napisano dosta detaljnih članaka. Ovaj članak će se fokusirati na implementaciju Single Page Application koristeći VueJS / Vue Router, serverski dio u obliku RESTful API-ja sa NodeJS-om, a MongoDB se koristi kao baza podataka. Docker Compose se koristi za opisivanje i pokretanje više kontejnerskih aplikacija.

Zašto vam treba Docker

Docker vam omogućava automatizaciju procesa postavljanja aplikacije. Programer više ne mora sam da instalira programe, već se bavi nekompatibilnošću verzija na svom računaru. Dovoljno je instalirati Docker i upisati 1-2 komande u konzolu. Najpogodnije je to učiniti na Linuxu.

Počinjemo

Instalirajte doker i docker compose

Struktura foldera

Kreiramo 2 foldera za klijentske i serverske aplikacije. Datoteka sa ekstenzijom .yml je konfiguracija Docker Composegdje su kontejneri aplikacije definirani i povezani.
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 docker-u kreiramo 3 servisa: za NodeJS, MongoDB i za statiku na Vue-u. Za povezivanje klijenta sa serverom dodano zavisi od servera. Da povežete MongoDB sa serverskim API-jem, koristite linkovi mongo. Server, klijent, mongo su nazivi servisa.

VueJS klijent

U mapi /klijent aplikacija se nalazi na VueJS. Aplikacija kreirana sa vue cli. Prilikom izrade slike, klijentska aplikacija je ugrađena u skup statičkih datoteka u folderu /dist. Dockerfile opisuje skup naredbi za pravljenje 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 projektnih datoteka. Ovo se radi radi performansi tako da se sadržaj foldera /node_modules kešira pri ponovnoj izgradnji. Svaka komandna linija se posebno kešira.

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


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

Za pokretanje datoteka iz foldera /dist, globalno postavljen http-server, iu paketu dev-dependencies spa-http-serverda Vue Router radi ispravno. Oznaka --push-state preusmjerava na index.html. Dodata je zastavica -c sa vrijednošću od 1 sekunde http-server nije keširao skripte. Ovo je probni primjer, na stvarnom projektu bolje je koristiti nginx.

Kreirajte polje u Vuex prodavnici apiHost: 'http://localhost:3000', gdje je upisan NodeJS Api port. Klijentski dio je spreman. Sada svi zahtjevi od klijenta prema pozadinskom dijelu idu na ovaj url.

NodeJS Server API

U mapi /server stvoriti server.js i Dockerfile: 


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

В server.js naznačeno url za bazu podataka const url = 'mongodb://mongo:27017/';. Dozvoljavamo zahtjeve za više domena 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 idite u direktorij projekta i pokrenite docker-compose build za snimanje i docker-compose up za pokretanje kontejnera. Komanda će podići 3 kontejnera: server, klijent, mongo. Za NodeJS server, možete konfigurirati hot-reload tako što ćete ga povezati sa korisničkim folderom. I klijent je u razvoju za lokalno pokretanje sa vrućim ponovnim učitavanjem, odvojeno server и mongo. Da biste pokrenuli zasebnu uslugu, samo navedite njen naziv docker-compose up client. Ne zaboravite to ponekad učiniti prune i uklanjanje kontejnera (kontejnera), mreža (mreža) i slika (slika) radi oslobađanja resursa.

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

izvor: www.habr.com

Dodajte komentar