Come impacchettare l'applicazione VueJS + NodeJS + MongoDB in Docker

Come puoi capire dall'articolo precedente, ho lavorato su diversi progetti. I primi giorni in un nuovo team di solito vanno allo stesso modo: il backender si siede con me ed esegue azioni magiche per installare e distribuire l'applicazione. Docker è indispensabile per gli sviluppatori front-end perché... Il backend è spesso scritto in un'ampia gamma di stack PHP/Java/Python/C# e il front non deve distrarre il backend ogni volta per installare e distribuire tutto. Solo in un posto ho visto una combinazione Docker-Jenkins con distribuzione trasparente, log e test automatizzati.

Sono stati scritti molti articoli dettagliati su Docker. Questo articolo parlerà della distribuzione di un'applicazione a pagina singola utilizzando VueJS/Vue Router, la parte server è sotto forma di API RESTful con NodeJS e MongoDB viene utilizzato come database. Docker Compose viene utilizzato per definire ed eseguire più applicazioni contenitore.

Perché è necessario Docker

Docker ti consente di automatizzare il processo di distribuzione di un'applicazione. Lo sviluppatore non ha più bisogno di installare programmi da solo o di gestire l'incompatibilità delle versioni sul suo computer. Tutto quello che devi fare è installare Docker e digitare 1-2 comandi nella console. Il modo più conveniente per farlo è su Linux.

Per iniziare

Set docker ed Docker compone

Struttura delle cartelle

Creiamo 2 cartelle per le applicazioni client e server. Un file con estensione .yml è un file config Docker Compose, dove i contenitori delle applicazioni sono definiti e associati.
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

Creiamo 3 servizi in Docker: per NodeJS, MongoDB e per quelli statici in Vue. Aggiunto per connettere il client al server dipende dal server. Per collegare MongoDB all'API del server, utilizzare link mongo. Server, client, mongo: nomi dei servizi.

Cliente VueJS

Nella cartella /cliente L'applicazione è basata su VueJS. L'applicazione è stata creata utilizzando Vue Cli. Quando si crea un'immagine, l'applicazione client viene incorporata in un set di file statici nella cartella /dist. Il Dockerfile descrive una serie di comandi per creare un'immagine:

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

Tieni presente che package.json viene copiato e installato separatamente dal resto dei file di progetto. Questo viene fatto per le prestazioni, in modo che il contenuto della cartella /node_modules venga memorizzato nella cache durante la nuova creazione. Ogni riga di comando viene memorizzata nella cache separatamente.

Infine, all'avvio del contenitore, il comando viene eseguito npm run dev. Questo comando è descritto in package.json:

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

Per eseguire file da una cartella /dist, installato a livello globale http-servere nelle dipendenze dev il pacchetto spa-http-serverin modo che Vue Router funzioni correttamente. Il flag --push-state reindirizza a index.html. È stato aggiunto il flag -c con un valore di 1 secondo http server non ha memorizzato nella cache gli script. Questo è un esempio di prova; su un progetto reale è meglio usare nginx.

Nel negozio Vuex creiamo un campo apiHost: 'http://localhost:3000', dove è registrata la porta dell'API NodeJS. La parte client è pronta. Ora tutte le richieste dal client al retro vanno a questo URL.

API del server NodeJS

Nella cartella /server creare server.js e Dockerfile:

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

В server.js è indicato URL per banca dati const url = 'mongodb://mongo:27017/';. Consentire richieste interdominio da parte del client:

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

conclusione

Ora andiamo alla directory del progetto ed eseguiamo docker-compose build per costruire immagini e docker-compose up per eseguire i contenitori. La squadra solleverà 3 contenitori: server, client, mongo. Per un server NodeJS, puoi configurare il ricaricamento a caldo collegandolo alla cartella dell'utente. E il client in fase di sviluppo dovrebbe essere avviato localmente con ricarica a caldo, in esecuzione separatamente server и mongo. Per avviare un servizio separato, basta specificarne il nome docker-compose up client. Non dimenticare di farlo qualche volta prune ed eliminare contenitori, reti e immagini per liberare risorse.

Puoi vedere il codice completo qui. Il progetto è ancora in fase di sviluppo.

Fonte: habr.com