ProHoster > blog > Gweinyddiaeth > Sut i becynnu cais VueJS + NodeJS + MongoDB yn Docker

Sut i becynnu cais VueJS + NodeJS + MongoDB yn Docker

Sut i becynnu cais VueJS + NodeJS + MongoDB yn Docker
Fel y gallwch ddeall o'r erthygl flaenorol, bûm yn gweithio ar wahanol brosiectau. Mae'r dyddiau cyntaf mewn tîm newydd fel arfer yn mynd yr un ffordd: mae'r backender yn eistedd i lawr gyda mi ac yn perfformio gweithredoedd hudolus i osod a defnyddio'r rhaglen. Mae Docker yn anhepgor i ddatblygwyr pen blaen oherwydd ... Mae'r backend yn aml yn cael ei ysgrifennu mewn ystod eang o staciau PHP/Java/Python/C#, ac nid oes rhaid i'r blaen dynnu sylw'r pen ôl bob tro i osod a defnyddio popeth. Dim ond mewn un lle y gwelais gyfuniad Docker-Jenkins gyda gosodiad tryloyw, logiau, a phrofion awtomataidd.

Mae llawer o erthyglau manwl wedi'u hysgrifennu am Docker. Bydd yr erthygl hon yn sôn am ddefnyddio Cais Tudalen Sengl gan ddefnyddio VueJS / Vue Router, mae rhan y gweinydd ar ffurf API RESTful gyda NodeJS, a defnyddir MongoDB fel cronfa ddata. Defnyddir Docker Compose i ddiffinio a rhedeg cymwysiadau cynhwysydd lluosog.

Pam mae angen Docker

Mae Docker yn caniatáu ichi awtomeiddio'r broses o ddefnyddio cais. Nid oes angen i'r datblygwr bellach osod rhaglenni ar ei ben ei hun na delio ag anghydnawsedd fersiwn ar ei beiriant. Y cyfan sy'n rhaid i chi ei wneud yw gosod Docker a theipio gorchmynion 1-2 i'r consol. Y ffordd fwyaf cyfleus o wneud hyn yw ar Linux.

Dechrau arni

Gosod Docker ac Docker cyfansoddi

Strwythur ffolder

Rydym yn creu 2 ffolder ar gyfer cymwysiadau cleient a gweinydd. Mae ffeil gyda'r estyniad .yml yn config Cyfansoddwr Dociwr, lle mae cynwysyddion cais wedi'u diffinio ac yn gysylltiedig.
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

Rydym yn creu 3 gwasanaeth yn Docker: ar gyfer NodeJS, MongoDB ac ar gyfer rhai statig yn Vue. Ychwanegwyd i gysylltu cleient â gweinydd yn dibynnu ar y gweinydd. I gysylltu MongoDB â'r API gweinydd, defnyddiwch cysylltiadau mongo. Gweinydd, cleient, mongo - enwau gwasanaethau.

cleient VueJS

Yn y ffolder / cleient Mae'r cais yn seiliedig ar VueJS. Crëwyd y cais gan ddefnyddio Vue Cli. Wrth adeiladu delwedd, mae'r rhaglen cleient wedi'i chynnwys mewn set o ffeiliau statig yn y ffolder / pell. Mae'r Dockerfile yn disgrifio set o orchmynion ar gyfer adeiladu delwedd:

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

Sylwch fod pack.json yn cael ei gopïo a'i osod ar wahân i weddill ffeiliau'r prosiect. Gwneir hyn ar gyfer perfformiad, fel bod cynnwys y ffolder /node_modules yn cael ei storio wrth adeiladu eto. Mae pob llinell orchymyn yn cael ei storio ar wahân.

Yn olaf, pan fydd y cynhwysydd yn cychwyn, gweithredir y gorchymyn npm run dev. Disgrifir y gorchymyn hwn yn package.json:


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

I redeg ffeiliau o ffolder / pell, gosod yn fyd-eang http-server, ac mewn dev-ddibyniaethau y pecyn spa-http-serverfel bod Vue Router yn gweithio'n gywir. Mae'r faner --push-state yn ailgyfeirio i index.html. Ychwanegwyd at y faner -c gwerth 1 eiliad http-gweinydd heb storio sgriptiau. Mae hon yn enghraifft brawf; ar brosiect go iawn mae'n well defnyddio nginx.

Yn siop Vuex rydym yn creu cae apiHost: 'http://localhost:3000', lle mae porthladd NodeJS Api wedi'i gofrestru. Mae rhan y cleient yn barod. Nawr mae pob cais gan y cleient i'r cefn yn mynd i'r url hwn.

API gweinydd NodeJS

Yn y ffolder /server creu gweinydd.js a Dockerfile: 


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

В gweinydd.js wedi'i nodi url ar gyfer cronfa ddata const url = 'mongodb://mongo:27017/';. Caniatáu ceisiadau traws-barth gan y cleient:


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

Casgliad

Nawr, gadewch i ni fynd i'r cyfeiriadur prosiect a rhedeg docker-compose build ar gyfer adeiladu delweddau a docker-compose up i redeg cynwysyddion. Bydd y tîm yn codi 3 cynhwysydd: gweinydd, cleient, mongo. Ar gyfer gweinydd NodeJS, gallwch chi ffurfweddu ail-lwytho poeth trwy ei gysylltu â'r ffolder defnyddiwr. A dylai'r cleient sy'n cael ei ddatblygu gael ei lansio'n lleol gydag ail-lwytho poeth, yn rhedeg ar wahân gweinydd и mongo. I ddechrau gwasanaeth ar wahân, nodwch ei enw docker-compose up client. Peidiwch ag anghofio ei wneud weithiau prune a dileu cynwysyddion, rhwydweithiau a delweddau i ryddhau adnoddau.

Gallwch weld y cod llawn yma. Mae'r prosiect yn dal i gael ei ddatblygu.

Ffynhonnell: hab.com

Ychwanegu sylw