Siç mund të kuptohet nga artikulli i mëparshëm, unë kam punuar me projekte të ndryshme. Ditët e para në një ekip të ri zakonisht kalojnë njëlloj: backend-i më bashkohet dhe kryen veprime magjike për instalimin dhe shpërndarjen e aplikacionit. Docker është i paçmuar për frontend-erët, sepse backend-i shpesh është shkruar në një gamë të gjerë teknologjish PHP/Java/Python/C# dhe frontend-i nuk duhet të shqetësojë herë pas here backend-in për të instaluar dhe ecur. Vetëm në një vend kam parë kombinimin Docker-Jenkins me shpërndarje transparente, logje dhe teste automatike të lidhura.
Për Docker janë shkruar shumë artikuj të detajuar. Në këtë artikull do të flitet për shpërndarjen e një Aplikacioni të Vetëm me përdorimin e VueJS/Vue Router, pjesa server është një API RESTful me NodeJS, dhe si bazë të dhënash përdoret MongoDB. Për përshkrimin dhe ekzekutimin e disa aplikacioneve-kontejner përdoret Docker Compose.
PĂ«rse na nevojitet Docker
Docker lejon automatizimin e procesit të shpërndarjes së aplikacionit. Zhvilluesi nuk ka nevojë më të instalojë vetë programet, ose të luftojë me papajtueshmërinë e versioneve në makinën e tij. Mjafton të instalohet Docker dhe të futen 1-2 komanda në terminal. Më e lehtë është ta bësh këtë në Linux.
TĂ« fillosh
Instalojmë and
Struktura e dosjeve
Krijojmë 2 dosje për aplikacionet klient dhe server. Skedari me zgjedhjen .yml është konfigurimi Docker Compose, ku përcaktohen dhe lidhin konteinerët e aplikacionit.
Docker-compose.yml:
version: "3"
services:
mongo:
container_name: mongo
hostname: mongo
image: mongo
ports:
- "27017:27017"
server:
build: server/
#command: node ./server.js #këtu mund të ri-zëvendësohet CMD nga Dockerfile në /server
ports:
- "3000:3000"
links:
- mongo
client:
build: client/
#command: http-server ./dist #këtu mund të ri-zëvendësohet CMD nga Dockerfile në /client
network_mode: host
ports:
- "8089:8089"
depends_on:
- server
KrijojmĂ« 3 shĂ«rbime nĂ« Docker: pĂ«r NodeJS, MongoDB dhe pĂ«r statikĂ«n nĂ« Vue. PĂ«r tĂ« lidhur klientin me serverin Ă«shtĂ« shtuar varĂ«sia nga serveri. PĂ«r lidhjen e MongoDB me API-nĂ« e serverit pĂ«rdoret lidhjet mongo. Server, klient, mongo â janĂ« emrat e shĂ«rbimeve.
Klienti në VueJS
Në dosjen /client ndodhet aplikacioni në VueJS. Aplikacioni është krijuar me ndihmën e . Gjatë ndërtimit të imazhit, aplikacioni klient krijohet në një grup skedarësh statikë në dosjen /dist. Në Dockerfile përshkruhet një grup komandash për ndërtimin e imazhit:
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"]
Kujdes, qĂ« package.json kopjohet dhe instalohet veçmas nga skedarĂ«t e tjerĂ« tĂ« projektit. Kjo Ă«shtĂ« bĂ«rĂ« pĂ«r performancĂ«, nĂ« mĂ«nyrĂ« qĂ« pĂ«rmbajtja e dosjes /node_modules tĂ« maksimalizohet gjatĂ« rindĂ«rtimit. Ădo rresht-komandĂ« ruhet veçmas.
Në fund, gjatë nisjes së kontenerit ekzekutohet komanda npm run dev. Kjo komandë përshkruhet në package.json:
"scripts": {
"test:dev": "http-server dist -p 8081 -c 1 --push-state"
}
PĂ«r tĂ« filluar skedarĂ«t nga dosja /dist, instalohet globalisht http-server, dhe nĂ« dev-dependencies paketa spa-http-server, pĂ«r tĂ« funksionuar saktĂ« Vue Router. Flagu âpush-state bĂ«n ridirektimin nĂ« index.html. Flagu -c me vlerĂ«n 1 sekondĂ« Ă«shtĂ« shtuar, pĂ«r tĂ« http-server mos ruajtur skriptet. Ky Ă«shtĂ« njĂ« shembull testues, nĂ« njĂ« projekt real Ă«shtĂ« mĂ« mirĂ« tĂ« pĂ«rdorim nginx.
Në dyqanin Vuex krijojmë fushën apiHost: 'http://localhost:3000', ku shkruhet porta e API-së NodeJS. Pjesa klient është gati. Tani të gjitha kërkesat nga klienti në backend shkojnë në këtë url.
API e serverit NodeJS
Në dosjen /server krijojmë server.js dhe Dockerfile:
FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
Në server.js shkruhet url për bazën e të dhënave const url = 'mongodb://mongo:27017/';. Lejojmë kërkesat ndërdomain nga klienti:
const clientUrl = 'http://localhost:8081';
const corsOptions = {
origin: clientUrl,
optionsSuccessStatus: 200, // disa disa shfrytezojnë shfletuesit e vjetër (IE11, disa SmartTV) dështojnë me 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));
});
PĂ«rfundimi
Tani do të kalojmë në drejtorinë e projektit dhe do ta aktivizojmë docker-compose build për ndërtimin e imazheve dhe docker-compose up për të aktivizuar konteinerët. Komanda do të krijojë 3 konteinerë: server, client, mongo. Për serverin në NodeJS është e mundur të konfigurosh hot-reload, duke e lidhur atë me dosjen e përdoruesit. Ndërsa klienti në fazën e zhvillimit do të aktivizohet lokalisht me hot reload, duke e startuar veçmas server dhe mongo. Për të aktivizuar një shërbim të veçantë, mjafton të specifikoni emrin e tij docker-compose up client. Mos harroni nganjëherë të bëni prune dhe eliminimin e konteinerëve (containers), rrjeteve (networks) dhe imazheve (images), për të liruar burime.
Kodi i plotë mund të shihet . Projekti është ende në fazën e zhvillimit.
Burimi: habr.com
