Cumu impacchetta l'applicazione VueJS + NodeJS + MongoDB in Docker

Comu pudete vede da l'articulu precedente, aghju travagliatu cù diversi prughjetti. I primi ghjorni in una nova squadra sò generalmente u listessu modu: u backender si mette à mè è eseguisce i passi magichi per installà è implementà l'applicazione. Docker hè indispensabile per i sviluppatori front-end, perchè. U backend hè spessu scrittu in una larga gamma di stacks PHP/Java/Python/C# è u fronte ùn hà micca bisognu di distractà a volta ogni volta per installà è implementà tuttu. Solu in un locu aghju vistu una mansa di Docker-Jenkins cù un dispiegamentu trasparente, logs, struttu cù autotests.

Molti articuli detallati sò stati scritti nantu à docker. Questu articulu hà da fucalizza nantu à implementà una Applicazione Single Page cù VueJS / Vue Router, a parte di u servitore in forma di una API RESTful cù NodeJS, è MongoDB hè utilizatu cum'è una basa di dati. Docker Compose hè adupratu per descriverà è eseguisce parechje applicazioni di container.

Perchè avete bisognu di Docker

Docker permette di automatizà u prucessu di implementà una applicazione. U sviluppatore ùn hà più bisognu di stallà i prugrammi nantu à u so propiu, trattà cù l'incompatibilità di versione in a so macchina. Hè abbastanza per installà Docker è scrivite cumandamenti 1-2 in a cunsola. Hè più còmuda di fà questu in Linux.

si principia

Stallà Docker e Docker cumpone

Struttura di cartulare

Creemu 2 cartulare per l'applicazioni cliente è servitore. Un schedariu cù l'estensione .yml hè una cunfigurazione Docker Composeinduve i cuntenituri di l'applicazione sò definiti è ligati.
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

Creemu 3 servizii in docker: per NodeJS, MongoDB è per statics in Vue. Per cunnette u cliente à u servitore aghjuntu dipende da u servitore. Per ligà MongoDB cù l'API di u servitore, utilizate ligami mongo. Server, client, mongo sò i nomi di i servizii.

Cliente VueJS

In u cartulare /cliente l'applicazione si trova nantu à VueJS. Applicazione creata cù vue cli. Quandu custruisce una maghjina, l'applicazione cliente hè integrata in un inseme di schedarii statici in un cartulare / dist. U Dockerfile descrive un set di cumandamenti per custruisce una maghjina:

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

Nota chì package.json hè copiatu è installatu separatamente da u restu di i schedarii di u prugettu. Questu hè fattu per u funziunamentu per chì u cuntenutu di u cartulare / node_modules hè in cache in a ricustruzione. Ogni linea di cumanda hè in cache separatamente.

À a fine, quandu u cuntinuu hè cuminciatu, u cumandamentu hè eseguitu npm run dev. Stu cumandamentu hè descrittu in package.json:

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

Per eseguisce i schedari da un cartulare / dist, stabilitu globalmente http-server, è in u pacchettu dev-dependencies spa-http-serverper fà Vue Router travaglià currettamente. A bandiera --push-state redirige à index.html. A bandiera -c cù un valore di 1 secondu hè stata aghjunta http-server ùn hà micca cache scripts. Questu hè un esempiu di prova, in un veru prughjettu hè megliu aduprà nginx.

Crea un campu in a tenda Vuex apiHost: 'http://localhost:3000', induve u portu NodeJS Api hè scrittu. A parte di u cliente hè pronta. Avà tutte e dumande da u cliente à u back-end vanu à questu url.

NodeJS Server API

In u cartulare /server crià server.js è Dockerfile:

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

В server.js indicatu indirizzu per a basa di dati const url = 'mongodb://mongo:27017/';. Permettemu e dumande cross-domain da u cliente:

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

cunchiusioni

Avà andate à u cartulare di u prughjettu è eseguite docker-compose build per l'imaghjini è docker-compose up per fà cullà i cuntenituri. U cumandimu alzarà 3 cuntenituri: servitore, cliente, mongo. Per un servitore NodeJS, pudete cunfigurà hot-reload liendu à u cartulare di l'utilizatori. È u cliente hè in sviluppu per eseguisce in u locu cù ricaricamentu caldu, in esecuzione separatamente servore и mongo. Per inizià un serviziu separatu, basta à specificà u so nome docker-compose up client. Ùn vi scurdate di fà qualchì volta prune è caccià cuntenituri (contenituri), rete (rete) è imagine (imaghjini) per liberà risorse.

Pudete vede u codice sanu ccà. U prugettu hè sempre in sviluppu.

Source: www.habr.com