Πώς να πακετάρετε την εφαρμογή VueJS + NodeJS + MongoDB στο Docker

Όπως μπορείτε να δείτε από το προηγούμενο άρθρο, δούλεψα με διαφορετικά έργα. Οι πρώτες μέρες σε μια νέα ομάδα συνήθως πάνε με τον ίδιο τρόπο: το backender κάθεται κοντά μου και εκτελεί τα μαγικά βήματα για την εγκατάσταση και την ανάπτυξη της εφαρμογής. Το Docker είναι απαραίτητο για προγραμματιστές front-end, γιατί. Το backend είναι συχνά γραμμένο σε ένα ευρύ φάσμα στοίβων PHP/Java/Python/C# και το μπροστινό μέρος δεν χρειάζεται να αποσπά την προσοχή του πίσω μέρους κάθε φορά για να εγκαταστήσει και να αναπτύξει τα πάντα. Μόνο σε ένα μέρος είδα ένα σωρό Docker-Jenkins με διάφανη ανάπτυξη, κούτσουρα, βιδωμένα με autotests.

Πολλά αναλυτικά άρθρα έχουν γραφτεί για το docker. Αυτό το άρθρο θα επικεντρωθεί στην ανάπτυξη μιας εφαρμογής μιας σελίδας χρησιμοποιώντας VueJS / Vue Router, το τμήμα διακομιστή με τη μορφή RESTful API με NodeJS και το MongoDB χρησιμοποιείται ως βάση δεδομένων. Το Docker Compose χρησιμοποιείται για την περιγραφή και την εκτέλεση πολλαπλών εφαρμογών κοντέινερ.

Γιατί χρειάζεστε το Docker

Το Docker σάς επιτρέπει να αυτοματοποιήσετε τη διαδικασία ανάπτυξης μιας εφαρμογής. Ο προγραμματιστής δεν χρειάζεται πλέον να εγκαθιστά προγράμματα μόνος του, να αντιμετωπίζει την ασυμβατότητα της έκδοσης στον υπολογιστή του. Αρκεί να εγκαταστήσετε το Docker και να πληκτρολογήσετε 1-2 εντολές στην κονσόλα. Είναι πιο βολικό να το κάνετε αυτό στο Linux.

Ξεκινώντας

Σετ Λιμενεργάτης και Docker σύνθεση

Δομή φακέλου

Δημιουργούμε 2 φακέλους για εφαρμογές πελάτη και διακομιστή. Ένα αρχείο με επέκταση .yml είναι μια ρύθμιση παραμέτρων Docker Composeόπου ορίζονται και συνδέονται τα κοντέινερ της εφαρμογής.
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 υπηρεσίες στο docker: για NodeJS, MongoDB και για στατικά στο Vue. Για σύνδεση πελάτη με διακομιστή προστέθηκε εξαρτάται από τον διακομιστή. Για να συνδέσετε το MongoDB με το API διακομιστή, χρησιμοποιήστε συνδέσεις mongo. Διακομιστής, πελάτης, mongo είναι τα ονόματα των υπηρεσιών.

Πελάτης VueJS

Σε φάκελο /πελάτης η εφαρμογή βρίσκεται στο VueJS. Η εφαρμογή δημιουργήθηκε με vue cli. Κατά τη δημιουργία μιας εικόνας, η εφαρμογή πελάτη είναι ενσωματωμένη σε ένα σύνολο στατικών αρχείων σε έναν φάκελο /διστ. Το Dockerfile περιγράφει ένα σύνολο εντολών για τη δημιουργία μιας εικόνας:

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

Σημειώστε ότι το package.json αντιγράφεται και εγκαθίσταται ξεχωριστά από τα υπόλοιπα αρχεία του έργου. Αυτό γίνεται για απόδοση, ώστε τα περιεχόμενα του φακέλου /node_modules να αποθηκευτούν στην προσωρινή μνήμη κατά την ανακατασκευή. Κάθε γραμμή εντολών αποθηκεύεται στην κρυφή μνήμη ξεχωριστά.

Στο τέλος, κατά την εκκίνηση του κοντέινερ, εκτελείται η εντολή npm run dev. Αυτή η εντολή περιγράφεται στο package.json:

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

Για να εκτελέσετε αρχεία από έναν φάκελο /διστ, σε παγκόσμιο επίπεδο http-serverκαι σε πακέτο εξαρτήσεων dev spa-http-serverγια να λειτουργήσει σωστά το Vue Router. Η σημαία --push-state ανακατευθύνει στο index.html. Προστέθηκε η σημαία -c με τιμή 1 δευτερόλεπτο http-διακομιστής δεν έκανε προσωρινή αποθήκευση σεναρίων. Αυτό είναι ένα παράδειγμα δοκιμής, σε ένα πραγματικό έργο είναι καλύτερο να χρησιμοποιήσετε το nginx.

Δημιουργήστε ένα πεδίο στο κατάστημα Vuex apiHost: 'http://localhost:3000', όπου είναι γραμμένη η θύρα NodeJS Api. Το τμήμα πελάτη είναι έτοιμο. Τώρα όλα τα αιτήματα από τον πελάτη προς το πίσω μέρος πηγαίνουν σε αυτό το url.

NodeJS Server API

Σε φάκελο /server δημιουργώ διακομιστής.js και Dockerfile:

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

В διακομιστής.js υποδεικνύεται url για βάση δεδομένων const url = 'mongodb://mongo:27017/';. Επιτρέπουμε αιτήματα μεταξύ τομέων από τον πελάτη:

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

Συμπέρασμα

Τώρα μεταβείτε στον κατάλογο του έργου και εκτελέστε docker-compose build για απεικόνιση και docker-compose up να τρέχουν δοχεία. Η εντολή θα σηκώσει 3 κοντέινερ: διακομιστής, πελάτης, mongo. Για έναν διακομιστή NodeJS, μπορείτε να ρυθμίσετε τις παραμέτρους της hot-reload συνδέοντάς τον με το φάκελο χρήστη. Και ο πελάτης βρίσκεται υπό ανάπτυξη για να εκτελείται τοπικά με hot reload, που εκτελείται χωριστά διακομιστής и Mongo. Για να ξεκινήσετε μια ξεχωριστή υπηρεσία, απλώς καθορίστε το όνομά της docker-compose up client. Μην ξεχνάτε να το κάνετε μερικές φορές prune και αφαίρεση κοντέινερ (κοντέινερ), δικτύων (δίκτυα) και εικόνων (εικόνων) για την απελευθέρωση πόρων.

Μπορείτε να δείτε τον πλήρη κωδικό εδώ. Το έργο είναι ακόμη υπό ανάπτυξη.

Πηγή: www.habr.com