Hoe om VueJS + NodeJS + MongoDB-toepassing in Docker te verpak

Soos u uit die vorige artikel kan sien, het ek met verskillende projekte gewerk. Die eerste dae in 'n nuwe span verloop gewoonlik op dieselfde manier: die backender gaan sit na my en voer die magiese stappe uit om die toepassing te installeer en te ontplooi. Docker is onontbeerlik vir front-end ontwikkelaars, want. Die agterkant word dikwels in 'n wye reeks PHP/Java/Python/C#-stapels geskryf en die voorkant hoef nie elke keer die aandag van die agterkant af te lei om alles te installeer en te ontplooi nie. Slegs op een plek het ek 'n klomp Docker-Jenkins gesien met 'n deursigtige ontplooiing, logs, geskroef met outotoetse.

Daar is baie gedetailleerde artikels oor docker geskryf. Hierdie artikel sal fokus op die implementering van 'n enkelbladsy-toepassing met VueJS / Vue Router, die bedienerdeel in die vorm van 'n RESTful API met NodeJS, en MongoDB word as 'n databasis gebruik. Docker Compose word gebruik om verskeie houertoepassings te beskryf en uit te voer.

Hoekom jy Docker nodig het

Docker laat jou toe om die proses van die implementering van 'n toepassing te outomatiseer. Die ontwikkelaar hoef nie meer programme op sy eie te installeer nie, hanteer weergawe-onversoenbaarheid op sy masjien. Dit is genoeg om Docker te installeer en 1-2 opdragte in die konsole in te tik. Dit is die gerieflikste om dit op Linux te doen.

Aan die begin

Stel Docker en Docker skryf

Vouerstruktuur

Ons skep 2 dopgehou vir kliënt- en bedienertoepassings. 'n Lêer met die .yml-uitbreiding is 'n config Docker Komponeerwaar die toepassingshouers gedefinieer en gekoppel word.
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

Ons skep 3 dienste in docker: vir NodeJS, MongoDB en vir statika op Vue. Om kliënt aan bediener te koppel bygevoeg hang af van bediener. Om MongoDB met die bediener-API te koppel, gebruik skakels mongo. Bediener, kliënt, mongo is die name van die dienste.

VueJS kliënt

In vouer /kliënt die toepassing is op VueJS geleë. Aansoek geskep met sien cli. Wanneer 'n beeld gebou word, word die kliënttoepassing in 'n stel statiese lêers in 'n gids ingebou /afstand. Die Dockerfile beskryf 'n stel opdragte vir die bou van 'n beeld:

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

Let daarop dat package.json afsonderlik van die res van die projeklêers gekopieer en geïnstalleer word. Dit word gedoen vir prestasie sodat die inhoud van die /node_modules-lêergids gekas word tydens herbou. Elke opdragreël word afsonderlik gekas.

Aan die einde, wanneer die houer begin word, word die opdrag uitgevoer npm run dev. Hierdie opdrag word beskryf in package.json:

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

Om lêers vanaf 'n gids te laat loop /afstand, wêreldwyd ingestel http-server, en in dev-afhanklikhede pakket spa-http-serverom Vue Router reg te laat werk. Die --push-state vlag herlei na index.html. Die -c vlag met 'n waarde van 1 sekonde is bygevoeg http-bediener het nie skrifte gekas nie. Dit is 'n toetsvoorbeeld, op 'n regte projek is dit beter om nginx te gebruik.

Skep 'n veld in die Vuex-winkel apiHost: 'http://localhost:3000', waar die NodeJS Api-poort geskryf is. Die kliënt deel is gereed. Nou gaan alle versoeke van die kliënt na die agterkant na hierdie url.

NodeJS Server API

In vouer /server skep bediener.js en Dockerfile:

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

В bediener.js aangedui url vir databasis const url = 'mongodb://mongo:27017/';. Ons laat kruisdomeinversoeke van die kliënt toe:

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

Gevolgtrekking

Gaan nou na die projekgids en hardloop docker-compose build vir beelding en docker-compose up houers te laat loop. Die opdrag sal 3 houers lig: bediener, kliënt, mongo. Vir 'n NodeJS-bediener kan u warm herlaai konfigureer deur dit aan die gebruikersgids te koppel. En die kliënt is onder ontwikkeling om plaaslik te loop met warm herlaai, afsonderlik bediener и Mongo. Om 'n aparte diens te begin, spesifiseer net die naam daarvan docker-compose up client. Moenie vergeet om dit soms te doen nie prune en die verwydering van houers (houers), netwerke (netwerke) en beelde (beelde) om hulpbronne vry te maak.

Jy kan die volledige kode sien hier. Die projek is nog in ontwikkeling.

Bron: will.com