VueJS + NodeJS + MongoDB መተግበሪያን በ Docker እንዴት ማሸግ እንደሚቻል

VueJS + NodeJS + MongoDB መተግበሪያን በ Docker እንዴት ማሸግ እንደሚቻል
ካለፈው ጽሑፍ ማየት እንደምትችለው, ከተለያዩ ፕሮጀክቶች ጋር ሠርቻለሁ. በአዲስ ቡድን ውስጥ ያሉት የመጀመሪያዎቹ ቀናት ብዙውን ጊዜ በተመሳሳይ መንገድ ይሄዳሉ፡ ደጋፊው በእኔ ላይ ተቀምጦ መተግበሪያውን ለመጫን እና ለማሰማራት አስማታዊ እርምጃዎችን ያከናውናል። Docker ለፊት-መጨረሻ ገንቢዎች በጣም አስፈላጊ ነው, ምክንያቱም. የኋለኛው ክፍል ብዙ ጊዜ በ PHP/Java/Python/C# ቁልል ውስጥ ይፃፋል እና የፊት ለፊቱ ሁሉንም ነገር ለመጫን እና ለማሰማራት በእያንዳንዱ ጊዜ ጀርባውን ማዘናጋት አያስፈልገውም። በአንድ ቦታ ላይ ብቻ የዶከር-ጄንኪንስ ስብስብን በግልፅ ማሰማራት፣ ምዝግብ ማስታወሻዎች፣ በአውቶሞተሮች የተበላሹ አየሁ።

ስለ ዶከር ብዙ ዝርዝር ጽሑፎች ተጽፈዋል። ይህ መጣጥፍ የሚያተኩረው VueJS/Vue Routerን በመጠቀም የነጠላ ገጽ መተግበሪያን በማሰማራት ላይ ሲሆን የአገልጋዩ ክፍል በ RESTful API ከ NodeJS እና MongoDB እንደ ዳታቤዝ ጥቅም ላይ ይውላል። Docker Compose በርካታ የመያዣ አፕሊኬሽኖችን ለመግለፅ እና ለማሄድ ይጠቅማል።

ለምን Docker ያስፈልግዎታል

Docker መተግበሪያን የማሰማራት ሂደትን በራስ-ሰር እንዲያዘጋጁ ይፈቅድልዎታል። ገንቢው ከአሁን በኋላ ፕሮግራሞችን በራሱ መጫን አያስፈልገውም, በእሱ ማሽን ላይ ካለው የስሪት አለመጣጣም ጋር ይገናኙ. ዶከርን መጫን እና 1-2 ትዕዛዞችን ወደ ኮንሶል መተየብ በቂ ነው. በሊኑክስ ላይ ይህን ለማድረግ በጣም ምቹ ነው.

መጀመር

ጫን Dockerዶከር አዘጋጅ

የአቃፊ መዋቅር

ለደንበኛ እና ለአገልጋይ መተግበሪያዎች 2 አቃፊዎችን እንፈጥራለን። የ.yml ቅጥያ ያለው ፋይል ውቅር ነው። Docker Composeየመተግበሪያው መያዣዎች የተገለጹበት እና የተገናኙበት.
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። ደንበኛን ከአገልጋይ ጋር ለማገናኘት ታክሏል። በአገልጋዩ ላይ የተመሰረተ ነው. MongoDBን ከአገልጋዩ API ጋር ለማገናኘት ይጠቀሙ አገናኞች ሞንጎ. አገልጋይ፣ ደንበኛ፣ ሞንጎ የአገልግሎቶቹ ስሞች ናቸው።

የVueJS ደንበኛ

በአቃፊ ውስጥ / ደንበኛ መተግበሪያው በVueJS ላይ ይገኛል። መተግበሪያ የተፈጠረ ዌ ክሊ. ምስልን በሚገነቡበት ጊዜ የደንበኛው መተግበሪያ በአቃፊ ውስጥ ባሉ የማይንቀሳቀሱ ፋይሎች ውስጥ ተገንብቷል። /dist. Dockerfile ምስልን ለመገንባት የትእዛዞችን ስብስብ ይገልጻል፡-

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. ይህ ትዕዛዝ በ package.json ውስጥ ተገልጿል፡-


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

ፋይሎችን ከአቃፊ ለማሄድ /dist፣ በዓለም አቀፍ ደረጃ ተዘጋጅቷል። http-server, እና በዴቭ-ጥገኛዎች ጥቅል ውስጥ spa-http-serverVue ራውተር በትክክል እንዲሰራ ለማድረግ. የ --push-state ባንዲራ ወደ index.html ያዞራል። የ-c ባንዲራ ከ1 ሰከንድ እሴት ጋር ተጨምሯል። http-አገልጋይ ስክሪፕቶችን አልሸጎጠም። ይህ የሙከራ ምሳሌ ነው, በእውነተኛ ፕሮጀክት ላይ nginx ን መጠቀም የተሻለ ነው.

በ Vuex መደብር ውስጥ መስክ ይፍጠሩ apiHost: 'http://localhost:3000', የ NodeJS Api ወደብ የተጻፈበት. የደንበኛው ክፍል ዝግጁ ነው። አሁን ሁሉም ከደንበኛው ወደ ኋላ መጨረሻ የሚቀርቡ ጥያቄዎች ወደዚህ ዩአርኤል ይሄዳሉ።

NodeJS አገልጋይ ኤፒአይ

በአቃፊ ውስጥ /server መፍጠር አገልጋይ እና ዶከርፋይል፡-


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

В አገልጋይ አመልክቷል ዩ አር ኤል ለዳታቤዝ 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 አገልጋይ ትኩስ-ዳግም መጫንን ከተጠቃሚው አቃፊ ጋር በማገናኘት ማዋቀር ይችላሉ። እና ደንበኛው በሙቅ ዳግም መጫን፣ ለብቻው እየሮጠ በአካባቢው እንዲሄድ በመገንባት ላይ ነው። አገልጋይ и mongo. የተለየ አገልግሎት ለመጀመር ስሙን ብቻ ይጥቀሱ docker-compose up client. አንዳንድ ጊዜ ማድረግዎን አይርሱ prune እና እቃዎችን ለማስለቀቅ መያዣዎችን (ኮንቴይነሮችን), አውታረ መረቦችን (አውታረ መረቦችን) እና ምስሎችን (ምስሎችን) ማስወገድ.

ሙሉውን ኮድ ማየት ይችላሉ። እዚህ. ፕሮጀክቱ አሁንም በመገንባት ላይ ነው.

ምንጭ: hab.com

አስተያየት ያክሉ