Kako zapakirati aplikacijo VueJS + NodeJS + MongoDB v Docker

Kot lahko sklepamo iz prejšnjega članka, sem delala na različnih projektih. Prvi dnevi v novi ekipi ponavadi potekajo enako: backend razvijalec se priključi k meni in izvede čarobna dejanja za namestitev in razporeditev aplikacije. Docker je nepogrešljiv za frontend razvijalce, saj je backend pogosto napisan v širokem spektru tehnologij PHP/Java/Python/C# in frontendu ni treba vsakič motiti backend razvijalca, da vse namesti in razporedi. Le na enem mestu sem videla povezavo Docker-Jenkins s preglednim razporejanjem, dnevniki in priloženimi avtomatskimi testi.

O Dockru je napisano veliko podrobnih člankov. V tem članku bomo govorili o razporeditvi Single Page Application z uporabo VueJS/Vue Router, backend delu v obliki RESTful API z NodeJS, in kot podatkovna baza se uporablja MongoDB. Za opis in zagon več aplikacij-kontejnerjev se uporablja Docker Compose.

Zakaj potrebujemo Docker

Docker omogoča avtomatizacijo procesa razporeditve aplikacije. Razvijalec več ne potrebuje samostojno nameščati programov in se boriti s nepravilnostmi v različicah na svojem računalniku. Dovolj je, da namesti Docker in vnese 1-2 ukaza v konzolo. Najlažje to naredimo na Linuxu.

Začetek dela

Namestimo Docker in Docker compose

Struktura map

Ustvarimo 2 mapi za odjemalško in strežniško aplikacijo. Datoteka z razširitvijo .yml je konfiguracija Docker Compose, kjer so definirani in povezani kontejnerji aplikacije.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #tukaj je možno prepisati CMD iz Dockerfile v /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #tukaj je možno prepisati CMD iz Dockerfile v /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Ustvarimo 3 storitve v Dockerju: za NodeJS, MongoDB in za statiko na Vue. Da povežemo odjemalca s strežnikom, smo dodali odvisno od strežnika. Za povezovanje MongoDB s strežniškim API se uporablja povezave mongo. Strežnik, odjemalec, mongo — imena storitev.

Odjemalec na VueJS

V mapi /client je nameščen v aplikaciji na VueJS. Aplikacija je bila ustvarjena s pomočjo Vue Cli. Pri izdelavi slike se odjemalska aplikacija zgradi v niz statičnih datotek v mapi /dist. V Dockerfile je opisan niz ukazov za izgradnjo 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 namešča ločeno od ostalih datotek projekta. To je narejeno zaradi zmogljivosti, da se vsebina mape /node_modules predpomni pri ponovnem sestavljanju. Vsaka vrstica ukaza se predpomni ločeno.

Na koncu, ko se zažene kontejner, se izvede ukaz npm run dev. Ta ukaz je opisan v package.json:

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

Da zaženemo datoteke iz mape /dist, globalno se namesti http-server, v dev-dependencies pa paket spa-http-server, da Vue Router deluje pravilno. Flag —push-state preusmeri na index.html. Flag -c z vrednostjo 1 sekunda je dodan, da http-server ne predpomni skript. To je testni primer; v pravem projektu je bolje uporabiti nginx.

V Vuex skladišču ustvarimo polje apiHost: 'http://localhost:3000', kjer je določen port NodeJS Api. Odjemalska stran je pripravljena. Sedaj vsi zahtevki z odjemalca na backend gredo na to URL.

NodeJS strežnik API

V mapi /server ustvarimo server.js in Dockerfile:

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

V server.js je navedeno url za bazo podatkov const url = 'mongodb://mongo:27017/';. Omogočamo meddomenjske zahteve z odjemalca:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // nekateri starejši brskalniki (IE11, različne pametne TV) se zagozdijo na 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 se preselimo v imenik projekta in zaženimo docker-compose build za gradnjo slik in docker-compose up za zagon kontejnerjev. Ukaz bo dvignil 3 kontejnerje: server, client, mongo. Za strežnik NodeJS lahko nastavimo hot-reload, povezano z mapo user. Odjemalec v fazi razvoja pa se zažene lokalno s hot reload, tako da ločeno zaženemo strežnik in mongo. Da zaženete ločeno storitev, preprosto navedite njeno ime docker-compose up client. Ne pozabite občasno izvršiti prune in odstranitev kontejnerjev (containers), omrežij (networks) in slik (images), da sprostite vire.

Popolno kodo si lahko ogledate tukaj. Projekt je še v fazi razvoja.

Izvor: habr.com