Ինչպես փաթեթավորել VueJS + NodeJS + MongoDB հավելվածը Docker-ում

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

Դոկերի մասին շատ մանրամասն հոդվածներ են գրվել։ Այս հոդվածը կխոսի VueJS/Vue Router-ի միջոցով մեկ էջի հավելվածի տեղակայման մասին, սերվերի մասը NodeJS-ով RESTful API-ի տեսքով է, իսկ MongoDB-ն օգտագործվում է որպես տվյալների բազա։ Docker Compose-ն օգտագործվում է բազմաթիվ կոնտեյներային հավելվածներ սահմանելու և գործարկելու համար:

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

Docker-ը թույլ է տալիս ավտոմատացնել հավելվածի տեղակայման գործընթացը: Մշակողն այլևս կարիք չունի ինքնուրույն ծրագրեր տեղադրելու կամ իր մեքենայի վրա տարբերակների անհամատեղելիության հետ: Ձեզ անհրաժեշտ է միայն տեղադրել Docker-ը և մուտքագրել 1-2 հրամաններ կոնսոլում: Դա անելու ամենահարմար միջոցը Linux-ն է:

Ինչից սկսել

Նախադրել դոկեր և Docker ստեղծագործել

Թղթապանակի կառուցվածքը

Մենք ստեղծում ենք 2 թղթապանակ հաճախորդի և սերվերի հավելվածների համար: .yml ընդլայնմամբ ֆայլը կազմաձև է Դոկտոր կազմեք, որտեղ կիրառական բեռնարկղերը սահմանվում և կապված են:
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

Մենք Docker-ում ստեղծում ենք 3 ծառայություն՝ NodeJS-ի, MongoDB-ի և Vue-ում ստատիկների համար: Ավելացվել է հաճախորդին սերվերին միացնելու համար կախված է սերվերից. MongoDB-ն սերվերի API-ի հետ կապելու համար օգտագործեք հղումներ mongo. Սերվեր, հաճախորդ, մոնգո - ծառայությունների անվանումներ:

VueJS հաճախորդ

Թղթապանակում /հաճախորդ Հավելվածը հիմնված է VueJS-ի վրա: Հավելվածը ստեղծվել է օգտագործելով Vue Cli. Պատկեր կառուցելիս հաճախորդի հավելվածը ներկառուցված է թղթապանակի ստատիկ ֆայլերի մի շարքի մեջ /թաղ. 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 թղթապանակի բովանդակությունը պահվի քեշում: Յուրաքանչյուր հրամանի տող պահվում է առանձին:

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

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

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

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

NodeJS սերվերի API

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

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

В սերվեր. js նշված է URL տվյալների բազայի համար const url = 'mongodb://mongo:27017/';. Հաճախորդից խաչաձեւ տիրույթի հարցումների թույլտվություն.

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

Ամփոփում

Այժմ եկեք գնանք նախագծի գրացուցակ և գործարկենք docker-compose build պատկերներ կառուցելու համար և docker-compose up բեռնարկղեր գործարկելու համար: Թիմը կբարձրացնի 3 կոնտեյներ. սերվեր, հաճախորդ, մոնգո. NodeJS սերվերի համար կարող եք կարգավորել «hot-reload»՝ այն կապելով օգտվողի թղթապանակին: Իսկ մշակման փուլում գտնվող հաճախորդը պետք է գործարկվի լոկալ՝ տաք վերաբեռնմամբ՝ առանձին գործարկելով սերվեր и Mongo. Առանձին ծառայություն սկսելու համար պարզապես նշեք դրա անունը docker-compose up client. Մի մոռացեք երբեմն դա անել prune և ջնջելով բեռնարկղերը, ցանցերը և պատկերները՝ ռեսուրսներն ազատելու համար:

Դուք կարող եք տեսնել ամբողջական կոդը այստեղ. Նախագիծը դեռ մշակման փուլում է։

Source: www.habr.com