Si mund të kuptohet nga artikulli i mëparshëm, kam punuar me projekte të ndryshme. Ditët e para në një ekip të ri zakonisht kalojnë njësoj: back-end developer'i ulët me mua dhe bën veprime magjike për të instaluar dhe deploy-uar aplikacionin. Docker është i pazëvendësueshëm për front-end developerët, pasi back-end zakonisht shkruhet në një gamë të gjerë stekesh PHP/Java/Python/C# dhe fronti nuk duhet të shqetësojë çdo herë back-un për të instaluar dhe për t'u instaluar gjithçka. Vetëm në një vend kam parë një lidhje Docker-Jenkins me desplej të qartë, logje dhe teste automatike të prirura.
Për Docker është shkruar shumë artikuj të detajuar. Në këtë artikull do të flitet për desplejimin e një Single Page Application me përdorimin e VueJS/Vue Router, pjesa server në formën e një RESTful API me NodeJS dhe si databazë përdoret MongoDB. Për përshkrimin dhe ekzekutimin e disa aplikacioneve-container përdoret Docker Compose.
PĂ«rse nevojitet Docker
Docker lejon automatizimin e procesit të desplejimit të aplikacionit. Zhvilluesi nuk ka më nevojë të instalohet vetë programet, të luftojë me përputhshmërinë e versioneve në makinën e tij. Mjafton të instalohet Docker dhe të shkruhen 1-2 komanda në konzol. E rëndësishme është të bëhet kjo në Linux.
Nisja
Instalojmë dhe
Struktura e dosjeve
Krijojmë 2 dosje për aplikacionet klient dhe server. Skedari me zgjedhjen .yml është konfigurimi Docker Compose, ku përcaktohen dhe lidhen kontejnerë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-përcaktohet CMD nga Dockerfile në /server
ports:
- "3000:3000"
links:
- mongo
client:
build: client/
#command: http-server ./dist #këtu mund të ri-përcaktohet 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 depends on server. PĂ«r lidhjen e MongoDB me API server pĂ«rdoret links 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 i klientit ndërtohet në një grup skedash statike në dosjen /dist. Në Dockerfile përshkruhen 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"]
Vini re nĂ« vĂ«mendje se package.json kopjohet dhe instalohet veçmas nga skedarĂ«t e tjerĂ« tĂ« projektit. Kjo bĂ«het pĂ«r performancĂ«, pĂ«r tĂ« siguruar qĂ« pĂ«rmbajtja e dosjes /node_modules tĂ« keq-cache-zohet gjatĂ« rindĂ«rtimit tĂ« pĂ«rsĂ«ritur. Ădo rresht-komandĂ« keq-cache-zohet veçmas.
Në fund, gjatë ekzekutimit të kontejnerit, ekzekutohet komandën npm run dev. Kjo komandë është e përshkruar në package.json:
"scripts": {
"test:dev": "http-server dist -p 8081 -c 1 --push-state"
}
PĂ«r tĂ« ekzekutuar skedarĂ«t nga dosja /dist, instalohen globalisht http-server, dhe nĂ« dev-dependencies paketa spa-http-server, qĂ« siguron funksionimin e saktĂ« tĂ« Vue Router. Flamuri âpush-state bĂ«n ridrejtimin nĂ« index.html. Flamuri -c me vlerĂ«n 1 sekondĂ« u shtua pĂ«r tĂ« http-server mos keq-cache-zuar skriptet. Ky Ă«shtĂ« njĂ« shembull testimi, nĂ« njĂ« projekt real Ă«shtĂ« mĂ« mirĂ« tĂ« pĂ«rdorim nginx.
Në Vuex store krijojmë fushën apiHost: 'http://localhost:3000', ku shkruhet porta e NodeJS Api. Ana klientit është gati. Tani të gjitha kërkesat nga klienti në backend shkojnë në këtë url.
API i 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ër-domenesh nga klienti:
const clientUrl = 'http://localhost:8081';
const corsOptions = {
origin: clientUrl,
optionsSuccessStatus: 200, // disa shfletues legadore (IE11, SmartTV të ndryshëm) ngadalësohen në 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Ă«rfundim
Tani kalojmĂ« nĂ« drejtorinĂ« e projektit dhe ekzekutojmĂ« docker-compose build pĂ«r ndĂ«rtimin e imazheve dhe docker-compose up pĂ«r Đ·Đ°ĐżŃŃĐșon kontejnerĂ«t. Komanda do tĂ« ngrejĂ« 3 kontejnerĂ«: server, client, mongo. PĂ«r serverin nĂ« NodeJS mund tĂ« konfigurohet hot-reload, duke e lidhur me dosjen e pĂ«rdoruesit. Dhe klienti nĂ« fazĂ«n e zhvillimit mund tĂ« ekzekutohet lokalisht me hot reload, duke e ekzekutuar veçmas server dhe mongo. PĂ«r tĂ« ekzekutuar njĂ« shĂ«rbim tĂ« veçantĂ«, mjafton tĂ« tregojmĂ« emrin e tij docker-compose up client. Mos harroni ndonjĂ«herĂ« tĂ« bĂ«ni prune dhe fshirjen e kontejnerĂ«ve (containers), rrjeteve (networks) dhe imazheve (images) pĂ«r tĂ« liruar burimet.
Kodi i plotë mund të shikohet . Projekti është ende në fazën e zhvillimit.
Burimi: habr.com
