ProHoster > Π‘Π»ΠΎΠ³ > Maamulka > Sida loo xidho codsiga VueJS + NodeJS + MongoDB gudaha Docker

Sida loo xidho codsiga VueJS + NodeJS + MongoDB gudaha Docker

Sida loo xidho codsiga VueJS + NodeJS + MongoDB gudaha Docker
Sida aad ka fahmi karto maqaalkii hore, waxaan ka shaqeeyay mashaariic kala duwan. Maalmaha ugu horreeya ee kooxda cusub sida caadiga ah waxay u socdaan si la mid ah: dhabarka ayaa ila fadhiista oo sameeya ficillo sixir ah si loo rakibo oo loo geeyo codsiga. Docker waa lama huraan u ah horumarinta-dhamaadka hore sababtoo ah ... Dhabarka dambe ayaa inta badan lagu qoraa tiro balaadhan oo ah PHP/Java/Python/C # xidhmooyin, horena uma baahna in ay ka jeediyaan dhabarka dambe mar kasta si loo rakibo oo loo geeyo wax kasta. Hal meel oo kaliya ayaan ku arkay Docker-Jenkins isku-dar ah oo leh hawlgelin daah-furan, logs, iyo tijaabooyin otomaatig ah.

Maqaallo badan oo faahfaahsan ayaa laga qoray Docker. Maqaalkani waxa uu ka hadli doonaa geynta Hal Bog Codsi ah iyada oo la adeegsanayo VueJS/Vue Router, qaybta server-ku waa qaabka API RESTful leh NodeJS, iyo MongoDB waxaa loo isticmaalaa kayd ahaan. Docker Compose waxaa loo isticmaalaa in lagu qeexo oo lagu socodsiiyo codsiyada weelka badan.

Waa maxay sababta Docker loogu baahan yahay

Docker wuxuu kuu ogolaanayaa inaad si otomaatig ah u habeyso habka geynta codsiga. Horumariyuhu uma baahna in uu keligiis ku rakibo barnaamijyo ama uu la tacaalo la'aanta nooca mishiinkiisa. Waxa kaliya ee aad u baahan tahay inaad sameyso waa inaad ku rakibto Docker oo ku qor 1-2 amarada console-ka. Habka ugu habboon ee tan loo sameeyo waa Linux.

Bilaabayaa

Ku rakib Docker iyo Docker curiye

Qaab dhismeedka faylka

Waxaan u abuurnaa 2 galalka macaamiisha iyo codsiyada server-ka. Faylka leh kordhinta .yml waa habayn Qodobbada, halkaas oo weelasha codsiga lagu qeexay laguna xiriiriyay.
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

Waxaan ka abuurnaa 3 adeegyo gudaha Docker: loogu talagalay NodeJS, MongoDB iyo kuwa taagan Vue. Lagu daray si loogu xidho macmiilka server-ka waxay ku xiran tahay server-ka. Si aad MongoDB ugu xidho API server-ka, isticmaal links mongo. Adeegaha, macmiilka, mongo - magacyada adeegyada.

VueJS macmiilka

Gal gal /macmiilka Codsigu wuxuu ku salaysan yahay VueJS. Codsiga waxaa la sameeyay iyadoo la isticmaalayo Vue Cli. Marka sawirka la dhisayo, codsiga macmiilka waxa lagu dhisay faylal sugan oo gal ah /dist. Dockerfile-ku waxa uu qeexayaa go'an amarada dhismaha sawirka:

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

Fadlan ogow in pack.json la koobiyay oo lagu rakibay si ka gooni ah inta kale ee faylasha mashruuca. Tan waxaa loo sameeyaa waxqabadka, si waxa ku jira gal / node_modules loo kaydiyo marka dib loo dhisayo. Khad kasta oo talis ah si gaar ah ayaa loo kaydiyay.

Ugu dambeyntii, marka weelku bilaabo, amarka waa la fuliyay npm run dev. Amarka waxaa lagu sifeeyay pack.json:


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

Si aad faylasha uga socodsiiso galka /dist, lagu rakibay si caalami ah http-server, iyo in dev-dependencies xirmada spa-http-serversi uu Vue Router si sax ah u shaqeeyo. Calanka --push-state wuxuu u jiheeyaa index.html. Calanka -c oo qiimihiisu yahay 1 ilbiriqsi ayaa lagu daray http-server ma kaydin qoraallada. Tani waa tusaale tijaabo ah; mashruuc dhab ah waxa fiican in la isticmaalo nginx.

Dukaanka Vuex waxaan ka abuurnaa garoon apiHost: 'http://localhost:3000', halkaas oo dekedda NodeJS Api ka diiwaangashan tahay. Qaybta macmiilku waa diyaar. Hadda dhammaan codsiyada macmiilka ee xagga dambe waxay aadaan url-kan.

NodeJS server API

Gal gal /server abuurto server.js iyo Dockerfile: 


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

Π’ server.js tilmaamay url database const url = 'mongodb://mongo:27017/';. Oggolaanshaha codsiyada isdhaafsiga ee macmiilka:


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

gunaanad

Hadda aynu tagno buugga mashruuca oo orod docker-compose build dhismaha sawirada iyo docker-compose up si ay u ordaan weelasha. Kooxdu waxay qaadi doontaa 3 weel: server, macmiil, mongo. Adeegga NodeJS, waxaad u habayn kartaa dib-u-kicinta kulul adiga oo ku xiraya galka isticmaalaha. Iyo macmiilka ku jira horumarinta waa in lagu soo bandhigaa gudaha gudaha iyada oo dib u celin kulul, oo si gooni ah u shaqeynaya server ΠΈ mongo. Si aad u bilowdo adeeg gaar ah, kaliya sheeg magaciisa docker-compose up client. Ha iloobin inaad sameyso mararka qaarkood prune iyo tirtirida weelasha, shabakadaha, iyo sawirada si loo xoreeyo ilaha.

Waxaad arki kartaa koodka buuxa halkan. Mashruucu wali wuu socdaa.

Source: www.habr.com

Add a comment