Jak spakować aplikację VueJS + NodeJS + MongoDB w Dockerze

Jak można zrozumieć z poprzedniego artykułu, pracowałem nad różnymi projektami. Pierwsze dni w nowym zespole zazwyczaj przebiegają tak samo: backender siada ze mną i wykonuje magiczne czynności, aby zainstalować i wdrożyć aplikację. Docker jest niezbędny dla programistów front-end, ponieważ... Backend jest często napisany w szerokiej gamie stosów PHP/Java/Python/C#, a przód nie musi odwracać uwagi backendu za każdym razem, gdy wszystko instaluje się i wdraża. Tylko w jednym miejscu widziałem kombinację Docker-Jenkins z przejrzystym wdrożeniem, logami i automatycznymi testami.

Na temat Dockera napisano wiele szczegółowych artykułów. W tym artykule omówiono wdrażanie aplikacji jednostronicowej przy użyciu routera VueJS/Vue, część serwerowa ma postać RESTful API z NodeJS, a MongoDB jest używany jako baza danych. Docker Compose służy do definiowania i uruchamiania wielu aplikacji kontenerowych.

Dlaczego Docker jest potrzebny

Docker pozwala zautomatyzować proces wdrażania aplikacji. Programista nie musi już samodzielnie instalować programów ani radzić sobie z niekompatybilnością wersji na swoim komputerze. Wszystko, co musisz zrobić, to zainstalować Dockera i wpisać 1-2 polecenia w konsoli. Najwygodniej jest to zrobić w systemie Linux.

Pierwsze kroki

zainstalować Doker i Tworzenie Dockera

Struktura folderów

Tworzymy 2 foldery dla aplikacji klienckich i serwerowych. Plik z rozszerzeniem .yml to plik konfiguracyjny Docker Compose, gdzie zdefiniowane i powiązane są kontenery aplikacji.
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

Tworzymy 3 usługi w Dockerze: dla NodeJS, MongoDB i dla statycznych w Vue. Dodano możliwość połączenia klienta z serwerem zależy od serwera. Aby połączyć MongoDB z API serwera, użyj linki Mongo. Serwer, klient, mongo - nazwy usług.

Klient VueJS

W folderze /klient Aplikacja oparta jest na VueJS. Aplikacja została stworzona przy użyciu Vue Cli. Podczas budowania obrazu aplikacja kliencka jest wbudowana w zestaw plików statycznych w folderze /dystans. Plik Dockerfile opisuje zestaw poleceń służących do budowania obrazu:

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

Należy pamiętać, że plik package.json jest kopiowany i instalowany oddzielnie od pozostałych plików projektu. Odbywa się to ze względu na wydajność, dzięki czemu zawartość folderu /node_modules jest buforowana podczas ponownego budowania. Każda linia poleceń jest buforowana osobno.

Na koniec, po uruchomieniu kontenera, wykonywane jest polecenie npm run dev. To polecenie jest opisane w package.json:

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

Aby uruchomić pliki z folderu /dystans, instalowane na całym świecie http-server, a w zależnościach deweloperskich pakiet spa-http-serveraby router Vue działał poprawnie. Flaga --push-state przekierowuje do pliku Index.html. Dodano flagę -c o wartości 1 sekundy serwer http nie buforował skryptów. To jest przykład testowy; w prawdziwym projekcie lepiej jest używać Nginx.

W sklepie Vuex tworzymy pole apiHost: 'http://localhost:3000', gdzie zarejestrowany jest port NodeJS Api. Część kliencka jest gotowa. Teraz wszystkie żądania od klienta skierowane do tyłu trafiają do tego adresu URL.

API serwera NodeJS

W folderze /server tworzyć serwer.js i plik Docker:

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

В serwer.js wskazany url dla bazy danych const url = 'mongodb://mongo:27017/';. Zezwalanie na żądania między domenami od klienta:

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

wniosek

Przejdźmy teraz do katalogu projektu i uruchommy docker-compose build do konstruowania obrazów i docker-compose up do obsługi kontenerów. Zespół podniesie 3 kontenery: serwer, klient, mongo. W przypadku serwera NodeJS można skonfigurować ponowne ładowanie na gorąco, łącząc go z folderem użytkownika. A opracowywany klient powinien zostać uruchomiony lokalnie z gorącym przeładowaniem, działającym osobno serwer и Mongo. Aby uruchomić osobną usługę wystarczy podać jej nazwę docker-compose up client. Nie zapomnij czasem o tym zrobić prune oraz usuwanie kontenerów, sieci i obrazów, aby zwolnić zasoby.

Możesz zobaczyć pełny kod tutaj. Projekt jest wciąż w fazie rozwoju.

Źródło: www.habr.com