డాకర్‌లో VueJS + NodeJS + MongoDB అప్లికేషన్‌ను ఎలా ప్యాకేజీ చేయాలి

మునుపటి వ్యాసం నుండి మీరు అర్థం చేసుకోగలిగినట్లుగా, నేను వేర్వేరు ప్రాజెక్టులలో పనిచేశాను. కొత్త టీమ్‌లోని మొదటి రోజులు సాధారణంగా అదే విధంగా సాగుతాయి: బ్యాకెండర్ నాతో కూర్చుని, అప్లికేషన్‌ను ఇన్‌స్టాల్ చేయడానికి మరియు అమలు చేయడానికి మాయా చర్యలను చేస్తాడు. ఫ్రంట్-ఎండ్ డెవలపర్‌లకు డాకర్ ఎంతో అవసరం ఎందుకంటే... బ్యాకెండ్ తరచుగా విస్తృత శ్రేణి PHP/Java/Python/C# స్టాక్‌లలో వ్రాయబడుతుంది మరియు ప్రతిదీ ఇన్‌స్టాల్ చేయడానికి మరియు అమలు చేయడానికి ముందు భాగం ప్రతిసారీ బ్యాకెండ్‌ను మరల్చాల్సిన అవసరం లేదు. నేను పారదర్శక విస్తరణ, లాగ్‌లు మరియు స్వయంచాలక పరీక్షలతో డాకర్-జెంకిన్స్ కలయికను ఒకే చోట చూశాను.

డాకర్ గురించి చాలా వివరణాత్మక కథనాలు వ్రాయబడ్డాయి. ఈ కథనం VueJS/Vue రూటర్‌ని ఉపయోగించి ఒకే పేజీ అప్లికేషన్‌ని అమలు చేయడం గురించి మాట్లాడుతుంది, సర్వర్ భాగం NodeJSతో RESTful API రూపంలో ఉంటుంది మరియు MongoDB డేటాబేస్‌గా ఉపయోగించబడుతుంది. బహుళ కంటైనర్ అప్లికేషన్‌లను నిర్వచించడానికి మరియు అమలు చేయడానికి డాకర్ కంపోజ్ ఉపయోగించబడుతుంది.

డాకర్ ఎందుకు అవసరం

అప్లికేషన్‌ని అమలు చేసే ప్రక్రియను ఆటోమేట్ చేయడానికి డాకర్ మిమ్మల్ని అనుమతిస్తుంది. డెవలపర్ ఇకపై తన స్వంత ప్రోగ్రామ్‌లను ఇన్‌స్టాల్ చేయనవసరం లేదు లేదా అతని మెషీన్‌లో సంస్కరణ అననుకూలతను ఎదుర్కోవాల్సిన అవసరం లేదు. మీరు చేయాల్సిందల్లా డాకర్‌ను ఇన్‌స్టాల్ చేసి, కన్సోల్‌లో 1-2 ఆదేశాలను టైప్ చేయండి. దీన్ని చేయడానికి అత్యంత అనుకూలమైన మార్గం Linux.

మొదలు అవుతున్న

ఇన్‌స్టాల్ చేయండి డాకర్ మరియు డాకర్ కంపోజ్

ఫోల్డర్ నిర్మాణం

క్లయింట్ మరియు సర్వర్ అప్లికేషన్‌ల కోసం మేము 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

మేము డాకర్‌లో 3 సేవలను సృష్టిస్తాము: NodeJS, MongoDB మరియు Vueలో స్టాటిక్ వాటి కోసం. క్లయింట్‌ని సర్వర్‌కి కనెక్ట్ చేయడానికి జోడించబడింది సర్వర్ మీద ఆధారపడి ఉంటుంది. సర్వర్ APIతో MongoDBని లింక్ చేయడానికి, ఉపయోగించండి లింకులు mongo. సర్వర్, క్లయింట్, మొంగో - సేవల పేర్లు.

VueJS క్లయింట్

