ProHoster > Π‘Π»ΠΎΠ³ > administratio > Quomodo ad sarcina VueJS + NodeJS + MongoDB applicatio in Docker

Quomodo ad sarcina VueJS + NodeJS + MongoDB applicatio in Docker

Quomodo ad sarcina VueJS + NodeJS + MongoDB applicatio in Docker
Sicut ex praecedente articulo intelligere potes, in variis inceptis laboravi. Primis diebus in nova quadriga eodem modo ire solent: advocatus mecum recumbit et actiones magicas exercet ut applicationem institutionem et explicandam. Docker necessarius est tincidunt ante finem, quia... Tergum saepe in amplis PHP/Java/Python/C# acervis scriptum est, et frons non habet tergum distrahere omni tempore ut omnia instituat et disponat. Uno tantum loco vidi compositionem Docker-Jenkins cum perspicuo instruere, tigna et probata automated.

Multa accurata de Docker articulo scripta sunt. Articulus hic loquetur de applicatione VueJS/Vue Router ad explicandam unicam paginam, pars ministrantis API cum NodeJS in forma restantis est, et MongoDB pro database adhibetur. Docker Componere adhibetur ut multiplices applicationes continens continentis definire et currere.

Quid Docker necesse est

Docker permittit ut processus automate explicandi applicationis. Elit non eget programmata sua sponte instituere vel cum versionis repugnantia in machina sua agere. Omnes vos postulo ut facere instituat Docker et typus 1-2 mandata in consolatorium. Modus commodissimus hoc facere est in Linux.

questus started

install Docker et Docker componere

Folder structuram

2 folder pro cliente et servo applicationes creamus. Fasciculus cum .yml extensio est config Epistola Dockerubi applicationes continentes definiuntur et associantur.
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 officia in Docker creamus: pro NodeJS, MongoDB et pro stativis in Vue. Additum ad coniungere clientis ut servo pendent servo. Ad MongoDB ligare cum servo API, utere nexus mongo. Servo, cliens, mongo - nomina officiorum.

VueJS clientis

in folder /cliens Applicatio innititur in VueJS. Usus est applicationem creatus est Vue Cli. Cum imaginem aedificat, client applicatio aedificatur in praeposito tabularum staticarum in folder /dist. In Dockerfile describit statuto mandatorum ad aedificandum imaginem;

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

Quaeso nota quod package.json exscriptus est et separatim a ceteris imagini documenti inauguratus est. Hoc ad faciendum fit, ut contenta /nodi_modulorum folder condiantur cum iterum aedificant. Quisque mandatum linea seorsim conditivo est.

Denique, ubi incipit continens, mandatum fit npm run dev. Hoc mandatum describitur in package.json:


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

Currere lima ex folder /dist, globally installed http-serveret in sarcina dev-pendentiae spa-http-serverut Vue Router recte. Vexillum publica --urna notiones ad index.html Vexillum cum -c in valorem of I secunda addita est http, server non scripta cache. Exemplum hoc probatum est: in re vera melius est uti nginx.

In Vuex copia nobis agrum creare apiHost: 'http://localhost:3000', uhi NodeJS Api portus commemoratur. Cliens pars parata est. Nunc omnes petitiones clientium ad tergum ad hunc domicilium pergunt.

NodeJS servo API

in folder /server creo server.js et Dockerfile: 


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

Π’ server.js indicata url pro database const url = 'mongodb://mongo:27017/';. Permittens crucem-domain petitiones clientis;


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

conclusio,

Nunc eamus ad directorium et curriculum docker-compose build ad construendum imagines et docker-compose up currere continentia. Manipulus levabit 3 continentia; servo, cliens, mongo. Pro servo NodeJS, configurare potes calidum reload iungendo cum folder utentis. Et client sub evolutione localiter immitti debet cum reload calida, separatim discurrens Server ΠΈ Brunfelsia. Ut officium separatum committitur, nomen eius denota docker-compose up client. Noli oblivisci ut faciam illud interdum prune et vasis, reticulis, et imaginibus deletis ad facultates liberandas.

Potes videre plenam codice hic. Exertus adhuc progressus sub.

Source: www.habr.com