Yadda ake kunshin VueJS + NodeJS + MongoDB aikace-aikacen a Docker

Kamar yadda zaku iya fahimta daga labarin da ya gabata, na yi aiki akan ayyuka daban-daban. Kwanaki na farko a cikin sabuwar ƙungiya yawanci suna tafiya iri ɗaya: mai baya yana zaune tare da ni yana yin ayyukan sihiri don shigarwa da tura aikace-aikacen. Docker yana da mahimmanci ga masu haɓakawa na gaba saboda ... Sau da yawa ana rubuta bayanan baya a cikin kewayon PHP/Java/Python/C #, kuma gaba ba dole ba ne ya janye hankalin baya kowane lokaci don shigarwa da tura komai. A wuri ɗaya ne kawai na ga haɗin Docker-Jenkins tare da ƙaddamarwa na gaskiya, rajistan ayyukan, da gwaje-gwaje na atomatik.

An rubuta cikakkun labarai da yawa game da Docker. Wannan labarin zai yi magana game da ƙaddamar da Aikace-aikacen Shafi guda ɗaya ta amfani da VueJS/Vue Router, sashin uwar garken yana cikin nau'i na API RESTful tare da NodeJS, kuma MongoDB ana amfani dashi azaman bayanai. Ana amfani da Docker Compose don ayyana da gudanar da aikace-aikacen kwantena da yawa.

Me yasa ake buƙatar Docker

Docker yana ba ku damar sarrafa tsarin aiwatar da aikace-aikacen. Mai haɓakawa baya buƙatar shigar da shirye-shirye da kansa ko magance rashin jituwar sigar akan injinsa. Duk abin da kuke buƙatar yi shine shigar da Docker kuma buga umarni 1-2 a cikin na'ura wasan bidiyo. Hanya mafi dacewa don yin wannan shine akan Linux.

Farawa

Shigar Docker da kuma Docker ya rubuta

Tsarin fayil

Mun ƙirƙiri manyan fayiloli 2 don aikace-aikacen abokin ciniki da uwar garken. Fayil mai tsawo na .yml saiti ne Docker Shirya, inda aka ayyana kwantena aikace-aikace da alaƙa.
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

Mun ƙirƙiri ayyuka 3 a cikin Docker: don NodeJS, MongoDB da kuma na tsaye a cikin Vue. Ƙara don haɗa abokin ciniki zuwa uwar garken ya dogara da uwar garken. Don haɗa MongoDB tare da API na uwar garken, yi amfani links mongo. Sabar, abokin ciniki, mongo - sunayen ayyuka.

VueJS abokin ciniki

A babban fayil / abokin ciniki Aikace-aikacen ya dogara ne akan VueJS. An ƙirƙiri aikace-aikacen ta amfani da Wuce Cli. Lokacin gina hoto, ana gina aikace-aikacen abokin ciniki a cikin saitin fayiloli na tsaye a cikin babban fayil /dist. Dockerfile yana bayyana jerin umarni don gina hoto:

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

Lura cewa package.json an kwafi kuma an shigar dashi daban daga sauran fayilolin aikin. Ana yin wannan don yin aiki, ta yadda abubuwan da ke cikin babban fayil ɗin /node_modules ana adana su yayin sake ginawa. Kowane layin umarni yana cache daban.

A ƙarshe, lokacin da akwati ya fara, ana aiwatar da umarnin npm run dev. An bayyana wannan umarni a cikin package.json:

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

Don gudanar da fayiloli daga babban fayil /dist, shigar a duniya http-server, kuma a dev-dependencies kunshin spa-http-serverta yadda Vue Router yayi aiki daidai. Tutar --push-state tana turawa zuwa index.html. An ƙara tutar -c mai ƙimar daƙiƙa 1 zuwa http-uwar garke bai cache rubutun ba. Wannan misali ne na gwaji; akan ainihin aikin yana da kyau a yi amfani da nginx.

A cikin kantin Vuex muna ƙirƙirar filin apiHost: 'http://localhost:3000', inda aka yi rajistar tashar NodeJS Api. An shirya ɓangaren abokin ciniki. Yanzu duk buƙatun daga abokin ciniki zuwa baya suna zuwa wannan url.

API ɗin uwar garken NodeJS

A babban fayil /server halitta sabar.js da Dockerfile:

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

В sabar.js nuna url domin database const url = 'mongodb://mongo:27017/';. Ba da izinin buƙatun yanki daga abokin ciniki:

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

ƙarshe

Yanzu bari mu je aikin directory da gudu docker-compose build domin gina hotuna da docker-compose up don gudanar da kwantena. Tawagar za ta dauke kwantena guda 3: uwar garken, abokin ciniki, mongo. Don uwar garken NodeJS, zaku iya saita zazzage-sakewa ta hanyar haɗa shi zuwa babban fayil ɗin mai amfani. Kuma abokin ciniki a ƙarƙashin haɓaka yakamata a ƙaddamar da shi a cikin gida tare da sakewa mai zafi, yana gudana daban uwar garken и mongo. Don fara sabis na daban, kawai saka sunansa docker-compose up client. Kar ka manta da yin shi wani lokaci prune da share kwantena, cibiyoyin sadarwa, da hotuna don 'yantar da albarkatu.

Kuna iya ganin cikakken lambar a nan. Har yanzu ana ci gaba da gudanar da aikin.

source: www.habr.com