ProHoster > Blogs > Administrācija > Kā iepakot VueJS + NodeJS + MongoDB lietojumprogrammu programmā Docker

Kā iepakot VueJS + NodeJS + MongoDB lietojumprogrammu programmā Docker

Kā iepakot VueJS + NodeJS + MongoDB lietojumprogrammu programmā Docker
Kā var saprast no iepriekšējā raksta, es strādāju pie dažādiem projektiem. Pirmās dienas jaunā komandā parasti notiek tāpat: aizmugure apsēžas ar mani un veic maģiskas darbības, lai instalētu un izvietotu lietojumprogrammu. Docker ir neaizstājams priekšgala izstrādātājiem, jo... Aizmugursistēma bieži tiek rakstīta plašā PHP/Java/Python/C# skursteņu diapazonā, un priekšējai daļai nav jānovērš aizmugursistēmas uzmanība katru reizi, lai visu instalētu un izvietotu. Tikai vienā vietā es redzēju Docker-Jenkins kombināciju ar pārredzamu izvietošanu, žurnāliem un automatizētiem testiem.

Par Docker ir rakstīti daudzi detalizēti raksti. Šajā rakstā tiks runāts par vienas lapas lietojumprogrammas izvietošanu, izmantojot VueJS/Vue Router, servera daļa ir RESTful API formā ar NodeJS, un MongoDB tiek izmantota kā datu bāze. Docker Compose tiek izmantots, lai definētu un palaistu vairākas konteineru lietojumprogrammas.

Kāpēc Docker ir nepieciešams

Docker ļauj automatizēt lietojumprogrammas izvietošanas procesu. Izstrādātājam vairs nav jāinstalē programmas pašam vai jārisina versiju nesaderība savā datorā. Viss, kas jums jādara, ir instalēt Docker un konsolē ierakstīt 1-2 komandas. Ērtākais veids, kā to izdarīt, ir Linux.

Iesākumam

Komplekts dokers un Docker komponēt

Mapju struktūra

Mēs izveidojam 2 mapes klienta un servera lietojumprogrammām. Fails ar paplašinājumu .yml ir konfigurācija Docker sastopas, kur ir definēti un saistīti lietojumprogrammu konteineri.
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 veidojam 3 pakalpojumus: NodeJS, MongoDB un statiskajiem Vue. Pievienots, lai savienotu klientu ar serveri atkarīgs no servera. Lai saistītu MongoDB ar servera API, izmantojiet saites mongo. Serveris, klients, mongo - pakalpojumu nosaukumi.

VueJS klients

Mapē /klients Lietojumprogramma ir balstīta uz VueJS. Lietojumprogramma tika izveidota, izmantojot Vue Cli. Veidojot attēlu, klienta lietojumprogramma ir iebūvēta mapē esošo statisko failu komplektā /dist. Dockerfile apraksta komandu kopu attēla veidošanai:

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

Lūdzu, ņemiet vērā, ka fails package.json tiek kopēts un instalēts atsevišķi no pārējiem projekta failiem. Tas tiek darīts veiktspējas nodrošināšanai, lai, veidojot atkārtoti, mapes /node_modules saturs tiktu saglabāts kešatmiņā. Katra komandrinda tiek saglabāta kešatmiņā atsevišķi.

Visbeidzot, kad konteiners sākas, komanda tiek izpildīta npm run dev. Šī komanda ir aprakstīta failā package.json:


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

Lai palaistu failus no mapes /dist, uzstādīts visā pasaulē http-server, un dev-atkarībās pakotni spa-http-serverlai Vue maršrutētājs darbotos pareizi. Karogs --push-state novirza uz index.html. Tika pievienots karodziņš -c ar vērtību 1 sekunde http-serveris neglabāja skriptus kešatmiņā. Šis ir testa piemērs; reālā projektā labāk izmantot nginx.

Vuex veikalā mēs izveidojam lauku apiHost: 'http://localhost:3000', kur reģistrēts NodeJS Api ports. Klienta daļa ir gatava. Tagad visi klienta pieprasījumi tiek nosūtīti uz šo URL.

NodeJS servera API

Mapē /server izveidot serveris.js un Dockerfile: 


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

В serveris.js norādīts url datu bāzei const url = 'mongodb://mongo:27017/';. Starpdomēnu pieprasījumu atļaušana no klienta:


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

Secinājums

Tagad ejam uz projekta direktoriju un palaidīsim docker-compose build attēlu konstruēšanai un docker-compose up lai palaistu konteinerus. Komanda pacels 3 konteinerus: serveris, klients, mongo. NodeJS serverim varat konfigurēt karsto atkārtotu ielādi, saistot to ar lietotāja mapi. Un izstrādes stadijā esošais klients ir jāpalaiž lokāli ar karsto pārlādēšanu, kas darbojas atsevišķi serveris и Mongo. Lai sāktu atsevišķu pakalpojumu, vienkārši norādiet tā nosaukumu docker-compose up client. Neaizmirstiet to darīt dažreiz prune un konteineru, tīklu un attēlu dzēšana, lai atbrīvotu resursus.

Jūs varat redzēt pilnu kodu šeit. Projekts joprojām ir izstrādes stadijā.

Avots: www.habr.com

Pievieno komentāru