ProHoster > Π‘Π»ΠΎΠ³ > Administrasi > Carane paket aplikasi VueJS + NodeJS + MongoDB ing Docker

Carane paket aplikasi VueJS + NodeJS + MongoDB ing Docker

Carane paket aplikasi VueJS + NodeJS + MongoDB ing Docker
Kaya sing sampeyan ngerteni saka artikel sadurunge, aku kerja ing macem-macem proyek. Dina pisanan ing tim anyar biasane mlaku kanthi cara sing padha: backender lenggah karo aku lan nindakake tumindak gaib kanggo nginstal lan nyebarake aplikasi kasebut. Docker penting banget kanggo pangembang ngarep amarga ... Backend asring ditulis ing sawetara saka sudhut PHP / Java / Python / C # tumpukan, lan ngarep ora kudu disambi backend saben wektu kanggo nginstal lan masang kabeh. Mung ing sak panggonan aku ndeleng kombinasi Docker-Jenkins kanthi panyebaran transparan, log, lan tes otomatis.

Akeh artikel rinci sing wis ditulis babagan Docker. Artikel iki bakal pirembagan bab deploying Aplikasi Single Page nggunakake VueJS / Vue Router, bagean server ing wangun RESTful API karo NodeJS, lan MongoDB digunakake minangka database. Docker Compose digunakake kanggo nemtokake lan mbukak macem-macem aplikasi wadah.

Napa Docker dibutuhake

Docker ngidini sampeyan ngotomatisasi proses nyebarake aplikasi. Pangembang ora perlu nginstal program dhewe utawa ngatasi ketidakcocokan versi ing mesine. Sampeyan mung kudu nginstal Docker lan ketik printah 1-2 menyang console. Cara sing paling trep kanggo nindakake iki yaiku ing Linux.

Miwiti

Instal docker lan Docker nulis

Struktur folder

Kita nggawe 2 folder kanggo aplikasi klien lan server. Berkas kanthi ekstensi .yml minangka konfigurasi Docker Compose, ing ngendi wadhah aplikasi ditetepake lan digandhengake.
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

Kita nggawe 3 layanan ing Docker: kanggo NodeJS, MongoDB lan kanggo sing statis ing Vue. Ditambahake kanggo nyambungake klien menyang server gumantung ing server. Kanggo ngubungake MongoDB karo API server, gunakake link mongo. Server, klien, mongo - jeneng layanan.

klien VueJS

Ing folder /klien Aplikasi kasebut adhedhasar VueJS. Aplikasi digawe nggunakake Vue Cli. Nalika nggawe gambar, aplikasi klien dibangun ing sakumpulan file statis ing folder kasebut /dist. Dockerfile nggambarake seperangkat perintah kanggo mbangun 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"]

Elinga yen package.json disalin lan diinstal kanthi kapisah saka file proyek liyane. Iki rampung kanggo kinerja, supaya isi folder / node_modules cached nalika mbangun maneh. Saben baris printah disimpen kanthi kapisah.

Pungkasan, nalika wadhah diwiwiti, printah kasebut dieksekusi npm run dev. Printah iki diterangake ing package.json:


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

Kanggo mbukak file saka folder /dist, diinstal sacara global http-server, lan ing dev-dependensi paket spa-http-serversupaya Vue Router bisa digunakake kanthi bener. GendΓ©ra --push-state pangalihan menyang index.html. GendΓ©ra -c kanthi nilai 1 detik ditambahake http-server ora cache script. Iki minangka conto tes; ing proyek nyata luwih becik nggunakake nginx.

Ing toko Vuex kita nggawe lapangan apiHost: 'http://localhost:3000', ing ngendi port NodeJS Api kadhaptar. Bagian klien wis siyap. Saiki kabeh panjalukan saka klien menyang mburi menyang url iki.

API server NodeJS

Ing folder /server nggawe server.js lan Dockerfile: 


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

Π’ server.js dituduhake url kanggo database const url = 'mongodb://mongo:27017/';. Ngidini panjalukan lintas domain saka 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));
  });

kesimpulan

Saiki ayo pindhah menyang direktori proyek lan mbukak docker-compose build kanggo mbangun gambar lan docker-compose up kanggo mbukak wadhah. Tim bakal ngangkat 3 kontainer: server, klien, mongo. Kanggo server NodeJS, sampeyan bisa ngatur hot-reload kanthi ngubungake menyang folder pangguna. Lan klien sing dikembangake kudu diluncurake sacara lokal kanthi reload panas, mlaku kanthi kapisah server ΠΈ mongo. Kanggo miwiti layanan kapisah, mung nemtokake jeneng docker-compose up client. Aja lali kanggo nindakake iku kadhangkala prune lan mbusak wadhah, jaringan, lan gambar kanggo mbebasake sumber daya.

Sampeyan bisa ndeleng kode lengkap kene. Proyek kasebut isih dikembangake.

Source: www.habr.com

Add a comment