Yuav ua li cas pob VueJS + NodeJS + MongoDB daim ntawv thov hauv Docker

Raws li koj tuaj yeem nkag siab los ntawm tsab xov xwm dhau los, kuv tau ua haujlwm ntawm cov haujlwm sib txawv. Thawj hnub hauv pab pawg tshiab feem ntau mus tib yam: tus backender zaum nrog kuv thiab ua tej yam yees siv rau nruab thiab xa daim ntawv thov. Docker yog qhov tseem ceeb rau cov neeg tsim tawm pem hauv ntej vim tias ... Lub backend feem ntau sau rau hauv ntau yam ntawm PHP / Java / Python / C# pawg, thiab pem hauv ntej tsis tas yuav cuam tshuam lub backend txhua lub sijhawm los nruab thiab xa tawm txhua yam. Tsuas yog nyob rau hauv ib qho chaw kuv puas pom Docker-Jenkins ua ke nrog kev xa tawm pob tshab, cov ntawv teev lus, thiab cov kev xeem automated.

Ntau cov ncauj lus ntxaws tau sau txog Docker. Tsab ntawv xov xwm no yuav tham txog kev xa ib Daim Ntawv Thov Ib Ntus siv VueJS / Vue Router, tus neeg rau zaub mov feem yog nyob rau hauv daim ntawv ntawm RESTful API nrog NodeJS, thiab MongoDB siv los ua cov ntaub ntawv. Docker Compose yog siv los txhais thiab khiav ntau lub thawv ntawv.

Vim li cas Docker xav tau

Docker tso cai rau koj los ua kom tiav cov txheej txheem ntawm kev xa ib daim ntawv thov. Tus tsim tawm tsis tas yuav tsum tau nruab cov kev pab cuam ntawm nws tus kheej lossis cuam tshuam nrog version incompatibility ntawm nws lub tshuab. Txhua yam koj yuav tsum tau ua yog nruab Docker thiab ntaus 1-2 cov lus txib rau hauv lub console. Txoj kev yooj yim tshaj plaws los ua qhov no yog ntawm Linux.

Mus pib

Nruab docker thiab Docker sau

Folder qauv

Peb tsim 2 folders rau cov neeg siv khoom thiab cov ntawv thov server. Ib cov ntaub ntawv nrog lub .yml extension yog config Docker Compose, qhov twg daim ntawv thov ntim tau txhais thiab txuam nrog.
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

Peb tsim 3 cov kev pabcuam hauv Docker: rau NodeJS, MongoDB thiab rau cov zoo li qub hauv Vue. Ntxiv rau txuas tus neeg siv khoom rau server nyob ntawm server. Txhawm rau txuas MongoDB nrog server API, siv links mongo. Server, client, mongo - npe ntawm cov kev pabcuam.

VueJS client

Hauv ntawv tais ceev tseg / neeg siv Daim ntawv thov yog raws li VueJS. Daim ntawv thov raug tsim siv Vue Cli. Thaum tsim cov duab, daim ntawv thov tus neeg siv tau tsim rau hauv cov ntaub ntawv zoo li qub hauv daim nplaub tshev /dist. Dockerfile piav qhia txog cov lus txib rau kev tsim cov duab:

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

Thov nco ntsoov tias package.json tau theej thiab nruab cais los ntawm tus so ntawm cov ntaub ntawv qhov project. Qhov no yog ua tiav rau kev ua tau zoo, kom cov ntsiab lus ntawm /node_modules folder yog cached thaum tsim dua. Txhua kab hais kom ua yog cached nyias.

Thaum kawg, thaum lub thawv pib, cov lus txib raug tua npm run dev. Cov lus txib no tau piav qhia hauv package.json:

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

Txhawm rau khiav cov ntaub ntawv los ntawm ib lub nplaub tshev /dist, ntsia thoob ntiaj teb http-server, thiab hauv dev-dependencies lub pob spa-http-serverkom Vue Router ua haujlwm raug. Tus chij --push-state redirects rau index.html. Tus chij -c nrog tus nqi ntawm 1 thib ob tau ntxiv rau http-server tsis cache scripts. Qhov no yog qhov piv txwv sim; ntawm qhov project tiag nws yog qhov zoo dua los siv nginx.

Hauv khw Vuex peb tsim ib daim teb apiHost: 'http://localhost:3000', qhov twg NodeJS Api chaw nres nkoj tau sau npe. Cov neeg siv khoom tau npaj txhij. Tam sim no txhua qhov kev thov los ntawm tus neeg siv khoom rov qab mus rau qhov url no.

NodeJS server API

Hauv ntawv tais ceev tseg /server tsim server.js thiab Dockerfile:

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

В server.js qhia url rau database const url = 'mongodb://mongo:27017/';. Tso cai hla kev thov los ntawm tus neeg siv khoom:

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

xaus

Tam sim no cia peb mus rau qhov project directory thiab khiav docker-compose build tsim cov duab thiab docker-compose up khiav ntim. Pab neeg no yuav nqa 3 lub thawv: server, client, mongo. Rau NodeJS neeg rau zaub mov, koj tuaj yeem teeb tsa kub-reload los ntawm kev txuas nws mus rau tus neeg siv ntawv tais ceev tseg. Thiab tus neeg siv khoom hauv kev txhim kho yuav tsum tau pib hauv zos nrog kub reload, khiav nyias neeg rau zaub mov и mongo. Txhawm rau pib qhov kev pabcuam cais, tsuas yog qhia nws lub npe docker-compose up client. Tsis txhob hnov ​​​​qab ua qee zaum prune thiab rho tawm cov thawv, tes hauj lwm, thiab cov duab kom tso cov peev txheej.

Koj tuaj yeem pom tag nrho cov lej S, SѓS,. Qhov project tseem tab tom txhim kho.

Tau qhov twg los: www.hab.com