Kako zapakirati aplikacijo VueJS + NodeJS + MongoDB v Docker

Kot lahko razumete iz prejšnjega članka, sem delal na različnih projektih. Prvi dnevi v novi ekipi ponavadi potekajo enako: backender se usede z mano in izvede čarobna dejanja za namestitev in uvajanje aplikacije. Docker je nepogrešljiv za front-end razvijalce, ker ... Zaledje je pogosto napisano v širokem razponu skladov PHP/Java/Python/C# in sprednjemu delu ni treba vsakič motiti zaledja, da bi vse namestilo in uvedlo. Samo na enem mestu sem videl kombinacijo Docker-Jenkins s pregledno uvedbo, dnevniki in avtomatiziranimi testi.

O Dockerju je bilo napisanih veliko podrobnih člankov. Ta članek bo govoril o uvajanju enostranske aplikacije z uporabo VueJS/Vue Router, strežniški del je v obliki API-ja RESTful z NodeJS, MongoDB pa se uporablja kot baza podatkov. Docker Compose se uporablja za definiranje in izvajanje več vsebniških aplikacij.

Zakaj je Docker potreben

Docker vam omogoča avtomatizacijo postopka uvajanja aplikacije. Razvijalcu ni več treba samostojno nameščati programov ali se ukvarjati z nezdružljivostjo različic na svojem računalniku. Vse kar morate storiti je, da namestite Docker in vnesete 1-2 ukaza v konzolo. Najprimernejši način za to je v sistemu Linux.

Prvi koraki

Set Lučki delavec in Docker sestavi

Struktura mape

Ustvarimo 2 mapi za odjemalske in strežniške aplikacije. Datoteka s pripono .yml je konfiguracija Docker Compose, kjer so vsebniki aplikacij definirani in 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

V Dockerju ustvarjamo 3 storitve: za NodeJS, MongoDB in za statične v Vue. Dodano za povezavo odjemalca s strežnikom odvisno od strežnika. Za povezavo MongoDB s strežniškim API-jem uporabite povezave mongo. Strežnik, odjemalec, mongo - imena storitev.

Odjemalec VueJS

V mapi /odjemalec Aplikacija temelji na VueJS. Aplikacija je bila ustvarjena z uporabo Vue Cli. Pri gradnji slike je odjemalska aplikacija vgrajena v niz statičnih datotek v mapi /dist. Dockerfile opisuje nabor ukazov za izdelavo 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"]

Upoštevajte, da se package.json kopira in namesti ločeno od preostalih datotek projekta. To je narejeno zaradi zmogljivosti, tako da se vsebina mape /node_modules shrani v predpomnilnik pri ponovni gradnji. Vsaka ukazna vrstica je ločeno predpomnjena.

Končno, ko se vsebnik zažene, se ukaz izvede npm run dev. Ta ukaz je opisan v package.json:

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

Za zagon datotek iz mape /dist, nameščen globalno http-serverin v odvisnostih za razvijalce paket spa-http-servertako da Vue Router deluje pravilno. Zastavica --push-state preusmeri na index.html. Dodana je bila zastavica -c z vrednostjo 1 sekunde http-strežnik ni predpomnil skriptov. To je testni primer; na resničnem projektu je bolje uporabiti nginx.

V trgovini Vuex ustvarimo polje apiHost: 'http://localhost:3000', kjer so registrirana vrata NodeJS Api. Stranski del je pripravljen. Zdaj gredo vse zahteve odjemalca nazaj na ta url.

API strežnika NodeJS

V mapi /server ustvariti server.js in Dockerfile:

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

В server.js označeno url za bazo podatkov const url = 'mongodb://mongo:27017/';. Omogočanje zahtev med domenami odjemalca:

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ček

Zdaj pa pojdimo v imenik projekta in zaženimo docker-compose build za sestavljanje slik in docker-compose up za vodenje kontejnerjev. Ekipa bo dvignila 3 kontejnerje: strežnik, odjemalec, mongo. Za strežnik NodeJS lahko konfigurirate vroče ponovno nalaganje tako, da ga povežete z uporabniško mapo. Odjemalca v razvoju je treba zagnati lokalno z vročim ponovnim nalaganjem, ki se izvaja ločeno strežnik и mongo. Če želite zagnati ločeno storitev, samo navedite njeno ime docker-compose up client. Ne pozabite to narediti včasih prune in brisanje vsebnikov, omrežij in slik za sprostitev virov.

Ogledate si lahko celotno kodo tukaj. Projekt je še v razvoju.

Vir: www.habr.com