Kumaha paket aplikasi VueJS + NodeJS + MongoDB di Docker

Sakumaha anjeun tiasa ngartos tina tulisan sateuacana, kuring damel dina proyék anu béda. Poé-poé mimiti dina tim anyar biasana jalan anu sami: backender calik sareng kuring sareng ngalakukeun tindakan magis pikeun masang sareng nyebarkeun aplikasi. Docker penting pisan pikeun pamekar hareup-tungtung sabab ... backend nu mindeng ditulis dina rupa-rupa PHP / Java / Python / C # tumpukan, sarta hareup teu kudu ngaganggu backend unggal waktos masang sarta nyebarkeun sagalana. Ngan dina hiji tempat kuring ningali kombinasi Docker-Jenkins kalayan panyebaran transparan, log, sareng tés otomatis.

Seueur tulisan rinci anu ditulis ngeunaan Docker. Artikel ieu bakal ngobrol ngeunaan nyebarkeun Aplikasi Halaman Tunggal nganggo VueJS / Vue Router, bagian server dina bentuk API RESTful sareng NodeJS, sareng MongoDB dianggo salaku pangkalan data. Docker Compose dianggo pikeun ngartikeun sareng ngajalankeun sababaraha aplikasi wadahna.

Naha Docker diperyogikeun

Docker ngamungkinkeun anjeun pikeun ngajadikeun otomatis prosés panyebaran aplikasi. Pamekar henteu kedah deui masang program nyalira atanapi nganyahokeun sauyunan versi dina mesinna. Sadaya anu anjeun kedah laksanakeun nyaéta masang Docker sareng ngetik paréntah 1-2 kana konsol. Cara anu paling merenah pikeun ngalakukeun ieu nyaéta dina Linux.

Ngamimitian

Masang Docker jeung Docker nyusun

Struktur folder

Kami nyiptakeun 2 polder pikeun aplikasi klien sareng server. A file jeung extension .yml nyaeta config a Docker Tulis, dimana wadahna aplikasi diartikeun sarta pakait.
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

Kami nyiptakeun 3 jasa di Docker: pikeun NodeJS, MongoDB sareng pikeun anu statik di Vue. Ditambahkeun pikeun nyambungkeun klien ka server gumantung kana server. Pikeun ngaitkeun MongoDB sareng API server, paké Tumbu mongo. Server, klien, mongo - ngaran jasa.

klien VueJS

Dina folder /klién Aplikasi ieu dumasar kana VueJS. Aplikasi dijieun ngagunakeun Vue Cli. Nalika ngawangun gambar, aplikasi klien diwangun kana sakumpulan file statik dina polder / Kab. Dockerfile ngajelaskeun sakumpulan paréntah pikeun ngawangun gambar:

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

Punten dicatet yén package.json disalin sareng dipasang sacara misah ti sésa file proyék. Hal ieu dilakukeun pikeun pagelaran, supados eusi folder /node_modules di-cache nalika ngawangun deui. Unggal garis paréntah disimpen sacara misah.

Tungtungna, nalika wadahna dimimitian, paréntah dieksekusi npm run dev. Paréntah ieu dijelaskeun dina package.json:

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

Pikeun ngajalankeun file tina polder / Kab, dipasang sacara global http-server, sareng di dev-dependencies pakét spa-http-serversupados Vue Router jalan leres. Bandéra --push-state dialihkeun ka index.html. Bandéra -c kalayan nilai 1 detik ditambahkeun kana http-server teu cache Aksara. Ieu mangrupikeun conto tés; dina proyék nyata langkung saé ngagunakeun nginx.

Dina toko Vuex urang nyieun sawah apiHost: 'http://localhost:3000', dimana port NodeJS Api didaptarkeun. Bagian klien geus siap. Ayeuna sadaya pamundut ti klien ka tukang angkat ka url ieu.

API server NodeJS

Dina folder /server nyiptakeun server.js sareng Dockerfile:

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

В server.js dituduhkeun url pikeun database const url = 'mongodb://mongo:27017/';. Ngidinan pamundut cross-domain ti klien:

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

kacindekan

Ayeuna hayu urang angkat ka diréktori proyék sareng jalankeun docker-compose build pikeun ngawangun gambar jeung docker-compose up pikeun ngajalankeun peti. Tim bakal angkat 3 wadah: server, klien, mongo. Pikeun server NodeJS, anjeun tiasa ngonpigurasikeun hot-reload ku cara ngaitkeun kana polder pangguna. Sareng klien anu dikembangkeun kedah diluncurkeun sacara lokal kalayan ngamuat ulang panas, ngajalankeun nyalira server и mongo. Pikeun ngamimitian jasa anu misah, sebatkeun namina docker-compose up client. Ulah poho pikeun ngalakukeunana sok prune sareng mupus wadah, jaringan, sareng gambar pikeun ngosongkeun sumber.

Anjeun tiasa ningali kode pinuh di dieu. Proyék ieu masih dina pangwangunan.

sumber: www.habr.com