How to package a VueJS + NodeJS + MongoDB application in Docker

Ինչպես կարելի է հասկանալ նախորդ հոդվածից, ես աշխատել եմ տարբեր նախագծերում։ Նոր թիմում առաջին օրերը միշտ միատեսակ են անցնում. բեքենդի 개발իչը միանում է ինձ և կատարում հրաշագործ գործողություններ՝ ծրագրային ապահովման տեղադրման և դեploի։ Docker-ը անփոխարինելի է առաջատարների համար, քանի որ բեք է հաճախ գրավում լայն՝ PHP/Java/Python/C# զինանոց, և առաջը պետք չէ ամեն անգամ շեղել բեքին, որպեսզի ամեն ինչ տեղադրվի և գործարկվի։ Միայն մեկ տեղում ես տեսել եմ Docker-Jenkins միացում ՝ իրազեկ դեploի, লগերի ու ավտոտեսումների։

Docker-ի մասին շատ մանրազնին հոդվածներ գոյություն ունեն։ Այս հոդվածում կդիտարկվի Single Page Application-ի մաքսանենգումը VueJS/Vue Router օգտագործելով, զեռտառային հատվածը RESTful API ձևով NodeJS-ով, իսկ տվյալների բազան MongoDB է։ Թվում է, որ մի քանի ծրագրային կոնտեյներների նկարագրության և գործարկման համար օգտագործվում է Docker Compose։

Ինչո՞ւ է անհրաժեշտ Docker-ը

Docker-ը թույլ է տալիս ավտոմատացնել ծրագրային ապահովման տեղադրման գործընթացը։ Մարզառեկը այլևս չի պետք է ինքնուրույն տեղադրել ծրագրեր, պայքարել տարբերակների անհամատեղելիության դեմ իր սարքում։ Մաքսիմալը պետք է տեղադրել Docker-ը և մուտքագրել 1-2 հրահանգներ բոլորը մտածումներ։ Հարմար է դա անել Linux-ում։

Սկսել

տեղադրում ենք Docker and Docker compose

Ֆայլերի կառուցվածքը

Ստեղծում ենք 2 թղթապանակ կտորային և սերվերային ծրագրերի համար։ .yml ընդլայնմամբ ֆայլը՝ սա կոնֆիգ է Docker Compose, որտեղ նշվում են և կապվում են ծրագրի կոնտեյներները։
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-ում
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #այստեղ հնարավոր է վերագրել CMD-ից Dockerfile-ում
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Ստեղծում ենք 3 ծառայություններ Docker-ում՝ NodeJS, MongoDB և Vue-ի ստատիկայի համար։ Client-ը կապելու համար սերվերին ավելացվում է depends on server. MongoDB-ն կապելու համար օգտագործվում է links mongo. Սերվերը, кліենտը, mongo — ծառայությունների անվանումներն են։

VueJS վրա кліենտը

Թղթապանակում /client տեղադրված է VueJS-նային ծրագիրը։ Ծրագիրը ստեղծված է Vue Cli. Մելամասնեցվում է ծրագրի դիզայնը, клиентային ծրագիրը կառուցվում է ստատիկ ֆայլերի մեջ, որը գտնվում է /dist. Dockerfile-ում նկարագրվում են կազմելուն վիրահատություններ՝

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

Համոզվեք, որ package.json-ն լուսանկարվում և տեղադրվում է՝ առանձին մյուս ծրագրերի ֆայլերից։ Սա արվում է կատարողականության համար ՝ որպեսզի /node_modules-ի պարունակությունը շահվի ժամանակավոր տեղադրումներում։ Յուրաքանչյուր հրահանգըCaching-ը առանձին է։

Վերջում, կոնտեյները գործարկելու ժամանակ է կատարում հրահանգ npm run dev. Այս հրահանգը նկարագրված է package.json-ում՝

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

Այս քարտում տեղադրված ֆայլերը աշխատացնել /dist, համ globally այս ներմուծվում է http-server, իսկ dev-dependencies փաթեթը spa-http-server, որպեսզի Vue Router-ը ճիշտ աշխատի: —push-state դրոշը մեծացնում է վերաբերմունքը index.html-ին. —c դրոշը մեկ վայրկյան արժեքով ավելացվել է որպեսզի http-server սկրիպտները չկեշավորվեն: Սա փորձնական օրինակ է, իրական նախագծում ավելի լավ է օգտագործել nginx:

Vuex մամուլի մեջ ստեղծում ենք ոլորտ apiHost: 'http://localhost:3000', որտեղ նշվում է NodeJS Api-ի պորտը: Հաճախորդի կողմը պատրաստ է: Այժմ բոլոր հարցումները հաճախորդից հետևում են այս URL-ին:

NodeJS սերվեր API

Թղթապանակում /server ստեղծում ենք server.js և Dockerfile:

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

Մեույն server.js նշվում է url հիմնական տվյալների բազայի համար const url = 'mongodb://mongo:27017/';. Աղջկացնում ենք հատկանիշային հարցումները հաճախորդից:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // որոշ наследственные браузեր (IE11, տարբեր SmartTV-ներ) խրախուսում են 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));
  });

Ավարտ

Այժմ գնանք նախագծի դիրքավորումը և գործարկենք docker-compose build փրկելու համար պատկերը և docker-compose up կոնտեյներները գործելու համար: Ապրանքի համար 3 կոնտեյներ կհայտնվեն: server, client, mongo. NodeJS-ի համար սերվերը կարող է تنظیمվել hot-reload-ով, կապելով այն user մուտքով: Իսկ հաճախորդների զարգացման փուլում գործարկվում է տեղամասային hot reload-ով, առանձին գործարկելով server և mongo. Նրա հեռակա ծառայություն գործարկելու համար, միայն դրա անունը նշելու համար docker-compose up client. Մի մոռացեք ժամանակ առ ժամանակ անել prune և կոնտեյները (containers), ցանցերը (networks) և պատկերները (images) հանելու համար, որպեսզի ազատել ռեսուրսները:

Լրիվ կոդը կարող եք տեսնել այստեղ. Նախագիծը դեռ զարգացման փուլում է.

Ընտանիք: habr.com