VueJS + NodeJS + MongoDB tətbiqini Docker-da necə paketləmək olar

Yuxarıdakı məqalədən başa düşmək olar ki, mən fərqli layihələrlə işlədim. Yeni komandada ilk günlər adətən eyni keçir: backend developer mənim yanımda oturur və tətbiqin quraşdırılması və yerləşdirilməsi üzrə sehrli əməliyyatları həyata keçirir. Docker frontendçilər üçün əvəzolunmazdır, çünki backend çox vaxt geniş PHP/Java/Python/C# yığımı ilə yazılır və frontend hər dəfə backend-in diqqətini yayındırmadan hər şeyi quraşdırıb inkişaf etdirmək istəyir. Yalnız bir yerdə mən Docker-Jenkins birləşməsini görülmüş, şəffaf yerləşdirmə, qeydlər və qoşulmuş avtomatik testlərlə görmüşəm.

Docker haqqında bir çox ətraflı məqalələr yazılıb. Bu məqalədə VueJS/Vue Router-dan istifadə etməklə Single Page Application-ın yerləşdirilməsindən, NodeJS ilə RESTful API server hissəsindən və MongoDB-nin verilənlər bazası kimi istifadəsindən söhbət açılacaq. Bir neçə konteyner tətbiqini təsvir etmək və işlətmək üçün Docker Compose istifadə edilir.

Docker nə üçündür

Docker tətbiqin yerləşdirilmə prosesini avtomatlaşdırmağa imkan verir. İstehsalçı proqramları öz başına quraşdırmalı, maşınında versiyalar arasındakı uyğunsuzluqla mübarizə aparmalı deyil. Yalnız Docker-i quraşdırmaq və konsolda 1-2 əmri daxil etmək kifayətdir. Bunun üçün ən rahat Linux-dur.

Başlamaq

Quraşdırırıq Docker and Docker compose

Qovluq strukturu

Müştəri və server tətbiqləri üçün 2 qovluq yaradırıq. .yml uzantılı fayl — bu konfiqurasiya faylıdır Docker Compose, burada tətbiq konteynerləri müəyyən edilir və əlaqələndirilir.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js # burada Dockerfile-dan CMD-i /server-ə yenidən yazmaq olar
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist # burada Dockerfile-dan CMD-i /client-ə yenidən yazmaq olar
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Docker-də 3 xidmət yaradırıq: NodeJS üçün, MongoDB və Vue-yə əsaslanan statik fayllar üçün. Müştərini serverlə bağlamaq üçün depends on server. MongoDB-nin server API ilə əlaqələndirilməsi üçün links mongo. Server, müştəri, mongo — xidmətlərin adlarıdır.

VueJS-də müştəri

Kataloqda /client VueJS-də yerləşdirilmiş tətbiqdir. Tətbiq Vue Cliistifadə edilərək yaradılıb. İmage-in yaradılması zamanı müştəri tətbiqi statik faylar toplusuna çevrilir /dist. Dockerfile-da image-in yaradılması üçün əmrlərin dəsti təsvir edilir:

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

Dikkatinizi çəkirəm ki, package.json digər layihə fayllarından ayrı olaraq köçürülür və quraşdırılır. Bu, performans üçün edilib ki, /node_modules qovluğunun məzmunu təkrar dəfə yerləşdirərkən keşi saxlanılsın. Hər bir sətir-əmr ayrı olaraq keşlənir.

Sonda, konteyner işə salındıqda aşağıdakı əmr icra edilir npm run dev. Bu əmr package.json-da təsvir edilmişdir:

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

Qovluqdakı faylları işə salmaq üçün /dist, qlobal olaraq http-server, development-şərtlərində paket olaraq spa-http-server, Vue Router-in düzgün işləməsi üçün. —push-state flaqı index.html-ə yönəldir. -c flaqı 1 saniyə dəyəri ilə əlavə olunub ki, http-server skriptləri keşləməsin. Bu bir test nümunəsidir, gerçək layihədə nginx istifadə etmək daha yaxşıdır.

Vuex store-da bir sahə yaradırıq apiHost: 'http://localhost:3000', burada NodeJS Api-nin portu qeyd edilir. Müştəri tərəfi hazırdır. İndi müştəridən backend-ə bütün sorğular bu url-ə gedir.

NodeJS server API

Kataloqda /server yaradırıq server.js və Dockerfile:

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

İ server.js göstərilir Bu tələbləri məlumat bazası üçün const url = 'mongodb://mongo:27017/';. Müştəridən kross-domen sorğularına icazə veririk:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // bəzi köhnə brauzerlər (IE11, müxtəlif SmartTV-lər) 204-cü xətanı alır
};
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));
  });

Nəticə

İndi layihə direktoriyasında keçək və docker-compose build şəkillərin qurulması üçün və docker-compose up konteynerləri işə salmaq üçün. Bu komanda 3 konteyner qaldıracaq: server, client, mongo. NodeJS serveri üçün hot-reload-u user qovluğu ilə birləşdirə bilərsiniz. Müştəri inkişaf mərhələsində hot reloading ilə yerli işə salınaraq ayrıca işə salınmalıdır. server və mongo. Ayrı bir xidməti işə salmaq üçün yalnız adını göstərmək lazımdır docker-compose up client. Bəzən prune ve konteynerlərin (containers), şəbəkələrin (networks) və şəkillərin (images) silinməsini unutmayın ki, resursları boşaltsın.

Tam kodu burada görə bilərsiniz burada. Layihə hələ inkişaf mərhələsindədir.

Mənbə: habr.com