Kuinka pakata VueJS + NodeJS + MongoDB -sovellus Dockeriin

Kuten edellisestä artikkelista voi ymmärtää, työskentelin eri projekteissa. Ensimmäiset päivät uudessa tiimissä menevät yleensä samalla tavalla: backender istuu kanssani ja suorittaa taianomaisia ​​toimintoja sovelluksen asentamiseksi ja käyttöönottamiseksi. Docker on korvaamaton käyttöliittymäkehittäjille, koska... Taustaosa on usein kirjoitettu useilla PHP/Java/Python/C#-pinoilla, eikä etuosan tarvitse häiritä taustaa joka kerta asentaakseen ja ottaakseen käyttöön kaiken. Vain yhdessä paikassa näin Docker-Jenkins-yhdistelmän, jossa oli läpinäkyvä käyttöönotto, lokit ja automaattiset testit.

Dockerista on kirjoitettu monia yksityiskohtaisia ​​artikkeleita. Tässä artikkelissa puhutaan yhden sivun sovelluksen käyttöönotosta VueJS/Vue Routerin avulla, palvelinosa on RESTful API:n muodossa NodeJS:n kanssa ja MongoDB:tä käytetään tietokantana. Docker Composea käytetään useiden säilösovellusten määrittämiseen ja suorittamiseen.

Miksi Dockeria tarvitaan

Dockerin avulla voit automatisoida sovelluksen käyttöönottoprosessin. Kehittäjän ei enää tarvitse asentaa ohjelmia itse tai käsitellä versioiden yhteensopimattomuutta koneessaan. Sinun tarvitsee vain asentaa Docker ja kirjoittaa 1-2 komentoa konsoliin. Kätevin tapa tehdä tämä on Linuxissa.

Aloittaminen

Asettaa Satamatyöläinen ja Docker säveltää

Kansion rakenne

Luomme 2 kansiota asiakas- ja palvelinsovelluksille. Tiedosto, jonka tunniste on .yml, on konfiguraatio Docker Compose, jossa sovellussäilöt on määritelty ja liitetty.
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

Luomme Dockeriin kolme palvelua: NodeJS:lle, MongoDB:lle ja staattisille Vuelle. Lisätty yhdistämään asiakas palvelimeen riippuu palvelimesta. Linkitä MongoDB palvelimen sovellusliittymään käyttämällä linkit mongo. Palvelin, asiakas, mongo - palveluiden nimet.

VueJS asiakas

Kansiossa /asiakas Sovellus perustuu VueJS:ään. Sovellus luotiin käyttämällä Vue Cli. Kuvaa rakennettaessa asiakassovellus on sisäänrakennettu kansion staattisten tiedostojen joukkoon / dist. Dockerfile kuvaa joukon komentoja kuvan rakentamiseen:

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

Huomaa, että package.json kopioidaan ja asennetaan erillään muista projektitiedostoista. Tämä tehdään suorituskyvyn vuoksi, jotta /node_modules-kansion sisältö tallennetaan välimuistiin, kun rakennetaan uudelleen. Jokainen komentorivi tallennetaan välimuistiin erikseen.

Lopuksi, kun kontti käynnistyy, komento suoritetaan npm run dev. Tämä komento on kuvattu paketissa package.json:

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

Tiedostojen suorittaminen kansiosta / dist, asennettu maailmanlaajuisesti http-server, ja dev-riippuvuuksissa paketti spa-http-serverjotta Vue Router toimii oikein. Lippu --push-state ohjaa osoitteeseen index.html. Lippu -c, jonka arvo on 1 sekunti, lisättiin http-palvelin ei tallentanut skriptejä välimuistiin. Tämä on testiesimerkki; todellisessa projektissa on parempi käyttää nginxiä.

Vuex-myymälässä luomme kentän apiHost: 'http://localhost:3000', johon NodeJS Api -portti on rekisteröity. Asiakasosa on valmis. Nyt kaikki asiakkaan pyynnöt takaisin menevät tähän URL-osoitteeseen.

NodeJS-palvelimen API

Kansiossa /server luoda server.js ja Dockerfile:

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

В server.js ilmoitettu url tietokantaa varten const url = 'mongodb://mongo:27017/';. Verkkotunnusten välisten pyyntöjen salliminen asiakkaalta:

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

Johtopäätös

Nyt mennään projektihakemistoon ja ajaa docker-compose build kuvien rakentamiseen ja docker-compose up ajamaan kontteja. Joukkue nostaa 3 konttia: palvelin, asiakas, mongo. NodeJS-palvelimelle voit määrittää hot-reloadin linkittämällä sen käyttäjäkansioon. Ja kehitteillä oleva asiakas tulisi käynnistää paikallisesti kuumalla uudelleenlatauksella, joka toimii erikseen palvelin и mongo. Aloita erillinen palvelu määrittämällä sen nimi docker-compose up client. Älä unohda tehdä sitä joskus prune ja säiliöiden, verkkojen ja kuvien poistaminen resurssien vapauttamiseksi.

Näet koko koodin täällä. Hanke on vielä kehitteillä.

Lähde: will.com