ProHoster > blog > administratie > Hoe de VueJS + NodeJS + MongoDB-applicatie in Docker te verpakken

Hoe de VueJS + NodeJS + MongoDB-applicatie in Docker te verpakken

Hoe de VueJS + NodeJS + MongoDB-applicatie in Docker te verpakken
Zoals je uit het vorige artikel kunt begrijpen, heb ik aan verschillende projecten gewerkt. De eerste dagen in een nieuw team verlopen meestal op dezelfde manier: de backender gaat bij mij zitten en voert magische acties uit om de applicatie te installeren en uit te rollen. Docker is onmisbaar voor front-end ontwikkelaars omdat... De backend is vaak geschreven in een breed scala aan PHP/Java/Python/C#-stacks, en de voorkant hoeft de backend niet elke keer af te leiden om alles te installeren en te implementeren. Slechts op één plek zag ik een Docker-Jenkins-combinatie met een transparante implementatie, logs en geautomatiseerde tests.

Er zijn veel gedetailleerde artikelen over Docker geschreven. In dit artikel wordt gesproken over het implementeren van een Single Page Application met behulp van VueJS/Vue Router, het servergedeelte heeft de vorm van een RESTful API met NodeJS en MongoDB wordt gebruikt als database. Docker Compose wordt gebruikt om meerdere containerapplicaties te definiëren en uit te voeren.

Waarom Docker nodig is

Met Docker kunt u het implementatieproces van een applicatie automatiseren. De ontwikkelaar hoeft niet langer zelf programma's te installeren of om te gaan met versie-incompatibiliteit op zijn machine. Het enige wat u hoeft te doen is Docker installeren en 1-2 opdrachten in de console typen. De handigste manier om dit te doen is op Linux.

Aan de slag

Ingesteld havenarbeider en Docker samenstellen

Mappen structuur

We maken 2 mappen aan voor client- en servertoepassingen. Een bestand met de extensie .yml is een config Docker Compose, waar applicatiecontainers worden gedefinieerd en gekoppeld.
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

We creëren 3 services in Docker: voor NodeJS, MongoDB en voor statische services in Vue. Toegevoegd om client met server te verbinden hangt af van de server. Gebruik om MongoDB te koppelen aan de server-API links mongo. Server, client, mongo - namen van services.

VueJS-client

In map /cliënt De applicatie is gebaseerd op VueJS. De applicatie is gemaakt met behulp van Vue Cl. Bij het bouwen van een image wordt de clienttoepassing ingebouwd in een reeks statische bestanden in de map / dist. Het Dockerfile beschrijft een reeks opdrachten voor het bouwen van een afbeelding:

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

Houd er rekening mee dat package.json afzonderlijk van de rest van de projectbestanden wordt gekopieerd en geïnstalleerd. Dit wordt gedaan voor de prestaties, zodat de inhoud van de map /node_modules in de cache wordt opgeslagen wanneer er opnieuw wordt gebouwd. Elke opdrachtregel wordt afzonderlijk in de cache opgeslagen.

Wanneer de container ten slotte start, wordt de opdracht uitgevoerd npm run dev. Deze opdracht wordt beschreven in package.json:


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

Om bestanden uit een map uit te voeren / dist, wereldwijd geïnstalleerd http-server, en in dev-afhankelijkheden het pakket spa-http-serverzodat Vue Router correct werkt. De --push-state vlag verwijst door naar index.html. De vlag -c met een waarde van 1 seconde is toegevoegd http-server heeft geen scripts in de cache opgeslagen. Dit is een testvoorbeeld; voor een echt project is het beter om nginx te gebruiken.

In de Vuex-winkel creëren we een veld apiHost: 'http://localhost:3000', waar de NodeJS Api-poort is geregistreerd. Het klantengedeelte is klaar. Nu gaan alle verzoeken van de client naar achteren naar deze url.

NodeJS-server-API

In map /server creëren server.js en Dockerbestand: 


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

В server.js aangegeven url voor databank const url = 'mongodb://mongo:27017/';. Cross-domein verzoeken van de client toestaan:


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

Conclusie

Laten we nu naar de projectmap gaan en uitvoeren docker-compose build voor het construeren van afbeeldingen en docker-compose up containers laten draaien. Het team zal 3 containers hijsen: server, klant, mongo. Voor een NodeJS-server kunt u hot-reload configureren door deze aan de gebruikersmap te koppelen. En de client die in ontwikkeling is, moet lokaal worden gelanceerd met hot reload, die afzonderlijk wordt uitgevoerd server и mongo. Om een ​​afzonderlijke service te starten, geeft u gewoon de naam op docker-compose up client. Vergeet het niet af en toe te doen prune en het verwijderen van containers, netwerken en afbeeldingen om bronnen vrij te maken.

Je kunt de volledige code zien hier. Het project is nog in ontwikkeling.

Bron: www.habr.com

Voeg een reactie