Dockerizza le app monolitiche

Di recente, ho voluto implementare docker per un'app, che ho sviluppato utilizzando Node.js e Angular. Ma il trucco qui è che sia il frontend che il backend risiedono nella stessa cartella. Naturalmente, sarebbe stato più semplice dividerli in repository separati e quindi dockerizzarli ciascuno. Ma ho deciso di non cambiare la struttura poiché l'app stessa era molto semplice, con funzionalità limitate e non volevo mantenere due repository diversi e ospitarli su server diversi. Potresti anche aver riscontrato tali problemi, specialmente quando lavori con un'app monolitica legacy. Quindi, proviamo a implementare docker insieme!

PREREQUISITI

1. Node.js e NPM—https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Postgresql —https://www.postgresql.org/download
3. Docker —https://docs.docker.com/get-docker

PORT=3000
ENV=development
URL=http://api.jsoneditoronline.org/v1/docs/088b6155ffc749e9a8ace0721f2cc384/data
SESSION_SECRET=psyduck
DB_USER=postgres
DB_PASSWORD=root

Segui questi comandi per eseguire il progetto nel tuo sistema:

npm install
npm run migrate
npm start

Apri localhost:3000nel tuo browser per vedere il progetto attivo e funzionante.

Nota: se vuoi vedere le modifiche in tempo reale per il frontend, esegui il comando npm run servein un terminale separato e apri localhost:4200.

Aggiunta della finestra mobile all'app

Nota: per aggiungere la finestra mobile, assicurarsi che la finestra mobile sia installata nel sistema. In caso contrario, segui questo link per installarlo.

Aggiungi Dockerfilealla directory principale del progetto. Questo contiene tutti i comandi da chiamare sulla riga di comando per assemblare un'immagine.

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD [ "npm", "run", "start" ]
EXPOSE 3000

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
CMD [ "npm", "run", "serve" ]

services:
  server:
    build:
      context: ./
      dockerfile: Dockerfileserver
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - client
  client:
    build:
      context: ./
      dockerfile: Dockerfileclient
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "4200:4200"

Nota: assicurati di eseguire docker desktop prima di eseguire questi comandi.

docker-compose build
docker-compose up

Prima dei docker, il frontend e il backend delle app erano in esecuzione su porte diverse 4200e 3000rispettivamente. Ma come comunicavano tra loro? La risposta sta nel file — proxy.conf.json. Questo dice al frontend che tutte le richieste API al server devono essere inoltrate a localhost:3000.

{
    "/api": {
      "target": "http://localhost:3000/",
      "secure": false
    }
}

{
    "/api": {
      "target": "http://server:3000/",
      "secure": false
    }
}

C'è un problema qui: se apportiamo modifiche al frontend, si riflette nell'app su una ricarica. Ma le modifiche nel server richiedono un riavvio dell'app. Per affrontare questo problema, usiamo nodemon.

Installa la libreria usando — npm install nodemon. Ora aggiungi lo script package.jsonper avviare l'app utilizzando nodemon:

"dev": "nodemon --ignore 'dist/*' server.js"

Per arrestare il contenitore docker, utilizzare il comando docker-compose down.

Nella prossima parte di questo blog, discuteremo su come aggiungere un database a questa app e farlo funzionare con i docker! Parte 2 in arrivo!

Spero che tu abbia trovato utile questo post e per favore fammi sapere in caso di domande o domande. Lascia un commento qui e ti risponderò sicuramente!