ProHoster > Blog > Administrazioa > Nola paketatu VueJS + NodeJS + MongoDB aplikazioa Docker-en

Nola paketatu VueJS + NodeJS + MongoDB aplikazioa Docker-en

Nola paketatu VueJS + NodeJS + MongoDB aplikazioa Docker-en
Aurreko artikuluan ikusten denez, proiektu ezberdinekin lan egin nuen. Talde berri batean lehenengo egunak bide beretik joan ohi dira: backennder-a nire aurrean esertzen da eta aplikazioa instalatzeko eta zabaltzeko urrats magikoak egiten ditu. Docker ezinbestekoa da front-end garatzaileentzat, zeren. Backend-a askotan PHP/Java/Python/C# pila ugaritan idazten da eta aurrealdeak ez du atzealdea desbideratu beharrik dena instalatzeko eta zabaltzeko. Leku batean bakarrik ikusi nuen Docker-Jenkins mordoa hedapen garden batekin, erregistroekin, autotestekin izorratuta.

Artikulu zehatz asko idatzi dira dockerri buruz. Artikulu hau VueJS / Vue Router erabiliz orrialde bakarreko aplikazio bat zabaltzen zentratuko da, zerbitzariaren zatia NodeJS-ekin RESTful API moduan eta MongoDB datu-base gisa erabiltzen da. Docker Compose hainbat edukiontzi aplikazio deskribatzeko eta exekutatzeko erabiltzen da.

Zergatik behar duzu Docker

Docker-ek aplikazio bat zabaltzeko prozesua automatizatzeko aukera ematen du. Garatzaileak jada ez du bere kabuz programak instalatu behar, bere makinan bertsio bateraezintasunari aurre egin behar. Nahikoa da Docker instalatzea eta kontsolan 1-2 komandoak idaztea. Erosoena Linux-en egitea da.

Nola hasi

Ezarri Docker Docker konposatu

Karpeta egitura

Bezero eta zerbitzari aplikazioetarako 2 karpeta sortzen ditugu. .yml luzapena duen fitxategia konfigurazio bat da Docker Composebertan aplikazioen edukiontziak definitu eta lotzen diren.
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-en 3 zerbitzu sortzen ditugu: NodeJS, MongoDB eta Vue-n estatikorako. Gehitu da bezeroa zerbitzariarekin konektatzeko zerbitzariaren araberakoa da. MongoDB zerbitzariaren APIarekin lotzeko, erabili estekak mongo. Zerbitzaria, bezeroa, mongo dira zerbitzuen izenak.

VueJS bezeroa

Karpetan /bezeroa aplikazioa VueJS-en dago. Sortutako aplikazioa vue cli. Irudi bat eraikitzean, bezeroaren aplikazioa karpeta bateko fitxategi estatiko multzo batean sartzen da / dist. Dockerfile-k irudi bat eraikitzeko komando multzo bat deskribatzen du:

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

Kontuan izan package.json proiektuko gainerako fitxategietatik bereizita kopiatzen eta instalatzen dela. Hau errendimendurako egiten da, /node_modules karpetaren edukia berreraikitzean cachean gordetzeko. Komando-lerro bakoitza bereizita gordetzen da.

Amaieran, edukiontzia abiarazten denean, komandoa exekutatzen da npm run dev. Komando hau package.json-en deskribatzen da:


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

Karpeta batetik fitxategiak exekutatzeko / dist, globalki ezarrita http-server, eta dev-dependencies paketean spa-http-serverVue Router-ek behar bezala funtziona dezan. --push-state banderak index.html-ra birbideratzen du. 1 segundoko balioa duen -c bandera gehitu zaio http-zerbitzaria ez zituen script-ak cacheatu. Hau proba adibide bat da, benetako proiektu batean hobe da nginx erabiltzea.

Sortu eremu bat Vuex dendan apiHost: 'http://localhost:3000', non NodeJS Api ataka idazten den. Bezeroaren zatia prest dago. Orain bezeroaren backend-era egindako eskaera guztiak url honetara doaz.

NodeJS zerbitzariaren APIa

Karpetan /server sortu zerbitzaria.js eta Dockerfile: 


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

Π’ zerbitzaria.js adierazi url datu-baserako const url = 'mongodb://mongo:27017/';. Bezeroaren domeinuen arteko eskaerak onartzen ditugu:


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

Ondorioa

Orain joan proiektuaren direktoriora eta exekutatu docker-compose build irudigintzarako eta docker-compose up edukiontziak martxan jartzeko. Komandoak 3 edukiontzi altxatuko ditu: zerbitzari, bezero, mongo. NodeJS zerbitzari baterako, bero-berrekarga konfigura dezakezu erabiltzailearen karpetara lotuz. Eta bezeroa garatzen ari da lokalean exekutatzeko, birkarga beroarekin, bereizita zerbitzaria ΠΈ mongo. Aparteko zerbitzu bat hasteko, bere izena zehaztu besterik ez dago docker-compose up client. Ez ahaztu batzuetan egitea prune eta edukiontziak (edukiontziak), sareak (sareak) eta irudiak (irudiak) kentzea baliabideak askatzeko.

Kode osoa ikus dezakezu Hemen. Proiektua garatzen ari da oraindik.

Iturria: www.habr.com

Gehitu iruzkin berria