ProHoster > Blog > İdarə > Docker-də VueJS + NodeJS + MongoDB tətbiqini necə bağlamaq olar

Docker-də VueJS + NodeJS + MongoDB tətbiqini necə bağlamaq olar

Docker-də VueJS + NodeJS + MongoDB tətbiqini necə bağlamaq olar
Əvvəlki məqalədən də göründüyü kimi müxtəlif layihələrlə işləmişəm. Yeni komandada ilk günlər adətən eyni şəkildə keçir: dəstəkçi mənim yanımda oturur və tətbiqi quraşdırmaq və yerləşdirmək üçün sehrli addımları yerinə yetirir. Docker front-end tərtibatçıları üçün əvəzolunmazdır, çünki. Backend tez-tez PHP/Java/Python/C# yığınlarının geniş diapazonunda yazılır və hər şeyi quraşdırmaq və yerləşdirmək üçün hər dəfə arxa tərəfin diqqətini yayındırmağa ehtiyac yoxdur. Yalnız bir yerdə şəffaf yerləşdirmə, loglar, avtotestlərlə vidalanmış bir dəstə Docker-Jenkins gördüm.

Docker haqqında çoxlu ətraflı məqalələr yazılmışdır. Bu məqalə VueJS / Vue Router, NodeJS ilə RESTful API şəklində server hissəsi və MongoDB verilənlər bazası kimi istifadə edilən Tək Səhifə Tətbiqinin yerləşdirilməsinə yönəldiləcəkdir. Docker Compose çox konteyner tətbiqlərini təsvir etmək və işlətmək üçün istifadə olunur.

Niyə Docker lazımdır

Docker proqramın yerləşdirilməsi prosesini avtomatlaşdırmağa imkan verir. Tərtibatçıya artıq proqramları müstəqil quraşdırmaq, maşınındakı versiya uyğunsuzluğu ilə məşğul olmaq lazım deyil. Docker-i quraşdırmaq və konsola 1-2 əmr yazmaq kifayətdir. Bunu Linux-da etmək ən əlverişlidir.

Başlarken

Təyin etmək yükvuran və Docker tərtib edir

Qovluq quruluşu

Biz müştəri və server proqramları üçün 2 qovluq yaradırıq. .yml uzantısı olan fayl konfiqurasiyadır Docker tərtib edintətbiq konteynerlərinin müəyyən edildiyi və əlaqələndirildiyi yer.
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

Biz docker-də 3 xidmət yaradırıq: NodeJS, MongoDB və Vue-də statiklər üçün. Müştərini serverə qoşmaq üçün əlavə edildi serverdən asılıdır. MongoDB-ni server API ilə əlaqələndirmək üçün istifadə edin bağlantılar mongo. Server, müştəri, mongo xidmətlərin adlarıdır.

VueJS Müştərisi

Qovluqda /müştəri proqram VueJS-də yerləşir. ilə yaradılmış proqram vue cli. Bir şəkil qurarkən, müştəri proqramı bir qovluqdakı statik fayllar dəstinə qurulur /dist. Dockerfile şəkil yaratmaq üçün bir sıra əmrləri təsvir edir:

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

Qeyd edək ki, package.json digər layihə fayllarından ayrıca kopyalanır və quraşdırılır. Bu, performans üçün edilir ki, /node_modules qovluğunun məzmunu yenidən qurularkən yaddaşda saxlanılsın. Hər bir komanda xətti ayrıca keşlənir.

Sonda konteyner işə salındıqda əmr yerinə yetirilir npm run dev. Bu əmr package.json-da təsvir edilmişdir:


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

Faylları qovluqdan işə salmaq üçün /dist, qlobal olaraq təyin olunur http-server, və dev-asılılıqlar paketində spa-http-serverVue Routerin düzgün işləməsi üçün. --push-state bayrağı index.html-ə yönləndirir. 1 saniyə dəyəri olan -c bayrağı əlavə edildi http-server skriptləri önbelleğe almadı. Bu bir sınaq nümunəsidir, real layihədə nginx-dən istifadə etmək daha yaxşıdır.

Vuex mağazasında sahə yaradın apiHost: 'http://localhost:3000', NodeJS Api portunun yazıldığı yer. Müştəri hissəsi hazırdır. İndi müştəridən arxa tərəfə olan bütün sorğular bu URL-ə gedir.

NodeJS Server API

Qovluqda /server yaratmaq 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ərilmiş url verilənlər bazası üçün const url = 'mongodb://mongo:27017/';. Biz müştəridən domenlərarası sorğulara icazə veririk:


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

Nəticə

İndi layihə qovluğuna gedin və işə salın docker-compose build təsvir üçün və docker-compose up konteynerləri işə salmaq. Komanda 3 konteyneri qaldıracaq: server, müştəri, mongo. NodeJS serveri üçün onu istifadəçi qovluğu ilə əlaqələndirərək isti yenidən yükləməni konfiqurasiya edə bilərsiniz. Müştəri ayrıca işləyərək isti yenidən yükləmə ilə yerli işləmək üçün inkişaf mərhələsindədir server и Mongo. Ayrı bir xidmətə başlamaq üçün onun adını qeyd etmək kifayətdir docker-compose up client. Bəzən bunu etməyi unutmayın prune və resursları boşaltmaq üçün konteynerlərin (konteynerlərin), şəbəkələrin (şəbəkələrin) və şəkillərin (şəkillərin) çıxarılması.

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

Mənbə: www.habr.com

Добавить комментарий