ProHoster > blog > Amministrazzjoni > Kif tippakkja l-applikazzjoni VueJS + NodeJS + MongoDB f'Docker

Kif tippakkja l-applikazzjoni VueJS + NodeJS + MongoDB f'Docker

Kif tippakkja l-applikazzjoni VueJS + NodeJS + MongoDB f'Docker
Kif tista' tifhem mill-artiklu preċedenti, ħdimt fuq proġetti differenti. L-ewwel jiem f'tim ġdid normalment imorru bl-istess mod: il-backender joqgħod miegħi u jwettaq azzjonijiet maġiċi biex jinstalla u juża l-applikazzjoni. Docker huwa indispensabbli għall-iżviluppaturi front-end għaliex... Il-backend spiss jinkiteb f'firxa wiesgħa ta 'munzelli PHP/Java/Python/C#, u l-faċċata m'għandhiex għalfejn tfixkel il-backend kull darba biex tinstalla u tiskjera kollox. F'post wieħed biss rajt kombinazzjoni Docker-Jenkins bi skjerament trasparenti, zkuk, u testijiet awtomatizzati.

Ħafna artikli dettaljati nkitbu dwar Docker. Dan l-artikolu se jitkellem dwar l-iskjerament ta 'Applikazzjoni ta' Paġna Unika bl-użu ta 'VueJS/Vue Router, il-parti tas-server hija fil-forma ta' API RESTful b'NodeJS, u MongoDB jintuża bħala database. Docker Compose jintuża biex jiddefinixxi u jmexxi applikazzjonijiet ta' kontenituri multipli.

Għaliex Docker huwa meħtieġ

Docker jippermettilek li awtomatizza l-proċess tal-iskjerament ta' applikazzjoni. L-iżviluppatur m'għadux jeħtieġ li jinstalla programmi waħdu jew jittratta l-inkompatibilità tal-verżjoni fuq il-magna tiegħu. Kull ma trid tagħmel hu li tinstalla Docker u ttajpja 1-2 kmandi fil-console. L-aktar mod konvenjenti biex tagħmel dan huwa fuq Linux.

Kif tibda

Installa Docker u, Docker jikkomponi

Struttura tal-folder

Noħolqu 2 folders għall-applikazzjonijiet tal-klijenti u tas-server. Fajl bl-estensjoni .yml huwa konfigurazzjoni Docker Ikteb, fejn il-kontenituri tal-applikazzjoni huma definiti u assoċjati.
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

Noħolqu 3 servizzi f'Docker: għal NodeJS, MongoDB u għal dawk statiċi f'Vue. Miżjud biex jgħaqqad il-klijent mas-server jiddependi fuq is-server. Biex tgħaqqad MongoDB mas-server API, uża links mongo. Server, klijent, mongo - ismijiet tas-servizzi.

Klijent VueJS

Fil-folder /klijent L-applikazzjoni hija bbażata fuq VueJS. L-applikazzjoni ġiet maħluqa bl-użu Vue Cli. Meta tibni immaġini, l-applikazzjoni tal-klijent hija mibnija f'sett ta 'fajls statiċi fil-folder /dist. Id-Dockerfile jiddeskrivi sett ta 'kmandi għall-bini ta' immaġni:

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

Jekk jogħġbok innota li package.json huwa kkupjat u installat separatament mill-bqija tal-fajls tal-proġett. Dan isir għall-prestazzjoni, sabiex il-kontenut tal-folder /node_modules jiġi miżmum fil-cache meta jerġa' jinbena. Kull linja ta 'kmand hija cached separatament.

Fl-aħħarnett, meta jibda l-kontenitur, il-kmand jiġi esegwit npm run dev. Dan il-kmand huwa deskritt f'package.json:


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

Biex tmexxi fajls minn folder /dist, installat globalment http-server, u fid-dev-dipendenzi il-pakkett spa-http-serversabiex Vue Router jaħdem sew. Il-bandiera --push-state tidderieġi mill-ġdid lejn index.html. Il-bandiera -c b'valur ta' sekonda ġiet miżjuda magħha http-server ma cache skripts. Dan huwa eżempju tat-test fuq proġett reali huwa aħjar li tuża nginx.

Fil-maħżen Vuex noħolqu field apiHost: 'http://localhost:3000', fejn il-port NodeJS Api huwa rreġistrat. Il-parti tal-klijent hija lesta. Issa t-talbiet kollha mill-klijent għal wara jmorru għal din l-url.

NodeJS server API

Fil-folder /server toħloq server.js u Dockerfile: 


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

В server.js indikat url għal database const url = 'mongodb://mongo:27017/';. Tippermetti talbiet trans-dominju mill-klijent:


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

Konklużjoni

Issa ejja mmorru fid-direttorju tal-proġett u mexxi docker-compose build għall-bini ta’ stampi u docker-compose up biex imexxu kontenituri. It-tim se jerfa' 3 kontenituri: server, klijent, mongo. Għal server NodeJS, tista' tikkonfigura hot-reload billi tgħaqqadha mal-folder tal-utent. U l-klijent taħt żvilupp għandu jiġi mniedi lokalment b'reload sħun, li jaħdem separatament servers и mongo. Biex tibda servizz separat, speċifika ismu docker-compose up client. Tinsiex tagħmel dan kultant prune u tħassar kontenituri, netwerks, u immaġini biex tillibera r-riżorsi.

Tista 'tara l-kodiċi sħiħ hawn. Il-proġett għadu qed jiġi żviluppat.

Sors: www.habr.com

Żid kumment