Jak zabalit aplikaci VueJS + NodeJS + MongoDB v Dockeru

Jak můžete vidět z předchozího článku, pracoval jsem s různými projekty. První dny v novém týmu obvykle probíhají stejně: backender si ke mně sedne a provede magické kroky k instalaci a nasazení aplikace. Docker je pro front-end vývojáře nepostradatelný, protože. Backend je často napsán v široké škále sad PHP/Java/Python/C# a přední strana nemusí pokaždé rozptylovat zadní část, aby vše nainstalovala a nasadila. Jen na jednom místě jsem viděl hromadu Docker-Jenkinů s průhledným nasazením, logy, sešroubovanými autotesty.

O dockeru bylo napsáno mnoho podrobných článků. Tento článek se zaměří na nasazení Single Page Application pomocí VueJS / Vue Router, serverové části ve formě RESTful API s NodeJS a MongoDB se používá jako databáze. Docker Compose se používá k popisu a spouštění více kontejnerových aplikací.

Proč potřebujete Docker

Docker umožňuje automatizovat proces nasazení aplikace. Vývojář již nepotřebuje instalovat programy sám, řešit nekompatibilitu verzí na svém počítači. Stačí nainstalovat Docker a zadat 1-2 příkazy do konzole. Nejpohodlnější je to udělat na Linuxu.

Začínáme

Sada přístavní dělník a Docker skládat

Struktura složek

Vytváříme 2 složky pro klientské a serverové aplikace. Soubor s příponou .yml je config Docker Composekde jsou definovány a propojeny aplikační kontejnery.
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

V dockeru vytváříme 3 služby: pro NodeJS, MongoDB a pro statiku na Vue. Přidáno připojení klienta k serveru záleží na serveru. Chcete-li propojit MongoDB se serverovým API, použijte odkazy mongo. Server, klient, mongo jsou názvy služeb.

Klient VueJS

Ve složce /klient aplikace je umístěna na VueJS. Aplikace vytvořená pomocí vue cli. Při vytváření bitové kopie je klientská aplikace zabudována do sady statických souborů ve složce / dist. Dockerfile popisuje sadu příkazů pro vytvoření 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"]

Všimněte si, že package.json se zkopíruje a nainstaluje odděleně od ostatních souborů projektu. To se provádí kvůli výkonu, takže obsah složky /node_modules je při novém sestavení ukládán do mezipaměti. Každý příkazový řádek je ukládán do mezipaměti samostatně.

Na konci, když je kontejner spuštěn, se příkaz provede npm run dev. Tento příkaz je popsán v package.json:

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

Spouštění souborů ze složky / dist, globálně nastavený http-servera v balíčku dev-dependencies spa-http-serveraby Vue Router fungoval správně. Příznak --push-state přesměruje na index.html. Byl přidán parametr -c s hodnotou 1 sekunda http-server neukládal skripty do mezipaměti. Toto je testovací příklad, na skutečném projektu je lepší použít nginx.

Vytvořte pole v obchodě Vuex apiHost: 'http://localhost:3000', kde je zapsán port NodeJS Api. Klientská část je připravena. Nyní všechny požadavky od klienta na back-end jdou na tuto adresu URL.

NodeJS Server API

Ve složce /server vytvořit server.js a Dockerfile:

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

В server.js uvedeno url pro databázi const url = 'mongodb://mongo:27017/';. Povolujeme požadavky klienta z více domén:

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

Závěr

Nyní přejděte do adresáře projektu a spusťte docker-compose build pro zobrazování a docker-compose up provozovat kontejnery. Příkaz zvedne 3 kontejnery: server, klient, mongo. U serveru NodeJS můžete konfigurovat opětovné načtení za provozu tak, že jej propojíte se složkou uživatele. A klient je ve vývoji, aby běžel lokálně s hot reload, běží samostatně Server и Mongo. Chcete-li spustit samostatnou službu, stačí zadat její název docker-compose up client. Nezapomeňte to někdy udělat prune a odstranění kontejnerů (kontejnerů), sítí (sítí) a obrázků (obrázků), aby se uvolnily zdroje.

Můžete vidět celý kód zde. Projekt je stále ve vývoji.

Zdroj: www.habr.com