ఫోల్డర్‌లో / క్లయింట్ అప్లికేషన్ VueJS ఆధారంగా రూపొందించబడింది. అప్లికేషన్ ఉపయోగించి సృష్టించబడింది Vue Cli. చిత్రాన్ని నిర్మించేటప్పుడు, క్లయింట్ అప్లికేషన్ ఫోల్డర్‌లోని స్టాటిక్ ఫైల్‌ల సెట్‌లో నిర్మించబడింది /జిల్లా. డాకర్‌ఫైల్ చిత్రాన్ని నిర్మించడానికి ఆదేశాల సమితిని వివరిస్తుంది:

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

ప్యాకేజీ.json మిగిలిన ప్రాజెక్ట్ ఫైల్‌ల నుండి విడిగా కాపీ చేయబడి, ఇన్‌స్టాల్ చేయబడిందని దయచేసి గమనించండి. ఇది పనితీరు కోసం చేయబడుతుంది, తద్వారా /node_modules ఫోల్డర్‌లోని కంటెంట్‌లు మళ్లీ నిర్మించేటప్పుడు కాష్ చేయబడతాయి. ప్రతి కమాండ్ లైన్ విడిగా కాష్ చేయబడుతుంది.

చివరగా, కంటైనర్ ప్రారంభమైనప్పుడు, ఆదేశం అమలు చేయబడుతుంది npm run dev. ఈ ఆదేశం ప్యాకేజీ.jsonలో వివరించబడింది:

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

ఫోల్డర్ నుండి ఫైల్‌లను అమలు చేయడానికి /జిల్లా, ప్రపంచవ్యాప్తంగా ఇన్‌స్టాల్ చేయబడింది http-server, మరియు dev-డిపెండెన్సీలలో ప్యాకేజీ spa-http-serverతద్వారా Vue రూటర్ సరిగ్గా పని చేస్తుంది. --పుష్-స్టేట్ ఫ్లాగ్ index.htmlకి దారి మళ్లిస్తుంది. 1 సెకను విలువతో -c ఫ్లాగ్ జోడించబడింది http-సర్వర్ స్క్రిప్ట్‌లను కాష్ చేయలేదు. ఇది ఒక పరీక్ష ఉదాహరణ; నిజమైన ప్రాజెక్ట్‌లో nginxని ఉపయోగించడం ఉత్తమం.

Vuex స్టోర్‌లో మేము ఫీల్డ్‌ను సృష్టిస్తాము apiHost: 'http://localhost:3000', NodeJS Api పోర్ట్ నమోదు చేయబడిన చోట. క్లయింట్ భాగం సిద్ధంగా ఉంది. ఇప్పుడు క్లయింట్ నుండి వెనుకకు వచ్చే అన్ని అభ్యర్థనలు ఈ urlకి వెళ్తాయి.

NodeJS సర్వర్ API

ఫోల్డర్‌లో /server సృష్టించు సర్వర్. js మరియు డాకర్ ఫైల్:

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 సర్వర్ కోసం, మీరు దానిని వినియోగదారు ఫోల్డర్‌కు లింక్ చేయడం ద్వారా హాట్-రీలోడ్‌ని కాన్ఫిగర్ చేయవచ్చు. మరియు అభివృద్ధిలో ఉన్న క్లయింట్ స్థానికంగా హాట్ రీలోడ్‌తో ప్రారంభించబడాలి, విడిగా నడుస్తుంది సర్వర్ и మొంగో. ప్రత్యేక సేవను ప్రారంభించడానికి, దాని పేరును పేర్కొనండి docker-compose up client. కొన్నిసార్లు దీన్ని చేయడం మర్చిపోవద్దు prune మరియు వనరులను ఖాళీ చేయడానికి కంటైనర్‌లు, నెట్‌వర్క్‌లు మరియు చిత్రాలను తొలగించడం.

మీరు పూర్తి కోడ్‌ను చూడవచ్చు ఇక్కడ. ప్రాజెక్ట్ ఇంకా అభివృద్ధిలో ఉంది.

మూలం: www.habr.com